<!-- Semmet Angular: Transfer Form — https://www.w3.org/WAI/tutorials/forms/ -->
<!--
Uso a partir do template de um componente pai:
Importe <%= classify(name) %> nesse componente pai.

<<%= selector %>
  title="Nova transferência"
  [accounts]="accounts"
  (transferSubmit)="reviewTransfer($event)"
/>
-->
<form class="<%= dasherize(name) %>" [attr.aria-labelledby]="titleId()" (submit)="submit($event)" novalidate>
  <fieldset>
    <legend [id]="titleId()">{{ title() }}</legend>

    <div class="<%= dasherize(name) %>__field">
      <label [for]="fromAccountId()">{{ fromAccountLabel() }}</label>
      <select
        [id]="fromAccountId()"
        name="fromAccount"
        [value]="form().fromAccount"
        required
        [attr.aria-invalid]="fromAccountError() ? 'true' : null"
        [attr.aria-describedby]="fromAccountDescribedBy()"
        (change)="updateField('fromAccount', $event)"
      >
        @for (account of accounts(); track account.id) {
          <option [value]="account.id">{{ account.label }}</option>
        }
      </select>
      @if (fromAccountError()) {
        <p [id]="fromAccountErrorId()" role="alert">{{ fromAccountError() }}</p>
      }
    </div>

    <div class="<%= dasherize(name) %>__field">
      <label [for]="recipientId()">{{ recipientLabel() }}</label>
      <input
        [id]="recipientId()"
        name="recipient"
        type="text"
        autocomplete="name"
        [value]="form().recipient"
        required
        [attr.aria-invalid]="recipientError() ? 'true' : null"
        [attr.aria-describedby]="recipientDescribedBy()"
        (input)="updateField('recipient', $event)"
      />
      @if (recipientError()) {
        <p [id]="recipientErrorId()" role="alert">{{ recipientError() }}</p>
      }
    </div>

    <div class="<%= dasherize(name) %>__field">
      <label [for]="amountId()">{{ amountLabel() }}</label>
      <input
        [id]="amountId()"
        name="amount"
        type="text"
        inputmode="decimal"
        autocomplete="transaction-amount"
        [value]="form().amount"
        required
        [attr.aria-invalid]="amountError() ? 'true' : null"
        [attr.aria-describedby]="amountDescribedBy()"
        (input)="updateField('amount', $event)"
      />
      <p [id]="amountHintId()">{{ amountHint() }}</p>
      @if (amountError()) {
        <p [id]="amountErrorId()" role="alert">{{ amountError() }}</p>
      }
    </div>

    <div class="<%= dasherize(name) %>__field">
      <label [for]="descriptionId()">{{ descriptionLabel() }}</label>
      <textarea
        [id]="descriptionId()"
        name="description"
        [value]="form().description"
        [attr.aria-describedby]="descriptionDescribedBy()"
        (input)="updateField('description', $event)"
      ></textarea>
      <p [id]="descriptionHintId()">{{ descriptionHint() }}</p>
    </div>
  </fieldset>

  @if (statusMessage()) {
    <p [attr.role]="isInvalid() ? 'alert' : 'status'" aria-live="polite">{{ statusMessage() }}</p>
  }

  <button type="submit">{{ submitLabel() }}</button>
</form>
