<div class="page-settings page-wrapper">
  @if (globalCfg) {
    <div class="settings-container">
      <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)"
                  [isExpanded]="
                    section.key === expandedSection ||
                    section.customSection === expandedSection
                  "
                  [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)"
                  [isExpanded]="
                    section.key === expandedSection ||
                    section.customSection === expandedSection
                  "
                  [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)"
                  [isExpanded]="
                    section.key === expandedSection ||
                    section.customSection === expandedSection
                  "
                  [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)"
                  [isExpanded]="
                    section.key === expandedSection ||
                    section.customSection === expandedSection
                  "
                  [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)"
                  [isExpanded]="
                    section.key === expandedSection ||
                    section.customSection === expandedSection
                  "
                  [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 sync-summary">
              @let status = syncStatus();
              @if (!status.providerId) {
                <p class="sync-summary__intro">
                  {{ 'PS.SYNC.EMPTY_STATE_HINT' | translate }}
                </p>
                <div class="sync-summary__actions">
                  <button
                    (click)="openSyncCfgDialog()"
                    color="primary"
                    mat-flat-button
                    type="button"
                  >
                    <mat-icon>cloud_sync</mat-icon>
                    {{ 'PS.SYNC.SET_UP_SYNC' | translate }}
                  </button>
                </div>
              } @else {
                <div class="sync-summary__status">
                  <span class="sync-summary__provider">
                    <mat-icon>cloud_sync</mat-icon>
                    {{ status.providerId }}
                  </span>
                  @if (status.needsAuth) {
                    <span class="sync-summary__pill sync-summary__pill--warn">
                      {{ 'PS.SYNC.NEEDS_AUTH' | translate }}
                    </span>
                  }
                  @if (status.isEncrypted) {
                    <span class="sync-summary__pill">
                      <mat-icon>lock</mat-icon>
                      {{ 'PS.SYNC.ENCRYPTED' | translate }}
                    </span>
                  }
                </div>
                <div class="sync-summary__actions">
                  <button
                    (click)="triggerSync()"
                    color="primary"
                    mat-flat-button
                    type="button"
                  >
                    <mat-icon>sync</mat-icon>
                    {{ 'F.SYNC.BTN_SYNC_NOW' | translate }}
                  </button>
                  <button
                    (click)="openSyncCfgDialog()"
                    mat-stroked-button
                    type="button"
                  >
                    <mat-icon>tune</mat-icon>
                    {{ 'PS.SYNC.CONFIGURE' | translate }}
                  </button>
                </div>
              }
            </section>

            @for (section of globalImexFormCfg; track section.key) {
              <section class="config-section imex-section">
                <config-section
                  (save)="saveGlobalCfg($event)"
                  [cfg]="getGlobalCfgSection(section.key)"
                  [isExpanded]="
                    section.key === expandedSection ||
                    section.customSection === expandedSection
                  "
                  [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
    class="version"
    [matTooltip]="T.PS.CLICK_TO_COPY_VERSION | translate"
    (click)="copyVersionToClipboard(appVersion); $event?.preventDefault()"
    href="#"
    >{{ appVersion }}<mat-icon>content_copy</mat-icon></a
  >
  –
  <a
    href="https://github.com/super-productivity/super-productivity/releases/latest"
    target="_blank"
    >Changelog</a
  >
  @if (isUpdateCheckPossible) {
    –
    <a
      (click)="checkForUpdates(); $event?.preventDefault()"
      href="#"
      >{{ T.PS.CHECK_FOR_UPDATES | translate }}</a
    >
  }
  –
  <a
    (click)="showLogs(); $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>
