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">
      <ng-container *ngIf="!isAddLibrary; else addLibraryTitle">
        {{t('edit-title', {name: library.name | sentenceCase})}}
      </ng-container>
      <ng-template #addLibraryTitle>
        {{t('add-title')}}
      </ng-template>
    </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>
              <input id="library-name" class="form-control" formControlName="name" type="text" [class.is-invalid]="libraryForm.get('name')?.invalid && libraryForm.get('name')?.touched">
              <div id="inviteForm-validations" class="invalid-feedback" *ngIf="libraryForm.dirty || libraryForm.touched">
                <div *ngIf="libraryForm.get('name')?.errors?.required">
                  {{t('required-field')}}
                </div>
                <div *ngIf="libraryForm.get('name')?.errors?.duplicateName">
                  {{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="right" [ngbTooltip]="typeTooltip" role="button" tabindex="0"></i>
              <ng-template #typeTooltip>{{t('type-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">
                <option [value]="i" *ngFor="let opt of libraryTypes; let i = index">{{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" style="width: 100%">
              <li class="list-group-item" *ngFor="let folder of selectedFolders; let i = index">
                {{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="https://wiki.kavitareader.com/en/guides/managing-your-files" rel="noopener noreferrer" target="_blank" referrerpolicy="no-refer">{{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="https://wiki.kavitareader.com/en/guides/managing-your-files/scanner#introduction" rel="noopener noreferrer" target="_blank" referrerpolicy="no-refer">{{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>
            <p *ngIf="isAddLibrary" 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 !== undefined "
                                     (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">
                  <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()" position="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>

    <ng-container *ngIf="isAddLibrary && setupStep !== 3; else editLibraryButton">
      <button type="button" class="btn btn-primary" (click)="nextStep()" [disabled]="isNextDisabled() || libraryForm.invalid">{{t('next')}}</button>
    </ng-container>
    <ng-template #editLibraryButton>
      <button type="button" class="btn btn-primary" [disabled]="isDisabled()" (click)="save()">{{t('save')}}</button>
    </ng-template>
  </div>

</ng-container>