<div class="metadata-review-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">Review Metadata Proposal</h2>
      <p class="panel-description">Review and accept fetched metadata</p>
    </div>
    <p-button
      icon="pi pi-times"
      [rounded]="true"
      [text]="true"
      severity="secondary"
      (click)="close()"
      class="close-button">
    </p-button>
  </div>

  @if (!loading) {
    <div class="dialog-content">
      @if (currentProposal?.metadataJson; as proposed) {
        <app-metadata-picker
          [fetchedMetadata]="proposed"
          [book$]="book$"
          (goBack)="close()"
          [reviewMode]="true">
        </app-metadata-picker>
      }
    </div>

    <div class="dialog-footer">
      <div class="footer-info">
        <div class="progress-group" pTooltip="{{ currentIndex + 1 }} of {{ proposals.length }} processed ({{ ((currentIndex + 1) / proposals.length * 100) | number: '1.0-0' }}%)" tooltipPosition="top">
          <p-progressBar
            [value]="((currentIndex + 1) / proposals.length) * 100"
            class="progress-bar"
            showValue="false">
          </p-progressBar>
          <span class="progress-text">
            Book {{ currentIndex + 1 }} / {{ proposals.length }}
          </span>
        </div>
      </div>

      <div class="footer-actions">
        <p-button
          label="Close"
          icon="pi pi-times-circle"
          severity="secondary"
          [outlined]="true"
          (click)="close()">
        </p-button>

        <p-divider layout="vertical"/>

        <p-button
          label="Lock All"
          icon="pi pi-lock"
          severity="warn"
          [outlined]="true"
          (click)="lockAllMetadata()">
        </p-button>

        <p-button
          label="Unlock All"
          icon="pi pi-lock-open"
          severity="success"
          [outlined]="true"
          (click)="unlockAllMetadata()">
        </p-button>

        <p-divider layout="vertical"/>

        <p-button
          label="Accept & Save"
          icon="pi pi-check-circle"
          iconPos="right"
          severity="success"
          [outlined]="true"
          (click)="onSave(currentProposal!)">
        </p-button>

        <p-divider layout="vertical"/>

        <p-button
          [label]="isLast ? 'Finish & Close' : 'Next'"
          [icon]="isLast ? 'pi pi-check-circle' : 'pi pi-angle-right'"
          iconPos="right"
          severity="info"
          [outlined]="true"
          (click)="onNext()">
        </p-button>
      </div>
    </div>
  } @else {
    <div class="dialog-content loading-state">
      <p-progressSpinner class="spinner" strokeWidth="4"></p-progressSpinner>
    </div>
  }
</div>
