<ng-container *transloco="let t; prefix: 'edit-reading-list-modal'">

  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{ t('title', {name: readingList.title}) }}</h4>
    <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>
  </div>
  <div class="modal-body scrollable-modal {{breakpointService.isMobile() ? '' : 'd-flex'}}">
    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills"
        orientation="{{breakpointService.isMobile() ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
      <li [ngbNavItem]="Tabs.General">
        <a ngbNavLink>{{ Tabs.General | tabTitle }}</a>
        <ng-template ngbNavContent>
          <form [formGroup]="reviewGroup">
            <div class="row g-0 mb-3">
              <div class="col-md-8 col-sm-12 mt-2">
                <label for="library-name" class="form-label">{{t('name-label')}}</label>
                <input id="library-name" class="form-control" formControlName="title" type="text"
                       [class.is-invalid]="reviewGroup.get('title')?.invalid && reviewGroup.get('title')?.touched">
                @if (reviewGroup.dirty || reviewGroup.touched) {
                  <div id="inviteForm-validations" class="invalid-feedback">
                    @if (reviewGroup.get('title')?.errors?.required) {
                      <div>
                        {{ t('required-field') }}
                      </div>
                    }
                    @if (reviewGroup.get('title')?.errors?.duplicateName) {
                      <div>
                        {{ t('name-unique-validation') }}
                      </div>
                    }
                  </div>
                }
              </div>
              @if (accountService.hasAdminRole()) {
                <div class="col-md-3 col-sm-12 ms-2">
                  <div class="form-check form-switch">
                    <input type="checkbox" id="tag-promoted" role="switch" formControlName="promoted"
                           class="form-check-input" switch
                           aria-labelledby="auto-close-label" aria-describedby="tag-promoted-help">
                    <label class="form-check-label me-1" for="tag-promoted">{{ t('promote-label') }}</label>
                    <i class="fa fa-info-circle" aria-hidden="true" placement="left" [ngbTooltip]="promotedTooltip"
                       role="button" tabindex="0"></i>
                    <ng-template #promotedTooltip>{{ t('promote-tooltip') }}</ng-template>
                    <span class="visually-hidden" id="tag-promoted-help"><ng-container
                      [ngTemplateOutlet]="promotedTooltip"/></span>
                  </div>
                </div>
              }
            </div>

            <div class="row g-0 mb-3">
              <div class="col-md-6 col-sm-12">
                <h6 id="starting-year-header">{{ t('starting-title') }}</h6>
                @if (reviewGroup.get('startingMonth'); as formControl) {
                  <div class="col-md-6 col-sm-12" style="width: 90%">
                    <label for="start-month" class="form-label">{{ t('month-label') }}</label>
                    <input id="start-month" class="form-control" formControlName="startingMonth"
                           type="number" inputmode="numeric"
                           [class.is-invalid]="formControl?.invalid && formControl?.touched"
                           aria-describedby="starting-year-header">
                    @if (reviewGroup.dirty || reviewGroup.touched) {
                      <div class="invalid-feedback">
                        @if (formControl.errors?.min || formControl.errors?.max) {
                          <div>
                            {{ t('month-validation') }}
                          </div>
                        }
                      </div>
                    }
                  </div>
                }
                @if (reviewGroup.get('startingYear'); as formControl) {
                  <div class="col-md-6 col-sm-12" style="width: 90%">
                    <label for="start-year" class="form-label">{{ t('year-label') }}</label>
                    <input id="start-year" class="form-control" formControlName="startingYear" type="number"
                           inputmode="numeric"
                           [class.is-invalid]="formControl.invalid && formControl.touched"
                           aria-describedby="starting-year-header">
                    @if (reviewGroup.dirty || reviewGroup.touched) {
                      <div class="invalid-feedback">
                        @if (formControl.errors?.min || formControl.errors?.max) {
                          <div>
                            {{ t('year-validation') }}
                          </div>
                        }
                      </div>
                    }
                  </div>
                }
              </div>

              <div class="col-md-6 col-sm-12">
                <h6 id="ending-year-heading">{{ t('ending-title') }}</h6>
                @if (reviewGroup.get('endingMonth'); as formControl) {
                  <div class="col-md-6 col-sm-12" style="width: 90%">
                    <label for="ending-month" class="form-label">{{ t('month-label') }}</label>
                    <input id="ending-month" class="form-control" formControlName="endingMonth" type="number"
                           inputmode="numeric"
                           [class.is-invalid]="formControl?.invalid && formControl?.touched"
                           aria-describedby="ending-year-header">
                    @if (reviewGroup.dirty || reviewGroup.touched) {
                      <div class="invalid-feedback">
                        @if (formControl.errors?.min || formControl.errors?.max) {
                          <div>
                            {{ t('month-validation') }}
                          </div>
                        }
                      </div>
                    }
                  </div>
                }
                @if (reviewGroup.get('endingYear'); as formControl) {
                  <div class="col-md-6 col-sm-12" style="width: 90%">
                    <label for="ending-year" class="form-label">{{ t('year-label') }}</label>
                    <input id="ending-year" class="form-control" formControlName="endingYear" type="number"
                           inputmode="numeric"
                           [class.is-invalid]="formControl?.invalid && formControl?.touched"
                           aria-describedby="ending-year-header">
                    @if (reviewGroup.dirty || reviewGroup.touched) {
                      <div class="invalid-feedback">
                        @if (formControl.errors?.min || formControl.errors?.max) {
                          <div>
                            {{ t('year-validation') }}
                          </div>
                        }
                      </div>
                    }
                  </div>
                }
              </div>
            </div>

            <div class="row g-0 mb-3">
              <label for="summary" class="form-label">{{ t('summary-label') }}</label>
              <textarea id="summary" class="form-control" formControlName="summary" rows="3"></textarea>
            </div>
          </form>
        </ng-template>
      </li>

      <!--Tags-->
      <li [ngbNavItem]="Tabs.Tags">
        <a ngbNavLink>{{ Tabs.Tags | tabTitle }}</a>
        <ng-template ngbNavContent>
          <div class="row">
            <div class="col-lg-6 col-md-12 pe-2">
              <div class="mb-3">
                @if (tagsSettings) {
                  <app-setting-item [title]="t('tags-label')" [toggleOnViewClick]="false" [showEdit]="false">
                    <ng-template #view>
                      <app-typeahead (selectedData)="updateTags($event)" [settings]="tagsSettings">
                        <ng-template #badgeItem let-item let-position="idx">
                          {{item.title}}
                        </ng-template>
                        <ng-template #optionItem let-item let-position="idx">
                          {{item.title}}
                        </ng-template>
                      </app-typeahead>
                    </ng-template>
                  </app-setting-item>
                }
              </div>
            </div>
          </div>
        </ng-template>
      </li>

      <li [ngbNavItem]="Tabs.CoverImage">
        <a ngbNavLink>{{ Tabs.CoverImage | tabTitle }}</a>
        <ng-template ngbNavContent>
          <app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateSelectedIndex($event)"
                                   (selectedBase64Url)="updateSelectedImage($event)"
                                   [showReset]="readingList.coverImageLocked" (resetClicked)="handleReset()"/>
        </ng-template>
      </li>
    </ul>
    <div [ngbNavOutlet]="nav" class="tab-content {{breakpointService.isMobile() ? 'mt-3' : 'ms-4 flex-fill'}}"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="close()">{{ t('close') }}</button>
    <button type="submit" class="btn btn-primary" (click)="save()">{{ t('save') }}</button>
  </div>
</ng-container>
