<div class="project-editor-save-bar">
  @if (draftRestored()) {
    <div class="project-editor-save-bar-notice">
      <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">
    <span>{{ (status() === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }}</span>
    @if (dirty()) {
      <span class="project-editor-save-bar-dirty">{{ 'builder.unsavedChanges' | translate }}</span>
    } @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>
  <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>
