booklore/booklore-ui/src/app/features/settings/settings.component.html

@if (userService.userState$ | async; as userState) {
  @if (userState.user) {
    <div class="rounded-xl overflow-hidden border-[1px] border-solid border-[var(--p-content-border-color)]">
      <p-tabs [(value)]="activeTab" scrollable>
        <p-tablist>
          <p-tab [value]="SettingsTab.ReaderSettings">
            <i class="pi pi-book"></i> Reader
          </p-tab>
          <p-tab [value]="SettingsTab.ViewPreferences">
            <i class="pi pi-desktop"></i> View
          </p-tab>
          @if (userState.user.permissions.admin || userState.user.permissions.canManageMetadataConfig) {
            <p-tab [value]="SettingsTab.MetadataSettings">
              <i class="pi pi-sliders-h"></i> Metadata 1
            </p-tab>
            <p-tab [value]="SettingsTab.LibraryMetadataSettings">
              <i class="pi pi-database"></i> Metadata 2
            </p-tab>
          }
          @if (userState.user.permissions.admin || userState.user.permissions.canManageGlobalPreferences) {
            <p-tab [value]="SettingsTab.ApplicationSettings">
              <i class="pi pi-cog"></i> Application
            </p-tab>
          }
          @if (userState.user.permissions.admin) {
            <p-tab [value]="SettingsTab.UserManagement">
              <i class="pi pi-users"></i> Users
            </p-tab>
          }
          <p-tab [value]="SettingsTab.EmailSettingsV2">
            <i class="pi pi-envelope"></i> Email
          </p-tab>
          @if (userState.user.permissions.admin || userState.user.permissions.canManageMetadataConfig) {
            <p-tab [value]="SettingsTab.NamingPattern">
              <i class="pi pi-sitemap"></i> Patterns
            </p-tab>
          }
          @if (userState.user.permissions.admin) {
            <p-tab [value]="SettingsTab.AuthenticationSettings">
              <i class="pi pi-lock"></i> Authentication
            </p-tab>
          }
          @if (userState.user.permissions.admin || userState.user.permissions.canAccessTaskManager) {
            <p-tab [value]="SettingsTab.Tasks">
              <i class="pi pi-list-check"></i> Tasks
            </p-tab>
          }
          <p-tab [value]="SettingsTab.OpdsV2">
            <i class="pi pi-globe"></i> OPDS
          </p-tab>
          <p-tab [value]="SettingsTab.DeviceSettings">
            <i class="pi pi-mobile"></i> Devices
          </p-tab>
        </p-tablist>
        <p-tabpanels>
          <p-tabpanel [value]="SettingsTab.ReaderSettings">
            <app-reader-preferences></app-reader-preferences>
          </p-tabpanel>
          <p-tabpanel [value]="SettingsTab.ViewPreferences">
            <app-view-preferences-parent></app-view-preferences-parent>
          </p-tabpanel>
          @if (userState.user.permissions.admin || userState.user.permissions.canManageMetadataConfig) {
            <p-tabpanel [value]="SettingsTab.MetadataSettings">
              <app-metadata-settings-component></app-metadata-settings-component>
            </p-tabpanel>
            <p-tabpanel [value]="SettingsTab.LibraryMetadataSettings">
              <app-library-metadata-settings-component></app-library-metadata-settings-component>
            </p-tabpanel>
          }
          @if (userState.user.permissions.admin || userState.user.permissions.canManageGlobalPreferences) {
            <p-tabpanel [value]="SettingsTab.ApplicationSettings">
              <app-global-preferences></app-global-preferences>
            </p-tabpanel>
          }
          @if (userState.user.permissions.admin) {
            <p-tabpanel [value]="SettingsTab.UserManagement">
              <app-user-management></app-user-management>
            </p-tabpanel>
          }
          <p-tabpanel [value]="SettingsTab.EmailSettingsV2">
            <app-email-v2></app-email-v2>
          </p-tabpanel>
          @if (userState.user.permissions.admin || userState.user.permissions.canManageMetadataConfig) {
            <p-tabpanel [value]="SettingsTab.NamingPattern">
              <app-file-naming-pattern></app-file-naming-pattern>
            </p-tabpanel>
          }
          @if (userState.user.permissions.admin) {
            <p-tabpanel [value]="SettingsTab.AuthenticationSettings">
              <app-authentication-settings></app-authentication-settings>
            </p-tabpanel>
          }
          @if (userState.user.permissions.admin || userState.user.permissions.canAccessTaskManager) {
            <p-tabpanel [value]="SettingsTab.Tasks">
              <app-task-management></app-task-management>
            </p-tabpanel>
          }
          <p-tabpanel [value]="SettingsTab.OpdsV2">
            <app-opds-settings></app-opds-settings>
          </p-tabpanel>
          <p-tabpanel [value]="SettingsTab.DeviceSettings">
            <app-device-settings-component></app-device-settings-component>
          </p-tabpanel>
        </p-tabpanels>
      </p-tabs>
    </div>
  }
}