<ng-container *transloco="let t; prefix: 'book.shelfAssigner'">
<div class="shelf-assigner">
  <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">
        @if (isMultiBooks) {
          {{ t('descriptionMulti', { count: bookIds.size }) }}
        } @else {
          {{ t('descriptionSingle', { title: book.metadata?.title }) }}
        }
      </p>
    </div>
    <p-button
      icon="pi pi-times"
      [text]="true"
      [rounded]="true"
      severity="secondary"
      (onClick)="closeDialog()"
      class="close-button">
    </p-button>
  </div>

  <div class="shelves-container">
    @if ((shelfState$ | async)?.shelves && (shelfState$ | async)!.shelves!.length > 0) {
      <div class="shelves-list">
        <div class="list-header">
          <span class="shelf-count">
            <i class="pi pi-bookmark"></i>
            {{ t('shelvesAvailable', { count: (shelfState$ | async)!.shelves!.length }) }}
          </span>
          <p-iconfield class="shelf-search">
            <p-inputicon class="pi pi-search"/>
            <input
              type="text"
              pInputText
              [(ngModel)]="searchQuery"
              [placeholder]="t('searchPlaceholder')"
            />
            @if (searchQuery) {
              <i class="pi pi-times clear-icon" (click)="searchQuery = ''"></i>
            }
          </p-iconfield>
        </div>

        <div class="shelves-grid">
          @for (shelf of filterShelves((shelfState$ | async)!.shelves!); track shelf.id) {
            <div class="shelf-item" [class.selected]="isShelfSelected(shelf)">
              <div class="shelf-checkbox">
                <p-checkbox
                  [inputId]="'shelf-' + shelf.id"
                  name="shelves"
                  [value]="shelf"
                  [(ngModel)]="selectedShelves"
                />
              </div>
              <label [for]="'shelf-' + shelf.id" class="shelf-label">
                @if (shelf.icon) {
                  <div class="shelf-icon-wrapper">
                    <app-icon-display
                      [icon]="getShelfIcon(shelf)"
                      size="20px"
                      iconClass="shelf-icon"
                    />
                  </div>
                } @else {
                    <div class="shelf-icon-wrapper-empty">
                  </div>
                }
                <span class="shelf-name">{{ shelf.name }}</span>
              </label>
            </div>
          }
        </div>
      </div>
    } @else {
      <div class="empty-state">
        <div class="empty-icon-wrapper">
          <i class="pi pi-bookmark empty-icon"></i>
        </div>
        <h3 class="empty-title">{{ t('emptyTitle') }}</h3>
        <p class="empty-description" [innerHTML]="t('emptyDescription')"></p>
      </div>
    }
  </div>

  <div class="dialog-footer">
    <p-button
      [label]="t('createShelf')"
      icon="pi pi-plus"
      [outlined]="true"
      severity="info"
      (onClick)="createShelfDialog()"
    />
    <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)="updateBooksShelves()"
      />
    </div>
  </div>
</div>
</ng-container>
