<div class="page-settings page-wrapper">
  @if (globalCfg) {
    <div class="settings-container">
      <h1 class="mat-h1 settings-title">{{ T.PS.GLOBAL_SETTINGS | translate }}</h1>

      <mat-tab-group
        class="settings-tabs"
        [(selectedIndex)]="selectedTabIndex"
        animationDuration="200ms"
      >
        <!-- Tab: General -->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon
              class="tab-icon"
              [matTooltip]="'PS.TABS.GENERAL' | translate"
              >settings</mat-icon
            >
            <span class="tab-label">{{ 'PS.TABS.GENERAL' | translate }}</span>
          </ng-template>
          <div class="tab-content">
            <h2 class="mat-h2 section-title">
              {{ 'PS.TABS.GENERAL' | translate }}
            </h2>
            <theme-selector></theme-selector>
            @for (section of generalFormCfg; track section.key) {
              <section class="config-section section-{{ section.key }}">
                <config-section
                  (save)="saveGlobalCfg($event)"
                  [cfg]="getGlobalCfgSection(section.key)"
                  [section]="section"
                ></config-section>
              </section>
            }
          </div>
        </mat-tab>

        <!-- Tab: Tasks -->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon
              class="tab-icon"
              [matTooltip]="'PS.TABS.TASKS' | translate"
              >task</mat-icon
            >
            <span class="tab-label">{{ 'PS.TABS.TASKS' | translate }}</span>
          </ng-template>
          <div class="tab-content">
            <h2 class="mat-h2 section-title">
              {{ 'PS.TABS.TASKS' | translate }}
            </h2>
            @for (section of globalTasksFormCfg; track section.key) {
              <section class="config-section section-{{ section.key }}">
                <config-section
                  (save)="saveGlobalCfg($event)"
                  [cfg]="getGlobalCfgSection(section.key)"
                  [section]="section"
                ></config-section>
              </section>
            }

            <!-- @todo: Create a single style for forming all the settings elements.
                        Make all as "sections" or as "forms" consistently.
            -->
            <section class="config-section">
              <config-sound-form
                [cfg]="getGlobalCfgSection('sound')"
                (save)="saveGlobalCfg($event)"
              ></config-sound-form>
            </section>
          </div>
        </mat-tab>

        <!-- Tab: Time & Tracking -->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon
              class="tab-icon"
              [matTooltip]="'PS.TABS.TIME_TRACKING' | translate"
              >timer</mat-icon
            >
            <span class="tab-label">{{ 'PS.TABS.TIME_TRACKING' | translate }}</span>
          </ng-template>
          <div class="tab-content">
            <h2 class="mat-h2 section-title">
              {{ 'PS.TABS.TIME_TRACKING' | translate }}
            </h2>
            @for (section of timeTrackingFormCfg; track section.key) {
              <section class="config-section section-{{ section.key }}">
                <config-section
                  (save)="saveGlobalCfg($event)"
                  [cfg]="getGlobalCfgSection(section.key)"
                  [section]="section"
                ></config-section>
              </section>
            }
          </div>
        </mat-tab>

        <!-- Tab: Productivity -->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon
              class="tab-icon"
              [matTooltip]="'PS.TABS.PRODUCTIVITY' | translate"
              >trending_up</mat-icon
            >
            <span class="tab-label">{{ 'PS.TABS.PRODUCTIVITY' | translate }}</span>
          </ng-template>
          <div class="tab-content tour-productivityHelper">
            <h2 class="mat-h2 section-title">
              {{ 'PS.TABS.PRODUCTIVITY' | translate }}
            </h2>
            @for (section of globalProductivityConfigFormCfg; track section.key) {
              <section class="config-section">
                <config-section
                  (save)="saveGlobalCfg($event)"
                  [cfg]="getGlobalCfgSection(section.key)"
                  [section]="section"
                ></config-section>
              </section>
            }
          </div>
        </mat-tab>

        <!-- Tab: Plugins -->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon
              class="tab-icon"
              [matTooltip]="'PS.TABS.PLUGINS' | translate"
              >extension</mat-icon
            >
            <span class="tab-label">{{ 'PS.TABS.PLUGINS' | translate }}</span>
          </ng-template>
          <div class="tab-content">
            <h2 class="mat-h2 section-title">
              {{ 'PS.TABS.PLUGINS' | translate }}
            </h2>
            <section class="config-section plugin-section">
              <plugin-management></plugin-management>
            </section>
            @for (section of pluginsShortcutsFormCfg; track section.key) {
              <section class="config-section section-{{ section.key }}">
                <config-section
                  (save)="saveGlobalCfg($event)"
                  [cfg]="getGlobalCfgSection(section.key)"
                  [section]="section"
                ></config-section>
              </section>
            }
          </div>
        </mat-tab>

        <!-- Tab: Sync & Backup -->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon
              class="tab-icon"
              [matTooltip]="'PS.TABS.SYNC_BACKUP' | translate"
              >cloud_sync</mat-icon
            >
            <span class="tab-label">{{ 'PS.TABS.SYNC_BACKUP' | translate }}</span>
          </ng-template>
          <div class="tab-content">
            <h2 class="mat-h2 section-title">
              {{ 'PS.TABS.SYNC_BACKUP' | translate }}
            </h2>
            <section class="config-section tour-syncSection">
              @let syncSettingsForm = syncSettingsService.syncSettingsForm$ | async;
              @if (syncSettingsForm) {
                <config-section
                  (save)="syncSettingsService.updateSettingsFromForm($event.config)"
                  [cfg]="syncSettingsForm"
                  [section]="globalSyncConfigFormCfg"
                ></config-section>
              }
            </section>

            @for (section of globalImexFormCfg; track section.key) {
              <section class="config-section imex-section">
                <config-section
                  (save)="saveGlobalCfg($event)"
                  [cfg]="getGlobalCfgSection(section.key)"
                  [section]="section"
                ></config-section>
              </section>
            }
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  }
</div>

<footer
  class="version-footer"
  title="Rev {{ versions?.revision }} {{ versions?.branch }} {{ versions?.version }}"
>
  Super Productivity
  <a
    href="https://github.com/super-productivity/super-productivity/blob/master/CHANGELOG.md"
    target="_blank"
    >{{ appVersion }}</a
  >
  –
  <a
    (click)="downloadLogs(); $event?.preventDefault()"
    href="#"
    >Logs</a
  >
  –
  <a
    href="https://super-productivity.com/privacy/"
    target="_blank"
    >{{ T.PS.PRIVACY_POLICY | translate }}</a
  >
  –
  <a
    href="https://github.com/super-productivity/super-productivity/discussions/new"
    target="_blank"
    >{{ T.PS.PROVIDE_FEEDBACK | translate }}</a
  >
</footer>
