<app-card padding="md" [interactive]="true" class="page-card-tile">
  <button type="button" class="page-card-tile__surface" (click)="open.emit()" [attr.aria-label]="page().title || page().slug">
    <div class="page-card-tile__icon" aria-hidden="true">{{ page().icon || '📄' }}</div>
    <div class="page-card-tile__body">
      <div class="page-card-tile__title-row">
        <h3 class="page-card-tile__title">{{ page().title || page().slug }}</h3>
        @if (legalLabelKey(); as legalKey) {
          <app-badge variant="primary">{{ legalKey | translate }}</app-badge>
        }
      </div>
      <p class="page-card-tile__slug">/{{ page().route || page().slug }}</p>
      <div class="page-card-tile__meta">
        <app-badge [variant]="page().status === 'published' ? 'success' : 'neutral'">
          {{ (page().status === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }}
        </app-badge>
        @if (!page().enabled) {
          <app-badge variant="neutral">{{ 'staticPages.disabledBadge' | translate }}</app-badge>
        }
        <app-badge [variant]="seoStatusVariant()">{{ seoStatusLabelKey() | translate }}</app-badge>
        @if (hasIssue()) {
          <app-badge variant="danger">{{ 'contentManagement.needsAttention' | translate }}</app-badge>
        }
        @if (visibilitySummary()) {
          <span class="page-card-tile__visibility">{{ visibilitySummary() }}</span>
        }
      </div>
      <p class="page-card-tile__updated">{{ 'contentManagement.lastEdited' | translate }}: {{ updatedAtLabel() || ('contentManagement.lastEditedNever' | translate) }}</p>
    </div>
  </button>
  <div class="page-card-tile__actions">
    <app-button variant="secondary" size="sm" (click)="open.emit()">{{ 'contentManagement.openAction' | translate }}</app-button>
    <app-button variant="ghost" size="sm" (click)="preview.emit()">{{ 'staticPages.previewToggle' | translate }}</app-button>
    <app-button variant="ghost" size="sm" (click)="duplicate.emit()">{{ 'staticPages.duplicatePage' | translate }}</app-button>
    <app-button variant="ghost" size="sm" (click)="remove.emit()">{{ 'builder.deletePage' | translate }}</app-button>
  </div>
</app-card>
