<!-- Semmet Angular: Beneficiary List — 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 %>
  [beneficiaries]="recipients"
  [(selectedId)]="selectedRecipientId"
  (beneficiarySelect)="chooseRecipient($event)"
/>
-->
<section class="<%= dasherize(name) %>" [attr.aria-labelledby]="headingId()">
  <h2 [id]="headingId()">{{ title() }}</h2>

  <ul>
    @for (beneficiary of beneficiaries(); track beneficiary.id) {
      <li>
        <button
          type="button"
          [attr.aria-pressed]="isSelected(beneficiary)"
          (click)="selectBeneficiary(beneficiary)"
        >
          <span>{{ beneficiary.name }}</span>
          <span>{{ beneficiary.institution }}</span>
          <span>{{ beneficiary.accountLabel }}</span>
          @if (beneficiary.documentLabel) {
            <span>{{ beneficiary.documentLabel }}</span>
          }
          @if (beneficiary.status) {
            <span>{{ beneficiary.status }}</span>
          }
        </button>
      </li>
    } @empty {
      <li>
        <p role="status">{{ emptyMessage() }}</p>
      </li>
    }
  </ul>
</section>
