<ng-container *transloco="let t; prefix:'manage-auth-keys'">
  @if (isOpdsEnabledResource.hasValue()) {
    @let opdsEnabled = isOpdsEnabledResource.value();
    @if (!opdsEnabled) {
      <div class="alert alert-warning" role="alert">{{t('clients-opds-alert')}}</div>
    }
  }

  <p>{{t('clients-opds-description')}}</p>

  <div class="mt-4 d-flex flex-column flex-md-row align-items-md-center gap-3">
    <div class="flex-grow-1">
      @if (opdsUrlRsc.error()) {
        <div class="alert alert-danger mb-0" role="alert">
          {{t('clients-opds-error', {key: opdsAuthKeyModel()})}}
        </div>
      } @else {
        <app-api-key
          [title]="t('clients-opds-url-label')" [tooltipText]="t('clients-opds-url-tooltip') + ' ' + opdsUrlLink"
          [hideData]="true" [key]="opdsUrlRsc.value() || ''" />
      }
    </div>

    <div class="flex-shrink-0">
      <label class="form-label d-none d-md-block">&nbsp;</label>
      <select class="form-select" [formField]="opdsAuthKeyForm">
        @for (authKey of authKeys(); track authKey.id) {
          <option [value]="authKey.name">{{authKey.name}}</option>
        }
      </select>
    </div>
  </div>

  <h4 class="mt-4">
    {{t('auth-keys-title')}}
    @if (!isReadOnly()) {
      <button class="btn btn-outline-primary float-end" (click)="createAuthKey()">
        <i class="fa-solid fa-plus" aria-hidden="true"></i>
        <span class="ms-1">{{t('add-auth-key')}}</span>
      </button>
    }
  </h4>
  <p>{{t('description')}}</p>

  @let authKeysValue = authKeys();

  @if (authKeysValue) {
    <app-responsive-table [rows]="authKeysValue" [trackByFn]="trackByAuthKey ">
      <ng-template #tableTemplate>
        <ngx-datatable
          class="bootstrap"
          [rows]="authKeysValue"
          [columnMode]="'flex'"
          rowHeight="auto"
          [footerHeight]="50"
          [limit]="15"
        >
          <ngx-datatable-column prop="name" [sortable]="true" [draggable]="false" [flexGrow]="2">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('name-label')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              @if (item.provider === AuthKeyProvider.System) {
                {{ t(item.name) }}
              } @else {
                {{ item.name }}
              }
            </ng-template>
          </ngx-datatable-column>


          <ngx-datatable-column prop="key" [sortable]="true" [draggable]="false" [flexGrow]="3">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('key-label')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              <span [appToggleVisibility]="item.key"></span>
              <button class="btn btn-icon ms-1" (click)="copy(item.key)">
                <i class="fa-solid fa-copy" aria-hidden="true"></i>
              </button>
            </ng-template>
          </ngx-datatable-column>

          <ngx-datatable-column prop="expiresAtUtc" [sortable]="false" [draggable]="false" [flexGrow]="1">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('expires-label')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              {{ item.expiresAtUtc | utcToLocalDate | date:'mediumDate' | defaultDate }}
            </ng-template>
          </ngx-datatable-column>

          <ngx-datatable-column prop="lastAccessedAtUtc" [sortable]="false" [draggable]="false" [flexGrow]="1">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('last-accessed-label')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              {{ item.lastAccessedAtUtc | utcToLocalDate | date:'mediumDate' | defaultDate }}
            </ng-template>
          </ngx-datatable-column>

          <ngx-datatable-column name="actions" [sortable]="false" [draggable]="false" [flexGrow]="2">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('actions-label')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              <button class="btn btn-primary me-2" (click)="rotate(item)" [disabled]="isReadOnly()">
                <i class="fa-solid fa-rotate" aria-hidden="true"></i>
                <span class="visually-hidden">{{t('rotate')}}</span>
              </button>
              <button class="btn btn-danger" [disabled]="item.provider === AuthKeyProvider.System || isReadOnly()" (click)="delete(item)">
                <i class="fa fa-trash" aria-hidden="true"></i>
                <span class="visually-hidden">{{t('delete')}}</span>
              </button>
            </ng-template>
          </ngx-datatable-column>
        </ngx-datatable>
      </ng-template>

      <ng-template #cardTemplate let-item let-idx="index">
        <div class="card mb-3">
          <div class="card-body">
            <h5 class="card-title mb-3">
              @if (item.provider === AuthKeyProvider.System) {
                {{ t(item.name) }}
              } @else {
                {{ item.name }}
              }
            </h5>

            <div class="mb-3">
              <label class="form-label fw-bold">{{t('key-label')}}</label>
              <div class="d-flex align-items-center">
                <span [appToggleVisibility]="item.key" class="flex-grow-1 text-truncate"></span>
                <button class="btn btn-icon ms-2" (click)="copy(item.key)" [attr.aria-label]="t('copy-key')">
                  <i class="fa-solid fa-copy" aria-hidden="true"></i>
                </button>
              </div>
            </div>

            <div class="row mb-3">
              <div class="col-6">
                <label class="form-label fw-bold d-block">{{t('expires-label')}}</label>
                <span>{{ item.expiresAtUtc | utcToLocalDate | date:'mediumDate' | defaultDate }}</span>
              </div>
              <div class="col-6">
                <label class="form-label fw-bold d-block">{{t('last-accessed-label')}}</label>
                <span>{{ item.lastAccessedAtUtc | utcToLocalDate | date:'mediumDate' | defaultDate }}</span>
              </div>
            </div>

            <!-- Actions -->
            <div class="d-flex gap-2 float-end">
              <button class="btn btn-primary" (click)="rotate(item)" [disabled]="isReadOnly()">
                <i class="fa-solid fa-rotate" aria-hidden="true"></i>
                <span class="ms-2">{{t('rotate')}}</span>
              </button>
              <button class="btn btn-danger"
                      [disabled]="item.provider === AuthKeyProvider.System || isReadOnly()"
                      (click)="delete(item)">
                <i class="fa fa-trash" aria-hidden="true"></i>
                <span class="ms-2">{{t('delete')}}</span>
              </button>
            </div>
          </div>
        </div>
      </ng-template>
    </app-responsive-table>
  }


</ng-container>
