<div class="project-editor-save-bar">
  @if (draftRestored()) {
    <div class="project-editor-save-bar-notice" role="status">
      <span>{{ 'builder.draftRestored' | translate }}</span>
      <app-button variant="ghost" size="sm" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</app-button>
    </div>
  }
  <div class="project-editor-save-bar-status" role="status" aria-live="polite">
    <span>{{ (status() === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }}</span>
    @if (dirty()) {
      <button type="button" class="project-editor-save-bar-dirty project-editor-save-bar-dirty--toggle" [attr.aria-expanded]="changesOpen()" (click)="toggleChanges()">
        {{ 'builder.unsavedChanges' | translate }} ({{ changeSummary().length }})
      </button>
    } @else if (lastSavedAt()) {
      <span class="project-editor-save-bar-saved-at">{{ 'builder.lastSaved' | translate }}: {{ formatSavedAt(lastSavedAt()!) }}</span>
    }
    @if (issues().length > 0) {
      <ul class="project-editor-save-bar-issues">
        @for (issue of issues(); track issue.code) {
          <li [class.is-warning]="issue.severity === 'warning'" [class.is-error]="issue.severity === 'error'">{{ issue.message | translate }}</li>
        }
      </ul>
    }
  </div>
  @if (changesOpen() && changeSummary().length > 0) {
    <ul class="project-editor-save-bar-changes" [attr.aria-label]="'builder.unsavedChangesPanelTitle' | translate">
      @for (row of changeSummary(); track row.fieldKey) {
        <li>
          <a [routerLink]="row.section ? (['/edit', row.section] | langRoute) : null" (click)="toggleChanges()">
            <span class="project-editor-save-bar-changes__field">{{ row.labelKey | translate }}</span>
            <span class="project-editor-save-bar-changes__diff">{{ row.before || '—' }} &rarr; {{ row.after || '—' }}</span>
          </a>
        </li>
      }
    </ul>
  }
  <div class="project-editor-save-bar-actions">
    <app-button variant="ghost" size="sm" [disabled]="!canUndo()" (click)="undo()">{{ 'builder.undo' | translate }}</app-button>
    <app-button variant="ghost" size="sm" [disabled]="!canRedo()" (click)="redo()">{{ 'builder.redo' | translate }}</app-button>
    <app-button variant="danger" size="sm" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</app-button>
    <app-button variant="secondary" size="sm" (click)="save()">{{ 'builder.save' | translate }}</app-button>
    <app-button variant="primary" size="sm" [disabled]="hasBlockingIssues()" (click)="publish()">{{ 'builder.publish' | translate }}</app-button>
  </div>
</div>

<app-confirm-dialog
  [open]="publishConfirmOpen()"
  [titleText]="'builder.confirmPublish' | translate"
  [message]="'builder.confirmPublish' | translate"
  (confirmed)="confirmPublish()"
  (cancelled)="publishConfirmOpen.set(false)"
/>

<app-confirm-dialog
  [open]="resetDraftConfirmOpen()"
  [titleText]="'builder.confirmResetDraft' | translate"
  [message]="'builder.confirmResetDraft' | translate"
  [destructive]="true"
  (confirmed)="confirmResetDraft()"
  (cancelled)="resetDraftConfirmOpen.set(false)"
/>
