<!--
  Two presentations:
  - Mobile: rendered through `app-bottom-sheet` so confirmations slide up from the bottom.
  - Desktop: original centered modal with backdrop.
-->
@if (isMobile()) {
  <app-bottom-sheet
    [title]="title()"
    [ariaLabel]="title()"
    (dismissed)="cancelled.emit(undefined)"
  >
    <div class="px-4 pb-3 pt-1 text-sm text-muted-foreground">
      <ng-content />
    </div>
    <div class="flex gap-2 border-t border-border p-3">
      <button
        (click)="cancelled.emit(undefined)"
        type="button"
        class="min-h-11 flex-1 rounded-lg bg-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
      >
        {{ cancelLabel() }}
      </button>
      <button
        (click)="confirmed.emit(undefined)"
        type="button"
        class="min-h-11 flex-1 rounded-lg px-3 py-2 text-sm transition-colors"
        [class.bg-primary]="variant() === 'primary'"
        [class.text-primary-foreground]="variant() === 'primary'"
        [class.hover:bg-primary/90]="variant() === 'primary'"
        [class.bg-destructive]="variant() === 'danger'"
        [class.text-destructive-foreground]="variant() === 'danger'"
        [class.hover:bg-destructive/90]="variant() === 'danger'"
      >
        {{ confirmLabel() }}
      </button>
    </div>
  </app-bottom-sheet>
} @else {
  <!-- Backdrop -->
  <app-modal-backdrop
    [zIndex]="40"
    [ariaLabel]="'shared.dialog.closeDialogAria' | translate"
    (dismissed)="cancelled.emit(undefined)"
  />

  <!-- Dialog -->
  <div
    appThemeNode="confirmDialogSurface"
    class="fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-lg"
    [class]="widthClass()"
  >
    <div class="p-4">
      <h4 class="font-semibold text-foreground mb-2">{{ title() }}</h4>
      <div class="text-sm text-muted-foreground">
        <ng-content />
      </div>
    </div>
    <div class="flex gap-2 p-3 border-t border-border">
      <button
        (click)="cancelled.emit(undefined)"
        type="button"
        class="flex-1 px-3 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm"
      >
        {{ cancelLabel() }}
      </button>
      <button
        (click)="confirmed.emit(undefined)"
        type="button"
        class="flex-1 px-3 py-2 rounded-lg transition-colors text-sm"
        [class.bg-primary]="variant() === 'primary'"
        [class.text-primary-foreground]="variant() === 'primary'"
        [class.hover:bg-primary/90]="variant() === 'primary'"
        [class.bg-destructive]="variant() === 'danger'"
        [class.text-destructive-foreground]="variant() === 'danger'"
        [class.hover:bg-destructive/90]="variant() === 'danger'"
      >
        {{ confirmLabel() }}
      </button>
    </div>
  </div>
}
