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.touched">
                @if (libraryForm.dirty || libraryForm.touched) {
                  <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; let i = $index) {
                  <option [value]="i">{{opt}}</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-secondary" 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">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div class="mb-3 mt-1">
                  <h6>{{t('file-type-group-label')}}</h6>
                  <p class="accent">
                    {{t('file-type-group-tooltip')}}
                  </p>
                  <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>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div ngbAccordion>
                  <div ngbAccordionItem>
                    <h2 ngbAccordionHeader>
                      <button ngbAccordionButton>{{t('exclude-patterns-label')}}</button>
                    </h2>
                    <div ngbAccordionCollapse>
                      <div ngbAccordionBody>
                        <ng-template>
                          <span >{{t('exclude-patterns-tooltip')}}<a class="ms-1" [href]="WikiLink.ScannerExclude" rel="noopener noreferrer" target="_blank">{{t('help')}}<i class="fa fa-external-link-alt ms-1" aria-hidden="true"></i></a></span>
                          <div class="mt-2">
                            <app-edit-list [items]="excludePatterns" [label]="t('exclude-patterns-label')" (updateItems)="updateGlobs($event)"></app-edit-list>
                          </div>
                        </ng-template>
                      </div>
                    </div>
                  </div>
                </div>

              </div>

            </div>



            <div class="row">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div class="mb-3 mt-1">
                  <div class="form-check form-switch">
                    <input type="checkbox" id="manage-collections" role="switch" formControlName="manageCollections" class="form-check-input">
                    <label class="form-check-label" for="manage-collections">{{t('manage-collection-label')}}</label>
                  </div>
                </div>
                <p class="accent">
                  {{t('manage-collection-tooltip')}}
                </p>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div class="mb-3 mt-1">
                  <div class="form-check form-switch">
                    <input type="checkbox" id="manage-readinglists" role="switch" formControlName="manageReadingLists" class="form-check-input">
                    <label class="form-check-label" for="manage-readinglists">{{t('manage-reading-list-label')}}</label>
                  </div>
                </div>
                <p class="accent">
                  {{t('manage-reading-list-tooltip')}}
                </p>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div class="mb-3 mt-1">
                  <div class="form-check form-switch">
                    <input type="checkbox" id="scrobbling" role="switch" formControlName="allowScrobbling" class="form-check-input">
                    <label class="form-check-label" for="scrobbling">{{t('allow-scrobbling-label')}}</label>
                  </div>
                </div>
                <p class="accent">
                  {{t('allow-scrobbling-tooltip')}}
                </p>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div class="mb-3 mt-1">
                  <div class="form-check form-switch">
                    <input type="checkbox" id="lib-folder-watching" role="switch" formControlName="folderWatching" class="form-check-input" aria-labelledby="auto-close-label">
                    <label class="form-check-label" for="lib-folder-watching">{{t('folder-watching-label')}}</label>
                  </div>
                </div>
                <p class="accent">
                  {{t('folder-watching-tooltip')}}
                </p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div class="mb-3 mt-1">
                  <div class="form-check form-switch">
                    <input type="checkbox" id="include-dashboard" role="switch" formControlName="includeInDashboard" class="form-check-input" aria-labelledby="auto-close-label">
                    <label class="form-check-label" for="include-dashboard">{{t('include-in-dashboard-label')}}</label>
                  </div>
                </div>
                <p class="accent">
                  {{t('include-in-dashboard-tooltip')}}
                </p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div class="mb-3 mt-1">
                  <div class="form-check form-switch">
                    <input type="checkbox" id="include-recommended" role="switch" formControlName="includeInRecommended" class="form-check-input" aria-labelledby="auto-close-label">
                    <label class="form-check-label" for="include-recommended">{{t('include-in-recommendation-label')}}</label>
                  </div>
                </div>
                <p class="accent">
                  {{t('include-in-recommendation-tooltip')}}
                </p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 col-sm-12 pe-2 mb-2">
                <div class="mb-3 mt-1">
                  <div class="form-check form-switch">
                    <input type="checkbox" id="include-search" role="switch" formControlName="includeInSearch" class="form-check-input" aria-labelledby="auto-close-label">
                    <label class="form-check-label" for="include-search">{{t('include-in-search-label')}}</label>
                  </div>
                </div>
                <p class="accent">
                  {{t('include-in-search-tooltip')}}
                </p>
              </div>
            </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>