<div class="book-metadata-center-container" *transloco="let t; prefix: 'metadata.center'">
  @if (config) {
    <div class="panel-header">
      <div class="header-icon-wrapper">
        <i class="pi pi-book 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"
        [rounded]="true"
        [text]="true"
        severity="secondary"
        (click)="ref?.close()"
        class="close-button">
      </p-button>
    </div>
  }
  <div class="tabs-wrapper" [class.dialog-mode]="config">
    <p-tabs [(value)]="tab" lazy="true" scrollable>
    <p-tablist>
      <p-tab value="view">
        <i [class]="'pi pi-book'"></i>
        {{ t('tabView') }}
      </p-tab>
      @if (admin || canEditMetadata) {
        <p-tab value="edit">
          <i [class]="'pi pi-pencil'"></i>
          {{ t('tabEdit') }}
        </p-tab>
      }
      @if (admin || canEditMetadata) {
        <p-tab value="match">
          <i [class]="'pi pi-search'"></i>
          {{ t('tabSearch') }}
        </p-tab>
      }
      @if ((admin || canEditMetadata) && !isPhysical && isLocalStorage) {
        <p-tab value="sidecar">
          <i [class]="'pi pi-file'"></i>
          {{ t('tabSidecar') }}
        </p-tab>
      }
    </p-tablist>
    <p-tabpanels class="tabpanels-responsive">
      <p-tabpanel value="view">
        <app-metadata-viewer
          [book$]="book$"
          [recommendedBooks]="recommendedBooks">
        </app-metadata-viewer>
      </p-tabpanel>
      @if (admin || canEditMetadata) {
        <p-tabpanel value="edit">
          <app-metadata-editor
            [book$]="book$">
          </app-metadata-editor>
        </p-tabpanel>
      }
      @if (admin || canEditMetadata) {
        <p-tabpanel value="match">
          <app-metadata-searcher [book$]="book$" [isActiveTab]="tab === 'match'"></app-metadata-searcher>
        </p-tabpanel>
      }
      @if ((admin || canEditMetadata) && !isPhysical && isLocalStorage) {
        <p-tabpanel value="sidecar">
          <app-sidecar-viewer [book$]="book$"></app-sidecar-viewer>
        </p-tabpanel>
      }
    </p-tabpanels>
  </p-tabs>
  </div>
</div>
