Kavita/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html

<ng-container *transloco="let t; read: 'library-settings-modal'">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">
      @if (!isAddLibrary) {
        {{t('edit-title', {name: library!.name | sentenceCase})}}
      } @else {
        {{t('add-title')}}
      }
    </h4>
    <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>
  </div>
  <form [formGroup]="libraryForm">
    <div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
      <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills"
          orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">

        <li [ngbNavItem]="TabID.General">
          <a ngbNavLink>{{t(TabID.General)}}</a>
          <ng-template ngbNavContent>
            <div class="mb-3">
              <label for="library-name" class="form-label">{{t('name-label')}}</label>
              @if (libraryForm.get('name'); as formControl) {
                <input id="library-name" class="form-control" formControlName="name" type="text" [class.is-invalid]="formControl.invalid && !formControl.untouched">
                @if (libraryForm.dirty || !libraryForm.untouched) {
                  <div id="inviteForm-validations" class="invalid-feedback">
                    @if (formControl.errors?.required) {
                      <div>{{t('required-field')}}</div>
                    }

                    @if (formControl.errors?.duplicateName) {
                      <div>{{t('library-name-unique')}}</div>
                    }
                  </div>
                }

              }

            </div>

            <div class="mb-3">
              <label for="library-type" class="form-label">{{t('type-label')}}</label>
              <i class="fa fa-info-circle ms-1" placement="end" [ngbTooltip]="typeTooltip" role="button" tabindex="0"></i>
              @if(IsKavitaPlusEligible) {
                <span class="float-end">
                  {{t('kavitaplus-eligible-label')}}
                  <i class="fa fa-info-circle ms-1" placement="start" [ngbTooltip]="kavitaplusEligibleTooltip" role="button" tabindex="0"></i>
                </span>
              }
              <ng-template #typeTooltip>{{t('type-tooltip')}}</ng-template>
              <ng-template #kavitaplusEligibleTooltip>{{t('kavitaplus-eligible-tooltip')}}</ng-template>
              <span class="visually-hidden" id="library-type-help">
                <ng-container [ngTemplateOutlet]="typeTooltip"></ng-container>
              </span>
              <select class="form-select" id="library-type" formControlName="type" aria-describedby="library-type-help">
                @for (opt of libraryTypes; track opt.value) {
                  <option [value]="opt.value">{{opt.title}}</option>
                }

              </select>
            </div>
            <div *ngIf="!isAddLibrary">
              {{t('last-scanned-label')}}
              <span>{{library?.lastScanned | date: 'short' | defaultDate}}</span>
            </div>
          </ng-template>
        </li>


        <li [ngbNavItem]="TabID.Folder" [disabled]="isAddLibrary && setupStep < 1">
          <a ngbNavLink>{{t(TabID.Folder)}}</a>
          <ng-template ngbNavContent>
            <p>{{t('folder-description')}}</p>
            <ul class="list-group list-group-flush" style="width: 100%">
              @for(folder of selectedFolders; track folder) {
                <li class="list-group-item">
                  {{folder}}
                  <button class="btn float-end btn-sm" (click)="removeFolder(folder)"><i class="fa fa-times-circle" aria-hidden="true"></i></button>
                </li>
              }

            </ul>
            <div class="row mt-2">
              <button class="btn btn-secondary float-end btn-sm" (click)="openDirectoryPicker()">
                <i class="fa fa-plus" aria-hidden="true"></i>
                {{t('browse')}}
              </button>
            </div>
            <div class="row mt-2">
              <p>{{t('help-us-part-1')}}<a [href]="WikiLink.ManagingFiles" rel="noopener noreferrer" target="_blank" referrerpolicy="no-referrer">{{t('help-us-part-2')}}</a> {{t('help-us-part-3')}}</p>
            </div>
            <div class="row mt-2">
              <p>{{t('naming-conventions-part-1')}}<a [href]="WikiLink.Scanner" rel="noopener noreferrer" target="_blank" referrerpolicy="no-referrer">{{t('naming-conventions-part-2')}}</a> {{t('naming-conventions-part-3')}}</p>
            </div>
          </ng-template>
        </li>

        <li [ngbNavItem]="TabID.Cover" [disabled]="isAddLibrary && setupStep < 2">
          <a ngbNavLink>{{t(TabID.Cover)}}</a>
          <ng-template ngbNavContent>
            @if (isAddLibrary) {
              <p class="alert alert-warning" role="alert">{{t('cover-description')}}</p>
            }

            <p>{{t('cover-description-extra')}}</p>
            <app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateCoverImageIndex($event)"
                                     (selectedBase64Url)="applyCoverImage($event)" [showReset]="library?.coverImage !== null"
                                     (resetClicked)="resetCoverImage()"></app-cover-image-chooser>
          </ng-template>
        </li>

        <li [ngbNavItem]="TabID.Advanced" [disabled]="isAddLibrary && setupStep < 3">
          <a ngbNavLink>{{t(TabID.Advanced)}}</a>
          <ng-template ngbNavContent>
            <div class="row g-0 mt-4 mb-4">
              <app-setting-item [title]="t('file-type-group-label')" [showEdit]="false" [canEdit]="false"
                                [subtitle]="t('file-type-group-tooltip')" [toggleOnViewClick]="false">
                <ng-template #view>
                  <div class="hstack gap-2">
                    @for (group of fileTypeGroups; track group) {
                      <div class="form-check form-switch">
                        <input class="form-check-input" [formControlName]="group" type="checkbox" [id]="group">
                        <label class="form-check-label" [for]="group">{{ group | fileTypeGroup }}</label>
                      </div>
                    }
                  </div>
                </ng-template>
              </app-setting-item>
            </div>

            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('remove-prefix-for-sortname-label')" [subtitle]="t('remove-prefix-for-sortname-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="remove-prefix-for-sortname" role="switch" formControlName="removePrefixForSortName" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>

            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('enable-metadata-label')" [subtitle]="t('enable-metadata-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="enable-metadata" role="switch" formControlName="enableMetadata" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>

            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('manage-collection-label')" [subtitle]="t('manage-collection-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="manage-collections" role="switch" formControlName="manageCollections" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>

            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('manage-reading-list-label')" [subtitle]="t('manage-reading-list-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="manage-readinglists" role="switch" formControlName="manageReadingLists" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>

            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('allow-scrobbling-label')" [subtitle]="t('allow-scrobbling-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="scrobbling" role="switch" formControlName="allowScrobbling" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>

            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('allow-metadata-matching-label')" [subtitle]="t('allow-metadata-matching-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="metadata-matching" role="switch" formControlName="allowMetadataMatching" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>

            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('folder-watching-label')" [subtitle]="t('folder-watching-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="lib-folder-watching" role="switch" formControlName="folderWatching" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>

            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('include-in-dashboard-label')" [subtitle]="t('include-in-dashboard-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="include-dashboard" role="switch" formControlName="includeInDashboard" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>


            <div class="row g-0 mt-4 mb-4">
              <app-setting-switch [title]="t('include-in-search-label')" [subtitle]="t('include-in-search-tooltip')">
                <ng-template #switch>
                  <div class="form-check form-switch float-end">
                    <input type="checkbox" id="include-search" role="switch" formControlName="includeInSearch" class="form-check-input">
                  </div>
                </ng-template>
              </app-setting-switch>
            </div>

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

            <div class="row g-0 mt-4 pb-4">
              <app-setting-item [title]="t('exclude-patterns-label')" [showEdit]="false" [canEdit]="false"
                                [subtitle]="excludePatternTooltip" [toggleOnViewClick]="false">
                <ng-template #view>
                  <app-edit-list [items]="excludePatterns" [label]="t('exclude-patterns-label')" (updateItems)="updateGlobs($event)"></app-edit-list>
                </ng-template>
              </app-setting-item>
            </div>

          </ng-template>
        </li>

        <!-- Only show tasks on edit flow -->
        @if (!isAddLibrary) {
          <li [ngbNavItem]="TabID.Tasks">
            <a ngbNavLink>{{t(TabID.Tasks)}}</a>
            <ng-template ngbNavContent>
              @for(task of tasks; track task.action) {
                <div class="mt-3 mb-3">
                  <app-setting-button [subtitle]="task.description">
                    <button class="btn btn-{{task.action === Action.Delete ? 'danger' : 'secondary'}} btn-sm mb-2" (click)="runTask(task)">{{task.title}}</button>
                  </app-setting-button>
                </div>
              }
            </ng-template>
          </li>

        }


      </ul>

      <div [ngbNavOutlet]="nav" class="tab-content {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'mt-3' : 'ms-4 flex-fill'}}"></div>
    </div>
  </form>
  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="forceScan()" [placement]="'above'"
            [ngbTooltip]="t('force-scan-tooltip')">{{t('force-scan')}}</button>
    <button type="button" class="btn btn-light" (click)="reset()">{{t('reset')}}</button>
    <button type="button" class="btn btn-secondary" (click)="close()">{{t('cancel')}}</button>

    @if (isAddLibrary && setupStep !== 3) {
      <button type="button" class="btn btn-primary" (click)="nextStep()" [disabled]="isNextDisabled() || libraryForm.invalid">{{t('next')}}</button>
    } @else {
      <button type="button" class="btn btn-primary" [disabled]="isDisabled()" (click)="save()">{{t('save')}}</button>
    }
  </div>

</ng-container>