<ng-container *transloco="let t; prefix: 'book.lockUnlockDialog'">
<div class="lock-unlock-container">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-lock header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">{{ t('title') }}</h2>
      <p class="panel-description">{{ t('selectedCount', { count: bookIds.size }) }}</p>
    </div>
    <p-button
      icon="pi pi-times"
      [rounded]="true"
      [text]="true"
      severity="secondary"
      (click)="dialogRef.close()"
      class="close-button">
    </p-button>
  </div>

  <div class="dialog-content">
    <div class="fields-grid">
      @for (field of lockableFields; track field) {
        <div class="field-row">
          <label class="field-label">{{ fieldLabels[field] || field }}</label>
          <p-button
            [outlined]="true"
            [label]="getLockLabel(field)"
            [icon]="getLockIcon(field)"
            [severity]="fieldLocks[field] === true ? 'danger' : fieldLocks[field] === false ? 'success' : 'secondary'"
            (click)="cycleLockState(field)"
          ></p-button>
        </div>
      }
    </div>
  </div>

  <div class="dialog-footer">
    <div class="footer-actions">
      <p-button icon="pi pi-refresh" [label]="t('reset')" outlined="true" severity="warn" (onClick)="resetFieldLocks()"></p-button>
    </div>
    <div class="footer-actions">
      <p-button icon="pi pi-lock" [label]="t('lockAll')" outlined="true" severity="danger" (onClick)="toggleLockAll('LOCK')"></p-button>
      <p-button icon="pi pi-lock-open" [label]="t('unlockAll')" outlined="true" severity="success" (onClick)="toggleLockAll('UNLOCK')"></p-button>
      <p-divider layout="vertical"></p-divider>
      <p-button [label]="isSaving ? t('saving') : t('save')" [outlined]="true" icon="pi pi-check" severity="info" (onClick)="applyFieldLocks()" [disabled]="bookIds.size === 0 || isSaving"></p-button>
    </div>
  </div>
</div>
</ng-container>
