<ng-container *transloco="let t; prefix: 'edit-person-modal'">
  @if (person !== undefined) {
    <div class="modal-container">
      <div class="modal-header">
        <h4 class="modal-title">
          {{t('title', {personName: this.person.name})}}</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'}}">
        <form [formGroup]="editForm">
          <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>
                <div class="row g-0">
                  <div class="mb-3">
                    @if (editForm.get('name'); as formControl) {
                      <app-setting-item [title]="t('name-label')" [toggleOnViewClick]="false" [showEdit]="false">
                        <ng-template #view>
                          <input id="name" class="form-control" formControlName="name" type="text"
                                 [class.is-invalid]="formControl.invalid && !formControl.untouched">
                          @if (formControl.errors; as errors) {
                            @if (errors.required) {
                              <div class="invalid-feedback">{{t('required-field')}}</div>
                            }
                          }
                        </ng-template>
                      </app-setting-item>
                    }
                  </div>
                </div>

                <div class="row g-0">
                  <div class="mb-3 col-md-6 col-xs-12 pe-2">
                    @if (editForm.get('malId'); as formControl) {
                      <app-setting-item [title]="t('mal-id-label')" [toggleOnViewClick]="false" [showEdit]="false" [subtitle]="t('mal-tooltip'+tooltip)">
                        <ng-template #view>
                          <input id="mal-id" class="form-control" formControlName="malId" type="number"
                                 [class.is-invalid]="formControl.invalid && !formControl.untouched">
                        </ng-template>
                      </app-setting-item>
                    }
                  </div>

                  <div class="mb-3 col-md-6 col-xs-12">
                    @if (editForm.get('aniListId'); as formControl) {
                      <app-setting-item [title]="t('anilist-id-label')" [toggleOnViewClick]="false" [showEdit]="false" [subtitle]="t('anilist-tooltip' + tooltip)">
                        <ng-template #view>
                          <input id="anilist-id" class="form-control" formControlName="aniListId" type="number"
                                 [class.is-invalid]="formControl.invalid && !formControl.untouched">
                        </ng-template>
                      </app-setting-item>
                    }
                  </div>
                </div>

                <div class="row g-0">
                  <div class="mb-3 col-md-6 col-xs-12 pe-2">
                    @if (editForm.get('hardcoverId'); as formControl) {
                      <app-setting-item [title]="t('hardcover-id-label')" [toggleOnViewClick]="false" [showEdit]="false" [subtitle]="t('hardcover-tooltip')">
                        <ng-template #view>
                          <input id="hardcover-id" class="form-control" formControlName="hardcoverId" type="text"
                                 [class.is-invalid]="formControl.invalid && !formControl.untouched">
                        </ng-template>
                      </app-setting-item>
                    }
                  </div>

                  <div class="mb-3 col-md-6 col-xs-12">
                    @if (editForm.get('asin'); as formControl) {
                      <app-setting-item [title]="t('asin-label')" [toggleOnViewClick]="false" [showEdit]="false" [subtitle]="t('asin-tooltip')">
                        <ng-template #view>
                          <input id="asin" class="form-control" formControlName="asin" type="text"
                                 [class.is-invalid]="formControl.invalid && !formControl.untouched">
                          @if (formControl.errors; as errors) {
                            <div class="invalid-feedback">
                              @if (errors.invalidAsin) {
                                <div>{{t('invalid-asin')}}</div>
                              }
                              @if (errors.amazonCode) {
                                <div>{{t('invalid-amazon-code')}}</div>
                              }
                            </div>
                          }

                        </ng-template>
                      </app-setting-item>
                    }
                  </div>
                </div>

                <div class="row g-0">
                  <div class="mb-3" style="width: 100%">
                    <app-setting-item [title]="t('description-label')" [toggleOnViewClick]="false" [showEdit]="false">
                      <ng-template #view>
                        <div class="input-group">
                          <textarea id="description" class="form-control" formControlName="description" rows="4"></textarea>
                        </div>
                      </ng-template>
                    </app-setting-item>
                  </div>
                </div>

              </ng-template>
            </li>

            <li [ngbNavItem]="Tabs.Aliases">
              <a ngbNavLink>{{Tabs.Aliases | tabTitle}}</a>
              <ng-template ngbNavContent>
                <h5>{{t('aliases-label')}}</h5>
                <div class="text-muted mb-2">{{t('aliases-tooltip')}}</div>
                <app-edit-list [items]="person.aliases"
                               [asyncValidators]="[aliasValidator()]"
                               (updateItems)="person.aliases = $event"
                               [errorMessage]="t('alias-overlap')"
                               [label]="t('aliases-label')"/>
              </ng-template>
            </li>


            <li [ngbNavItem]="Tabs.CoverImage">
              <a ngbNavLink>{{Tabs.CoverImage | tabTitle}}</a>
              <ng-template ngbNavContent>
                <p class="alert alert-primary" role="alert">
                  {{t('cover-image-description')}}
                  {{t('cover-image-description-extra')}}
                </p>

                <button class="btn btn-primary mb-2 w-100" (click)="downloadCover()" [disabled]="fetchDisabled">{{t('download-coversdb')}}</button>

                <app-cover-image-chooser [(imageUrls)]="imageUrls"
                                         (imageUrlsChange)="handleUploadByUrl($event)"
                                         (imageSelected)="updateSelectedIndex($event)"
                                         (selectedBase64Url)="updateSelectedImage($event)"
                                         [showReset]="person.coverImageLocked"
                                         (resetClicked)="handleReset()" />
              </ng-template>
            </li>
          </ul>
        </form>

        <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" [disabled]="!editForm.valid" (click)="save()">{{t('save')}}</button>
      </div>
    </div>
  }
</ng-container>
