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

<<%= selector %>
  label="PIN da transação"
  [(value)]="pin"
  [length]="4"
/>
-->
<div class="<%= dasherize(name) %>">
  <label [for]="controlId()">
    {{ label() }}
    @if (required()) {
      <span aria-hidden="true">*</span>
    }
  </label>

  <div class="<%= dasherize(name) %>__control">
    <input
      [id]="controlId()"
      [type]="inputType()"
      inputmode="numeric"
      [autocomplete]="autocomplete()"
      [value]="value()"
      [attr.maxlength]="length()"
      [attr.pattern]="codePattern()"
      [required]="required()"
      [disabled]="disabled()"
      [readOnly]="readOnly()"
      [attr.aria-required]="required() ? 'true' : null"
      [attr.aria-invalid]="error() ? 'true' : null"
      [attr.aria-describedby]="describedBy()"
      (input)="updateValue($event)"
    />

    <button
      type="button"
      [disabled]="disabled()"
      [attr.aria-controls]="controlId()"
      [attr.aria-pressed]="codeVisible()"
      (click)="toggleVisibility()"
    >
      {{ toggleLabel() }}
    </button>
  </div>

  @if (hint()) {
    <p class="<%= dasherize(name) %>__hint" [id]="hintId()">{{ hint() }}</p>
  }

  @if (error()) {
    <p class="<%= dasherize(name) %>__error" [id]="errorId()" role="alert">{{ error() }}</p>
  }
</div>
