@if (readingProfile !== null) {
  <ng-container *transloco="let t; read: 'reader-settings'">
    <form [formGroup]="settingsForm">
      <div ngbAccordion [closeOthers]="false" #acc="ngbAccordion">
        <div ngbAccordionItem id="general-panel" title="General Settings" [collapsed]="false">
          <h2 class="accordion-header" ngbAccordionHeader>
            <button ngbAccordionButton class="accordion-button" type="button" [attr.aria-expanded]="acc.isExpanded('general-panel')" aria-controls="collapseOne">
              {{t('general-settings-title')}}
            </button>
          </h2>
          <div ngbAccordionCollapse>
            <div ngbAccordionBody>
              <ng-template>
                <div class="control-container" >
                  <div class="controls">
                    <div class="mb-3">
                      <label for="library-type" class="form-label">{{t('font-family-label')}}</label>
                      <select class="form-select" id="library-type" formControlName="bookReaderFontFamily">
                        @for(opt of fontOptions; track opt) {
                          <option [value]="opt">{{opt | titlecase}}</option>
                        }
                      </select>
                    </div>
                  </div>
                  <div class="row g-0 controls">
                    <label for="fontsize" class="form-label col-6">{{t('font-size-label')}}</label>
                    <span class="col-6 float-end" style="display: inline-flex;">
                            <i class="fa-solid fa-font"  style="font-size: 12px;"></i>
                            <input type="range" class="form-range ms-2 me-2" id="fontsize"
                                   min="50" max="300" step="10" formControlName="bookReaderFontSize"
                                   [ngbTooltip]="pageStyles()['font-size']">
                            <i class="fa-solid fa-font" style="font-size: 24px;"></i>
                        </span>
                  </div>

                  <div class="row g-0 controls">
                    <label for="linespacing" class="form-label col-6">{{t('line-spacing-label')}}</label>
                    <span class="col-6 float-end" style="display: inline-flex;">
                      {{t('line-spacing-min-label')}}
                      <input type="range" class="form-range ms-2 me-2" id="linespacing"
                             min="100" max="200" step="10" formControlName="bookReaderLineSpacing"
                             [ngbTooltip]="pageStyles()['line-height']">
                      {{t('line-spacing-max-label')}}
                        </span>
                  </div>

                  <div class="row g-0 controls">
                    <label for="margin" class="form-label col-6">{{t('margin-label')}}</label>
                    <span class="col-6 float-end" style="display: inline-flex;">
                            <i class="fa-solid fa-outdent"></i>
                            <input type="range" class="form-range ms-2 me-2" id="margin" min="0" max="30" step="5" formControlName="bookReaderMargin" [ngbTooltip]="settingsForm.get('bookReaderMargin')?.value + '%'">
                            <i class="fa-solid fa-indent"></i>
                        </span>
                  </div>

                  <div class="row g-0 justify-content-between mt-2">
                    <button (click)="resetSettings()" class="btn btn-primary col">{{t('reset-to-defaults')}}</button>
                  </div>
                </div>
              </ng-template>
            </div>

          </div>

        </div>

        <div ngbAccordionItem id="reader-panel" title="Reader Settings" [collapsed]="false">
          <h2 class="accordion-header" ngbAccordionHeader>
            <button class="accordion-button" ngbAccordionButton type="button" [attr.aria-expanded]="acc.isExpanded('reader-panel')" aria-controls="collapseOne">
              {{t('reader-settings-title')}}
            </button>
          </h2>
          <div ngbAccordionCollapse>
            <div ngbAccordionBody>
              <ng-template>
                <div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
                  <label id="readingdirection" class="form-label">{{t('reading-direction-label')}}</label>
                  <button (click)="toggleReadingDirection()" class="btn btn-icon" aria-labelledby="readingdirection" title="{{readingDirectionModel() === ReadingDirection.LeftToRight ? t('left-to-right') : t('right-to-left')}}">
                    <i class="fa {{readingDirectionModel() === ReadingDirection.LeftToRight ? 'fa-arrow-right' : 'fa-arrow-left'}} " aria-hidden="true"></i>
                    <span class="phone-hidden">&nbsp;{{readingDirectionModel() === ReadingDirection.LeftToRight ? t('left-to-right') : t('right-to-left')}}</span>
                  </button>
                </div>
                <div class="controls" style="display: flex; justify-content: space-between; align-items: center; ">
                  <label for="writing-style" class="form-label">{{t('writing-style-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="writingStyleTooltip" role="button" tabindex="0" aria-describedby="writingStyle-help"></i></label>
                  <ng-template #writingStyleTooltip>{{t('writing-style-tooltip')}}</ng-template>
                  <span class="visually-hidden" id="writingStyle-help"><ng-container [ngTemplateOutlet]="writingStyleTooltip"></ng-container></span>
                  <button (click)="toggleWritingStyle()" id="writing-style" class="btn btn-icon" aria-labelledby="writingStyle-help" title="{{writingStyleModel() === WritingStyle.Horizontal ? t('horizontal') : t('vertical')}}">
                    <i class="fa {{writingStyleModel() === WritingStyle.Horizontal ? 'fa-arrows-left-right' : 'fa-arrows-up-down' }}" aria-hidden="true"></i>
                    <span class="phone-hidden"> {{writingStyleModel() === WritingStyle.Horizontal ? t('horizontal') : t('vertical') }}</span>
                  </button>

                </div>
                <div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
                  <label for="tap-pagination" class="form-label">{{t('tap-to-paginate-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="tapPaginationTooltip" role="button" tabindex="0" aria-describedby="tapPagination-help"></i></label>
                  <ng-template #tapPaginationTooltip>{{t('tap-to-paginate-tooltip')}}</ng-template>
                  <span class="visually-hidden" id="tapPagination-help">
                  <ng-container [ngTemplateOutlet]="tapPaginationTooltip"></ng-container>
                </span>
                  <div class="form-check form-switch">
                    <input type="checkbox" id="tap-pagination" formControlName="bookReaderTapToPaginate" class="form-check-input" aria-labelledby="tapPagination-help">
                    <label>{{settingsForm.get('bookReaderTapToPaginate')?.value ? t('on') : t('off')}} </label>
                  </div>
                </div>
                <div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
                  <label for="immersive-mode" class="form-label">{{t('immersive-mode-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="immersiveModeTooltip" role="button" tabindex="0" aria-describedby="immersiveMode-help"></i></label>
                  <ng-template #immersiveModeTooltip>{{t('immersive-mode-tooltip')}}</ng-template>
                  <span class="visually-hidden" id="immersiveMode-help">
                        <ng-container [ngTemplateOutlet]="immersiveModeTooltip"></ng-container>
                    </span>
                  <div class="form-check form-switch">
                    <input type="checkbox" id="immersive-mode" formControlName="bookReaderImmersiveMode" class="form-check-input" aria-labelledby="immersiveMode-help">
                    <label>{{settingsForm.get('bookReaderImmersiveMode')?.value ? t('on') : t('off')}} </label>
                  </div>
                </div>

                <div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
                  <label id="fullscreen" class="form-label">{{t('fullscreen-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top"
                                                                                        [ngbTooltip]="fullscreenTooltip" role="button" tabindex="1" aria-describedby="fullscreen-help"></i></label>
                  <ng-template #fullscreenTooltip>{{t('fullscreen-tooltip')}}</ng-template>
                  <span class="visually-hidden" id="fullscreen-help">
                    <ng-container [ngTemplateOutlet]="fullscreenTooltip"></ng-container>
                </span>
                  <button (click)="toggleFullscreen()" class="btn btn-icon" aria-labelledby="fullscreen">
                    <i class="fa {{isFullscreen() ? 'fa-compress-alt' : 'fa-expand-alt'}} {{isFullscreen() ? 'icon-primary-color' : ''}}" aria-hidden="true"></i>
                    @if (activeTheme()?.isDarkTheme) {
                      <span class="ms-1">{{isFullscreen() ? t('exit') : t('enter')}}</span>
                    }
                  </button>
                </div>

                <div class="controls">
                  <label id="layout-mode" class="form-label" style="margin-bottom:0.5rem">{{t('layout-mode-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="layoutTooltip" role="button" tabindex="1" aria-describedby="layout-help"></i></label>
                  <ng-template #layoutTooltip><span [innerHTML]="t('layout-mode-tooltip')"></span></ng-template>
                  <span class="visually-hidden" id="layout-help">
                    <ng-container [ngTemplateOutlet]="layoutTooltip"></ng-container>
                </span>
                  <br>
                  <div class="btn-group d-flex justify-content-center" role="group" [attr.aria-label]="t('layout-mode-label')">
                    <input type="radio" formControlName="layoutMode" [value]="BookPageLayoutMode.Default" class="btn-check" id="layout-mode-default" autocomplete="off">
                    <label class="btn btn-outline-primary" for="layout-mode-default">{{t('layout-mode-option-scroll')}}</label>

                    <input type="radio" formControlName="layoutMode" [value]="BookPageLayoutMode.Column1" class="btn-check" id="layout-mode-col1" autocomplete="off">
                    <label class="btn btn-outline-primary" for="layout-mode-col1">{{t('layout-mode-option-1col')}}</label>

                    <input type="radio" formControlName="layoutMode" [value]="BookPageLayoutMode.Column2" class="btn-check" id="layout-mode-col2" autocomplete="off">
                    <label class="btn btn-outline-primary" for="layout-mode-col2">{{t('layout-mode-option-2col')}}</label>
                  </div>
                </div>


              </ng-template>
            </div>
          </div>
        </div>

        <div ngbAccordionItem id="color-panel" [title]="t('color-theme-title')" [collapsed]="false">
          <h2 class="accordion-header" ngbAccordionHeader>
            <button class="accordion-button" ngbAccordionButton type="button" [attr.aria-expanded]="acc.isExpanded('color-panel')" aria-controls="collapseOne">
              {{t('color-theme-title')}}
            </button>
          </h2>
          <div ngbAccordionCollapse>
            <div ngbAccordionBody>
              <ng-template>
                <div class="controls">
                  @for(theme of themes; track theme.name) {
                    <button class="btn btn-icon color" (click)="setTheme(theme.name)" [ngClass]="{'active': activeTheme()?.name === theme.name}">
                      <div class="dot" [ngStyle]="{'background-color': theme.colorHash}"></div>
                      {{t(theme.translationKey)}}
                    </button>
                  }
                </div>
              </ng-template>
            </div>
          </div>
        </div>

        @let currentRP = currentReadingProfile();
        <div class="row g-0 mt-2">
          <button class="btn btn-primary col-12 mb-2"
                  [disabled]="!currentRP || currentRP.kind !== ReadingProfileKind.Implicit || !hasParentProfile()"
                  (click)="updateParentPref()">
            {{ t('update-parent', {name: parentReadingProfile()?.name || t('loading')}) }}
          </button>
          <button class="btn btn-primary col-12 mb-2"
                  [ngbTooltip]="t('create-new-tooltip')"
                  [disabled]="!canPromoteProfile()"
                  (click)="createNewProfileFromImplicit()">
            {{ t('create-new') }}
          </button>
        </div>


      </div>
    </form>

  </ng-container>
}