@if (alertService.pendingAlert(); as alert) {
  <app-modal-backdrop
    [zIndex]="120"
    [ariaLabel]="'app.highMemoryAlert.dismissAriaLabel' | translate"
    (dismissed)="dismiss()"
  />

  <div
    class="fixed inset-0 z-[121] flex items-center justify-center px-4 pointer-events-none"
  >
    <div
      appThemeNode="highMemoryAlertDialog"
      class="pointer-events-auto relative w-full max-w-lg rounded-xl border border-border bg-card p-4 shadow-lg"
      role="alertdialog"
      aria-modal="true"
      [attr.aria-labelledby]="'high-memory-alert-title'"
      [attr.aria-describedby]="'high-memory-alert-description'"
      (click)="$event.stopPropagation()"
      (keydown.enter)="$event.stopPropagation()"
      (keydown.space)="$event.stopPropagation()"
    >
      <button
        type="button"
        (click)="dismiss()"
        class="absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
        [attr.aria-label]="'app.highMemoryAlert.dismissAriaLabel' | translate"
      >
        <ng-icon
          name="lucideX"
          class="h-4 w-4"
        />
      </button>

      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-destructive">
        {{ 'app.highMemoryAlert.badge' | translate }}
      </p>

      <h2
        id="high-memory-alert-title"
        class="mt-1 pr-10 text-base font-semibold text-foreground"
      >
        {{ alertService.titleKey() | translate:{ usageGb: alertService.peakUsageGb() } }}
      </h2>

      <p
        id="high-memory-alert-description"
        class="mt-2 pr-2 text-sm leading-6 text-muted-foreground"
      >
        {{ alertService.messageKey() | translate }}
      </p>

      <p class="mt-3 break-all rounded-lg border border-border/70 bg-secondary/40 px-3 py-2 font-mono text-[11px] leading-5 text-muted-foreground">
        {{ alert.logFilePath }}
      </p>

      <div class="mt-4 flex flex-wrap gap-2">
        <button
          type="button"
          (click)="openLogFile()"
          class="inline-flex items-center rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
        >
          {{ 'app.highMemoryAlert.openLog' | translate }}
        </button>

        <button
          type="button"
          (click)="showLogFileInFolder()"
          class="inline-flex items-center rounded-lg border border-border bg-secondary px-3 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
        >
          {{ 'app.highMemoryAlert.showInFolder' | translate }}
        </button>

        <button
          type="button"
          (click)="copyLogPath()"
          class="inline-flex items-center rounded-lg border border-border bg-secondary px-3 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
        >
          {{ 'app.highMemoryAlert.copyPath' | translate }}
        </button>

        <button
          type="button"
          (click)="dismiss()"
          class="inline-flex items-center rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
        >
          {{ 'app.highMemoryAlert.dismiss' | translate }}
        </button>
      </div>
    </div>
  </div>
}