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

<<%= selector %> title="Pagar com Pix" (pixSubmit)="reviewPix($event)" />
-->
<form [attr.aria-labelledby]="titleId()" (submit)="submit($event)" novalidate>
  <fieldset>
    <legend [id]="titleId()">{{ title() }}</legend>

    <div class="<%= dasherize(name) %>__field">
      <p [id]="methodGroupId()">{{ methodLabel() }}</p>
      <div role="radiogroup" [attr.aria-labelledby]="methodGroupId()">
        @for (method of methodOptions(); track method.value) {
          <label>
            <input
              type="radio"
              [name]="instanceId + '-method'"
              [id]="methodId(method.value)"
              [value]="method.value"
              [checked]="payment().method === method.value"
              (change)="updateMethod(method.value)"
            />
            {{ method.label }}
          </label>
        }
      </div>
    </div>

    <div class="<%= dasherize(name) %>__field">
      <label [for]="pixKeyId()">{{ pixKeyLabel() }} <span aria-hidden="true">*</span></label>
      <input
        [id]="pixKeyId()"
        name="pixKey"
        type="text"
        autocomplete="off"
        required
        [value]="payment().pixKey"
        [attr.aria-invalid]="fieldError('pixKey') ? 'true' : null"
        [attr.aria-describedby]="describedBy('pixKey')"
        (input)="updateField('pixKey', $event)"
      />
      @if (fieldError('pixKey')) {
        <p [id]="errorId('pixKey')" role="alert">{{ fieldError('pixKey') }}</p>
      }
    </div>

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

    <div class="<%= dasherize(name) %>__field">
      <label [for]="descriptionId()">{{ descriptionLabel() }}</label>
      <textarea
        [id]="descriptionId()"
        name="description"
        rows="3"
        [value]="payment().description"
        (input)="updateField('description', $event)"
      ></textarea>
    </div>
  </fieldset>

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

  @if (statusMessage()) {
    <p role="status">{{ statusMessage() }}</p>
  }
</form>
