<ng-container *transloco="let t; prefix: 'settingsDevice'">
<p-toast position="top-right"></p-toast>

<div class="main-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-book"></i>
      {{ t('hardcover.title') }}
      <app-external-doc-link docType="hardcover"></app-external-doc-link>
    </h2>
    <p class="settings-description">
      {{ t('hardcover.description') }}
    </p>
  </div>

  @if (hasPermission) {
    <div class="settings-content">
      <div class="preferences-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="pi pi-sync"></i>
            {{ t('hardcover.syncConfig') }}
          </h3>
          <p class="section-description">
            {{ t('hardcover.syncConfigDesc') }}
          </p>
        </div>

        <div class="settings-card">
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-label-row">
                <label class="setting-label">
                  {{ t('hardcover.syncLabel') }}</label>
                <p-toggle-switch
                  id="hardcoverSyncEnabled"
                  name="hardcoverSyncEnabled"
                  [(ngModel)]="hardcoverSyncEnabled"
                  (ngModelChange)="onHardcoverSyncToggle()">
                </p-toggle-switch>
              </div>
              <p class="setting-description">
                {{ t('hardcover.syncDesc') }}
              </p>
            </div>
          </div>

          @if (hardcoverSyncEnabled) {
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('hardcover.apiKey') }}</label>
                  <div class="token-input-group">
                    <input
                      pInputText
                      id="hardcoverApiKey"
                      [(ngModel)]="hardcoverApiKey"
                      [type]="showHardcoverApiKey ? 'text' : 'password'"
                      name="hardcoverApiKey"
                      class="token-input"
                      [placeholder]="t('hardcover.apiKeyPlaceholder')"
                      (blur)="onHardcoverApiKeyChange()"
                    />
                    <p-button
                      icon="pi pi-copy"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="copyText(hardcoverApiKey, 'API Key')"
                      [disabled]="!hardcoverApiKey">
                    </p-button>
                    <p-button
                      [icon]="showHardcoverApiKey ? 'pi pi-eye-slash' : 'pi pi-eye'"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="toggleShowHardcoverApiKey()">
                    </p-button>
                  </div>
                </div>
                <p class="setting-description" [innerHTML]="t('hardcover.apiKeyDesc')">
                </p>
              </div>
            </div>
          }
        </div>
      </div>
    </div>
  } @else {
    <div class="settings-content">
      <div class="access-denied-card">
        <i class="pi pi-lock"></i>
        <div class="access-denied-content">
          <h3>{{ t('accessRestricted') }}</h3>
          <p>
            {{ t('hardcover.accessDenied') }}
            <br>
            {{ t('contactAdmin') }}
          </p>
        </div>
      </div>
    </div>
  }
</div>
</ng-container>
