<!-- Semmet Angular: Alert Dialog — https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> triggerLabel="Delete item" title="Confirm delete" />
-->
<button type="button" (click)="open($event)">{{ triggerLabel() }}</button>

@if (isOpen()) {
  <div class="backdrop" (click)="close()"></div>
  <div
    #dialog
    role="alertdialog"
    aria-modal="true"
    [attr.aria-labelledby]="instanceId + '-title'"
    [attr.aria-describedby]="instanceId + '-description'"
    tabindex="-1"
    (keydown)="handleDialogKeydown($event)"
  >
    <h2 [id]="instanceId + '-title'">{{ title() }}</h2>
    <div [id]="instanceId + '-description'">{{ description() }}</div>
    <button type="button" (click)="close()">{{ cancelLabel() }}</button>
    <button type="button" (click)="close()">{{ confirmLabel() }}</button>
  </div>
}
