<ng-container *transloco="let t; prefix:'manage-metadata-settings'">

  <p>{{t('description')}}</p>
  @if (isLoaded) {
    <form [formGroup]="settingsForm">

      <div class="row g-0 mt-4 mb-4">
        <div class="col-md-6 col-sm-12">
          @if(settingsForm.get('enabled'); as formControl) {
            <app-setting-switch [title]="t('enabled-label')" [subtitle]="t('enabled-tooltip')">
              <ng-template #switch>
                <div class="form-check form-switch float-end">
                  <input id="enabled" type="checkbox" class="form-check-input" formControlName="enabled">
                </div>
              </ng-template>
            </app-setting-switch>
          }
        </div>

        <div class="col-md-6 col-sm-12">
          @if (settingsForm.get('enableExtendedMetadataProcessing'); as control) {
            <app-setting-switch [title]="t('enable-extended-metadata-processing-label')" [subtitle]="t('enable-extended-metadata-processing-tooltip')">
              <ng-template #switch>
                <div class="form-check form-switch float-end">
                  <input id="enable-extended-metadata-processing" type="checkbox" class="form-check-input" formControlName="enableExtendedMetadataProcessing">
                </div>
              </ng-template>
            </app-setting-switch>
          }
        </div>
      </div>

      <div class="row g-0 mt-4 mb-4">
        <div class="col-md-6 col-sm-12">
          <button class="btn btn-secondary" (click)="manageMetadataMappingsComponent().export()">
            {{t('export-settings')}}
          </button>
          <div class="text-muted mt-2">{{t('export-tooltip')}}</div>
        </div>

        <div class="col-md-6 col-sm-12">
          <button class="btn btn-secondary" routerLink="/settings" [fragment]="SettingsTabId.MappingsImport">
            {{t('import-settings')}}
          </button>
          <div class="text-muted mt-2">{{t('import-tooltip')}}</div>
        </div>
      </div>

      <div class="setting-section-break"></div>

      <h4>{{t('series-header')}}</h4>
      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableSummary'); as formControl) {
          <app-setting-switch [title]="t('summary-label')" [subtitle]="t('summary-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="summary" type="checkbox" class="form-check-input" formControlName="enableSummary">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableLocalizedName'); as formControl) {
          <app-setting-switch [title]="t('localized-name-label')" [subtitle]="t('localized-name-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="localized-name" type="checkbox" class="form-check-input" formControlName="enableLocalizedName">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enablePublicationStatus'); as formControl) {
          <app-setting-switch [title]="t('derive-publication-status-label')" [subtitle]="t('derive-publication-status-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="derive-publication-status" type="checkbox" class="form-check-input" formControlName="enablePublicationStatus">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableRelationships'); as formControl) {
          <app-setting-switch [title]="t('enable-relations-label')" [subtitle]="t('enable-relations-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="enable-relations-status" type="checkbox" class="form-check-input" formControlName="enableRelationships">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableStartDate'); as formControl) {
          <app-setting-switch [title]="t('enable-start-date-label')" [subtitle]="t('enable-start-date-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="enable-start-date-status" type="checkbox" class="form-check-input" formControlName="enableStartDate">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableCoverImage'); as formControl) {
          <app-setting-switch [title]="t('enable-cover-image-label')" [subtitle]="t('enable-cover-image-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="enable-cover-image" type="checkbox" class="form-check-input" formControlName="enableCoverImage">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="setting-section-break"></div>

      <h4>{{t('chapter-header')}}</h4>
      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableChapterTitle'); as formControl) {
          <app-setting-switch [title]="t('enable-chapter-title-label')" [subtitle]="t('enable-chapter-title-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="enable-chapter-title" type="checkbox" class="form-check-input" formControlName="enableChapterTitle">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableChapterSummary'); as formControl) {
          <app-setting-switch [title]="t('enable-chapter-summary-label')" [subtitle]="t('enable-chapter-summary-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="enable-chapter-summary" type="checkbox" class="form-check-input" formControlName="enableChapterSummary">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableChapterReleaseDate'); as formControl) {
          <app-setting-switch [title]="t('enable-chapter-release-date-label')" [subtitle]="t('enable-chapter-release-date-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="enable-chapter-release-date" type="checkbox" class="form-check-input" formControlName="enableChapterReleaseDate">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableChapterPublisher'); as formControl) {
          <app-setting-switch [title]="t('enable-chapter-publisher-label')" [subtitle]="t('enable-chapter-publisher-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="enable-chapter-publisher" type="checkbox" class="form-check-input" formControlName="enableChapterPublisher">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      <div class="row g-0 mt-4 mb-4">
        @if(settingsForm.get('enableChapterCoverImage'); as formControl) {
          <app-setting-switch [title]="t('enable-chapter-cover-label')" [subtitle]="t('enable-chapter-cover-tooltip')">
            <ng-template #switch>
              <div class="form-check form-switch float-end">
                <input id="enable-chapter-cover" type="checkbox" class="form-check-input" formControlName="enableChapterCoverImage">
              </div>
            </ng-template>
          </app-setting-switch>
        }
      </div>

      @if(settingsForm.get('enablePeople'); as formControl) {
        <div class="setting-section-break"></div>
        <h4>{{t('people-header')}}</h4>

        <div class="row g-0 mt-4 mb-4">

          <div class="col-6">
            <app-setting-switch [title]="t('enable-people-label')" [subtitle]="t('enable-people-tooltip')">
              <ng-template #switch>
                <div class="form-check form-switch float-end">
                  <input id="enable-people-status" type="checkbox" class="form-check-input" formControlName="enablePeople">
                </div>
              </ng-template>
            </app-setting-switch>
          </div>

          <div class="col-6">
            <app-setting-switch [title]="t('first-last-name-label')" [subtitle]="t('first-last-name-tooltip')">
              <ng-template #switch>
                <div class="form-check form-switch float-end">
                  <input id="enable-first-last-name" type="checkbox" class="form-check-input" formControlName="firstLastPeopleNaming">
                </div>
              </ng-template>
            </app-setting-switch>
          </div>

        </div>

        @if (settingsForm.get('personRoles')) {
          <h5>{{t('person-roles-label')}}</h5>
          <div class="row g-0 mt-4 mb-4" formArrayName="personRoles">
            @for(role of personRoles; track role; let i = $index) {
              <div class="col-md-3">
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" [formControlName]="'personRole_' + i" [id]="'role-' + role">
                  <label class="form-check-label" [for]="'role-' + role">{{ role | personRole }}</label>
                </div>
              </div>
            }
          </div>
        }
      }

      <div class="setting-section-break"></div>

      <h4>{{t('tags-header')}}</h4>
      <div class="row mt-4 mb-4">
        <div class="col-md-6">
          @if(settingsForm.get('enableGenres'); as formControl) {
            <app-setting-switch [title]="t('enable-genres-label')" [subtitle]="t('enable-genres-tooltip')">
              <ng-template #switch>
                <div class="form-check form-switch float-end">
                  <input id="enable-genres-status" type="checkbox" class="form-check-input" formControlName="enableGenres">
                </div>
              </ng-template>
            </app-setting-switch>
          }
        </div>
        <div class="col-md-6">
          @if(settingsForm.get('enableTags'); as formControl) {
            <app-setting-switch [title]="t('enable-tags-label')" [subtitle]="t('enable-tags-tooltip')">
              <ng-template #switch>
                <div class="form-check form-switch float-end">
                  <input id="enable-tags-status" type="checkbox" class="form-check-input" formControlName="enableTags">
                </div>
              </ng-template>
            </app-setting-switch>
          }
        </div>
      </div>

      @if (settings) {
        <app-manage-metadata-mappings [settings]="settings" [settingsForm]="settingsForm" />
      }

      <div class="setting-section-break"></div>

      @if (settingsForm.get('overrides')) {
        <h5>{{t('overrides-label')}}</h5>
        <p>{{t('overrides-description')}}</p>
        <div class="row g-0 mt-4 mb-4" formArrayName="overrides">
          @for(field of allMetadataSettingFields; track field; let i = $index) {
            <div class="col-md-3">
              <div class="form-check">
                <input type="checkbox" class="form-check-input" [formControlName]="'override_' + i" [id]="'override-' + field">
                <label class="form-check-label" [for]="'override-' + field">{{ field | metadataSettingFiled }}</label>
              </div>
            </div>
          }
        </div>
      }

    </form>
  }
</ng-container>
