<!-- Semmet Angular: Compliance Alert — https://www.w3.org/WAI/ARIA/apg/patterns/alert/ -->
<!--
Uso a partir do template de um componente pai:
Importe <%= classify(name) %> nesse componente pai.

<<%= selector %> title="Consentimento do Open Finance" (acknowledge)="continueFlow()" />
-->
<section role="alert" [attr.aria-labelledby]="titleId()" [attr.aria-describedby]="messageId()">
  <p class="<%= dasherize(name) %>__severity">{{ severity() }}</p>
  <h2 [id]="titleId()">{{ title() }}</h2>
  <p [id]="messageId()">{{ message() }}</p>

  @if (requiresConsent()) {
    <label class="<%= dasherize(name) %>__consent" [for]="consentId()">
      <input
        [id]="consentId()"
        type="checkbox"
        [checked]="accepted()"
        (change)="updateConsent($event)"
      />
      {{ consentLabel() }}
    </label>
  }

  <div class="<%= dasherize(name) %>__actions">
    <button type="button" [disabled]="confirmDisabled()" (click)="acknowledgeAlert()">{{ confirmLabel() }}</button>
    <button type="button" (click)="cancelAlert()">{{ cancelLabel() }}</button>
  </div>

  @if (statusMessage()) {
    <p aria-live="polite">{{ statusMessage() }}</p>
  }
</section>
