<ng-container *transloco="let t; prefix: 'book.shelfCreator'">
<div class="shelf-creator">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-bookmark 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"
      (click)="cancel()"
      severity="secondary"
      [text]="true"
      [rounded]="true"
      class="close-button"
      [pTooltip]="t('closeTooltip')"
      tooltipPosition="left"/>
  </div>

  <div class="form-container">
    <div class="form-group highlight-group">
      <label for="shelfName" class="form-label">
        <i class="pi pi-tag label-icon"></i>
        {{ t('shelfNameLabel') }}
        <span class="required-indicator">*</span>
      </label>
      <div class="input-wrapper">
        <input
          id="shelfName"
          type="text"
          pInputText
          [(ngModel)]="shelfName"
          class="input-full"
          [placeholder]="t('shelfNamePlaceholder')"
          [class.filled]="shelfName.trim()"

        />
        @if (shelfName.trim()) {
          <i class="pi pi-check-circle input-icon success"></i>
        }
      </div>
    </div>

    <div class="gradient-divider"></div>

    <div class="form-group highlight-group">
      <label class="form-label">
        <i class="pi pi-palette label-icon"></i>
        {{ t('shelfIconLabel') }}
      </label>
      @if (!selectedIcon) {
        <button class="icon-select-btn" (click)="openIconPicker()" type="button">
          <i class="pi pi-plus"></i>
          <div class="btn-content">
            <span class="btn-title">{{ t('chooseIcon') }}</span>
            <span class="btn-subtitle">{{ t('chooseIconSubtitle') }}</span>
          </div>
        </button>
      } @else {
        <div class="selected-icon-display">
          <div class="icon-preview">
            <app-icon-display
              [icon]="selectedIcon"
              size="24px"
            />
          </div>
          <div class="icon-info">
            <span class="icon-label">{{ t('selectedIcon') }}</span>
            <span class="icon-name">
              @if (selectedIcon.type === 'PRIME_NG') {
                {{ selectedIcon.value }}
              } @else {
                {{ selectedIcon.value }}
              }
            </span>
          </div>
          <p-button
            icon="pi pi-times"
            severity="danger"
            [outlined]="true"
            [rounded]="true"
            size="small"
            (onClick)="clearSelectedIcon()"
            [pTooltip]="t('removeIconTooltip')"
            tooltipPosition="left"
          />
        </div>
      }
    </div>

    @if (isAdmin) {
      <div class="gradient-divider"></div>

      <div class="form-group highlight-group">
        <label class="form-label">
          <i class="pi pi-globe label-icon"></i>
          {{ t('visibilityLabel') }}
        </label>
        <div class="input-wrapper" 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">{{ t('makePublicLabel') }}</label>
        </div>
      </div>
    }
  </div>

  <div class="dialog-footer">
    <div class="validation-status">
      @if (!shelfName.trim()) {
        <div class="validation-message error">
          <i class="pi pi-exclamation-circle"></i>
          <span>{{ t('validationRequired') }}</span>
        </div>
      } @else {
        <div class="validation-message success">
          <i class="pi pi-check-circle"></i>
          <span>{{ t('validationReady') }}</span>
        </div>
      }
    </div>
    <div class="footer-actions">
      <p-button
        [label]="t('cancelButton')"
        severity="secondary"
        [outlined]="true"
        (onClick)="cancel()"
      />
      <p-button
        [label]="t('createButton')"
        icon="pi pi-plus"
        severity="success"
        (onClick)="createShelf()"
        [disabled]="!shelfName.trim()"
      />
    </div>
  </div>
</div>
</ng-container>
