<ng-container *transloco="let t; prefix: 'settings.tabs'">
  @if (userService.userState$ | async; as userState) {
    @if (userState.user) {
      <div class="settings-container">
        <p-tabs [(value)]="activeTab" lazy scrollable>
          <p-tablist>
            <p-tab [value]="SettingsTab.ReaderSettings">
              <i class="pi pi-book"></i> {{ t('reader') }}
            </p-tab>
            <p-tab [value]="SettingsTab.ViewPreferences">
              <i class="pi pi-desktop"></i> {{ t('view') }}
            </p-tab>
            @if (userState.user.permissions.admin || userState.user.permissions.canManageMetadataConfig) {
              <p-tab [value]="SettingsTab.MetadataSettings">
                <i class="pi pi-sliders-h"></i> {{ t('metadata1') }}
              </p-tab>
              <p-tab [value]="SettingsTab.LibraryMetadataSettings">
                <i class="pi pi-database"></i> {{ t('metadata2') }}
              </p-tab>
            }
            @if (userState.user.permissions.admin || userState.user.permissions.canManageGlobalPreferences) {
              <p-tab [value]="SettingsTab.ApplicationSettings">
                <i class="pi pi-cog"></i> {{ t('application') }}
              </p-tab>
            }
            @if (userState.user.permissions.admin) {
              <p-tab [value]="SettingsTab.UserManagement">
                <i class="pi pi-users"></i> {{ t('users') }}
              </p-tab>
            }
            <p-tab [value]="SettingsTab.EmailSettingsV2">
              <i class="pi pi-envelope"></i> {{ t('email') }}
            </p-tab>
            @if (userState.user.permissions.admin || userState.user.permissions.canManageMetadataConfig) {
              <p-tab [value]="SettingsTab.NamingPattern">
                <i class="pi pi-sitemap"></i> {{ t('patterns') }}
              </p-tab>
            }
            @if (userState.user.permissions.admin) {
              <p-tab [value]="SettingsTab.AuthenticationSettings">
                <i class="pi pi-lock"></i> {{ t('authentication') }}
              </p-tab>
            }
            @if (userState.user.permissions.admin || userState.user.permissions.canAccessTaskManager) {
              <p-tab [value]="SettingsTab.Tasks">
                <i class="pi pi-list-check"></i> {{ t('tasks') }}
              </p-tab>
            }
            @if (userState.user.permissions.admin) {
              <p-tab [value]="SettingsTab.AuditLogs">
                <i class="pi pi-history"></i> {{ t('auditLogs') }}
              </p-tab>
            }
            <p-tab [value]="SettingsTab.OpdsV2">
              <i class="pi pi-globe"></i> {{ t('opds') }}
            </p-tab>
            <p-tab [value]="SettingsTab.DeviceSettings">
              <i class="pi pi-mobile"></i> {{ t('devices') }}
            </p-tab>
          </p-tablist>
          <p-tabpanels>
            <p-tabpanel [value]="SettingsTab.ReaderSettings">
              <ng-template #content>
                <app-reader-preferences></app-reader-preferences>
              </ng-template>
            </p-tabpanel>
            <p-tabpanel [value]="SettingsTab.ViewPreferences">
              <ng-template #content>
                <app-view-preferences-parent></app-view-preferences-parent>
              </ng-template>
            </p-tabpanel>
            @if (userState.user.permissions.admin || userState.user.permissions.canManageMetadataConfig) {
              <p-tabpanel [value]="SettingsTab.MetadataSettings">
                <ng-template #content>
                  <app-metadata-settings-component></app-metadata-settings-component>
                </ng-template>
              </p-tabpanel>
              <p-tabpanel [value]="SettingsTab.LibraryMetadataSettings">
                <ng-template #content>
                  <app-library-metadata-settings-component></app-library-metadata-settings-component>
                </ng-template>
              </p-tabpanel>
            }
            @if (userState.user.permissions.admin || userState.user.permissions.canManageGlobalPreferences) {
              <p-tabpanel [value]="SettingsTab.ApplicationSettings">
                <ng-template #content>
                  <app-global-preferences></app-global-preferences>
                </ng-template>
              </p-tabpanel>
            }
            @if (userState.user.permissions.admin) {
              <p-tabpanel [value]="SettingsTab.UserManagement">
                <ng-template #content>
                  <app-user-management></app-user-management>
                </ng-template>
              </p-tabpanel>
            }
            <p-tabpanel [value]="SettingsTab.EmailSettingsV2">
              <ng-template #content>
                <app-email-v2></app-email-v2>
              </ng-template>
            </p-tabpanel>
            @if (userState.user.permissions.admin || userState.user.permissions.canManageMetadataConfig) {
              <p-tabpanel [value]="SettingsTab.NamingPattern">
                <ng-template #content>
                  <app-file-naming-pattern></app-file-naming-pattern>
                </ng-template>
              </p-tabpanel>
            }
            @if (userState.user.permissions.admin) {
              <p-tabpanel [value]="SettingsTab.AuthenticationSettings">
                <ng-template #content>
                  <app-authentication-settings></app-authentication-settings>
                </ng-template>
              </p-tabpanel>
            }
            @if (userState.user.permissions.admin || userState.user.permissions.canAccessTaskManager) {
              <p-tabpanel [value]="SettingsTab.Tasks">
                <ng-template #content>
                  <app-task-management></app-task-management>
                </ng-template>
              </p-tabpanel>
            }
            @if (userState.user.permissions.admin) {
              <p-tabpanel [value]="SettingsTab.AuditLogs">
                <ng-template #content>
                  <app-audit-logs></app-audit-logs>
                </ng-template>
              </p-tabpanel>
            }
            <p-tabpanel [value]="SettingsTab.OpdsV2">
              <ng-template #content>
                <app-opds-settings></app-opds-settings>
              </ng-template>
            </p-tabpanel>
            <p-tabpanel [value]="SettingsTab.DeviceSettings">
              <ng-template #content>
                <app-device-settings-component></app-device-settings-component>
              </ng-template>
            </p-tabpanel>
          </p-tabpanels>
        </p-tabs>
      </div>
    }
  }
</ng-container>
