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

<<%= selector %>
  cardLabel="Cartão corporativo"
  brand="Mastercard"
  cardholder="Marina Alves"
  lastFour="9081"
  expiry="08/29"
  (cardAction)="openCardSettings()"
/>
-->
<article
  class="<%= dasherize(name) %>"
  [attr.aria-labelledby]="headingId()"
  [attr.aria-describedby]="descriptionId()"
>
  <header>
    <h2 [id]="headingId()">{{ cardLabel() }}</h2>
    <p [id]="descriptionId()">{{ accessibleDescription() }}</p>
    <p>{{ statusLabel() }}</p>
  </header>

  <dl>
    <div>
      <dt>{{ cardholderLabel() }}</dt>
      <dd>{{ cardholder() }}</dd>
    </div>
    <div>
      <dt>{{ lastFourLabel() }}</dt>
      <dd>{{ lastFour() }}</dd>
    </div>
    <div>
      <dt>{{ expiryLabel() }}</dt>
      <dd>{{ expiry() }}</dd>
    </div>
  </dl>

  <button type="button" (click)="handleAction()">{{ actionLabel() }}</button>
</article>
