<ng-container *transloco="let t; prefix: 'book.shelfEditDialog'">
<div class="shelf-form">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-pencil header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">{{ t('title') }}</h2>
      <p class="panel-description">
        {{ t('description') }}
      </p>
    </div>
    <p-button
      icon="pi pi-times"
      [text]="true"
      [rounded]="true"
      severity="secondary"
      (onClick)="closeDialog()"
      class="close-button">
    </p-button>
  </div>

  <div class="shelf-container">
    <div class="shelf-fields">
      <div class="shelf-row">
        <label class="label">{{ t('shelfNameLabel') }}</label>
        <input type="text" pInputText [(ngModel)]="shelfName" [placeholder]="t('shelfNamePlaceholder')" class="input"/>
      </div>

      <div class="shelf-row">
        <label class="label">{{ t('shelfIconLabel') }}</label>
        <div class="icon-section">
          @if (!selectedIcon) {
            <p-button [label]="t('selectIcon')" icon="pi pi-search" [outlined]="true" severity="info" (onClick)="openIconPicker()"></p-button>
          }

          @if (selectedIcon) {
            <div class="icon-container">
              <div class="icon-wrapper">
                <app-icon-display
                  [icon]="selectedIcon"
                  size="24px"
                  iconClass="icon"
                />
              </div>
              <p-button icon="pi pi-times" (onClick)="clearSelectedIcon()" [rounded]="true" [text]="true" severity="danger"></p-button>
            </div>
          }
        </div>
      </div>

      @if (isAdmin) {
        <div class="shelf-row">
          <label class="label">{{ t('visibilityLabel') }}</label>
          <div class="visibility-section" style="display: flex; align-items: center; gap: 0.5rem;">
            <p-checkbox [(ngModel)]="isPublic" [binary]="true" inputId="publicShelf"></p-checkbox>
            <label for="publicShelf" style="cursor: pointer; user-select: none;">{{ t('publicShelfLabel') }}</label>
          </div>
        </div>
      }
    </div>
  </div>

  <div class="dialog-footer">
    <div></div>
    <div class="footer-actions">
      <p-button
        [label]="t('cancelButton')"
        severity="secondary"
        [outlined]="true"
        (onClick)="closeDialog()"
      />
      <p-button
        [label]="t('saveChanges')"
        icon="pi pi-check"
        severity="success"
        (onClick)="save()"
      />
    </div>
  </div>
</div>
</ng-container>
