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

<<%= selector %> cardLabel="Mastercard Black" maskedNumber="•••• 4921" (controlChange)="updateCardControl($event)" />
-->
<section [attr.aria-labelledby]="titleId()" [attr.aria-describedby]="cardDescriptionId()">
  <header>
    <h2 [id]="titleId()">{{ title() }}</h2>
    <p [id]="cardDescriptionId()">
      {{ cardLabel() }} terminando em {{ maskedNumber() }}. Situação: {{ cardStatus() }}.
    </p>
  </header>

  <ul class="<%= dasherize(name) %>__list">
    @for (control of controls(); track control.id) {
      <li>
        <label class="<%= dasherize(name) %>__switch" [for]="controlId(control)">
          <span>
            <span class="<%= dasherize(name) %>__label">{{ control.label }}</span>
            <span [id]="controlDescriptionId(control)" class="<%= dasherize(name) %>__description">
              {{ control.description }}
            </span>
          </span>
          <input
            [id]="controlId(control)"
            type="checkbox"
            role="switch"
            [checked]="isEnabled(control)"
            [disabled]="control.disabled"
            [attr.aria-describedby]="controlDescriptionId(control)"
            (change)="toggleControl(control, $event)"
          />
        </label>
      </li>
    }
  </ul>

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