<div class="multi-book-editor-container">
  <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">Edit Metadata</h2>
      <p class="panel-description">{{ filteredBooks.length }} book{{ filteredBooks.length !== 1 ? 's' : '' }} selected</p>
    </div>
    <p-button
      icon="pi pi-times"
      [rounded]="true"
      [text]="true"
      severity="secondary"
      (click)="ref.close()"
      class="close-button">
    </p-button>
  </div>

  <div class="dialog-content">
    <p-tabs [value]="'edit'" lazy="true">
      <p-tablist>
        @if (admin || canEditMetadata) {
          <p-tab value="edit">Edit Metadata</p-tab>
        }
        @if (admin || canEditMetadata) {
          <p-tab value="match">Search Metadata</p-tab>
        }
      </p-tablist>
      <p-tabpanels>
        @if (admin || canEditMetadata) {
          <p-tabpanel value="edit">
            <app-metadata-editor
              [book$]="book$"
              [disableNext]="disableNext"
              [disablePrevious]="disablePrevious"
              (nextBookClicked)="handleNextBook()"
              (previousBookClicked)="handlePreviousBook()"
              (closeDialogButtonClicked)="handleCloseDialogButton()"
              [showNavigationButtons]="true"
            ></app-metadata-editor>
          </p-tabpanel>
        }
        @if (admin || canEditMetadata) {
          <p-tabpanel value="match">
            <app-metadata-searcher [book$]="book$"></app-metadata-searcher>
          </p-tabpanel>
        }
      </p-tabpanels>
    </p-tabs>
  </div>
</div>
