<!-- Semmet Angular: Account Selector — https://www.w3.org/WAI/tutorials/forms/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Conta de origem" [(selectedId)]="sourceAccountId" (accountSelect)="reviewAccount($event)" />
-->
<fieldset [attr.aria-labelledby]="legendId()" [attr.aria-describedby]="groupDescribedBy()">
  <legend [id]="legendId()">{{ label() }}</legend>

  @if (hint()) {
    <p [id]="hintId()">{{ hint() }}</p>
  }

  @if (accounts().length) {
    <div class="<%= dasherize(name) %>__list">
      @for (account of accounts(); track account.id) {
        <label class="<%= dasherize(name) %>__option" [class.<%= dasherize(name) %>__option--disabled]="account.disabled">
          <input
            type="radio"
            [name]="instanceId"
            [id]="accountId(account)"
            [value]="account.id"
            [checked]="isSelected(account)"
            [disabled]="account.disabled"
            [attr.aria-describedby]="accountDescriptionId(account)"
            (change)="selectAccount(account)"
          />
          <span class="<%= dasherize(name) %>__content">
            <span class="<%= dasherize(name) %>__name">{{ account.label }}</span>
            <span [id]="accountDescriptionId(account)" class="<%= dasherize(name) %>__details">
              {{ account.type }}. {{ account.accountNumber }}. Saldo {{ account.balance }} {{ account.currency }}.
              @if (account.status) {
                {{ account.status }}.
              }
            </span>
          </span>
        </label>
      }
    </div>
  } @else {
    <p role="status">{{ emptyMessage() }}</p>
  }
</fieldset>

@if (selectedAccount(); as account) {
  <p class="<%= dasherize(name) %>__status" role="status">
    Conta selecionada: {{ account.label }}.
  </p>
}
