<!-- Semmet Angular: OTP 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="Código de segurança"
  [(value)]="code"
  [length]="6"
  [required]="true"
/>
-->
<div class="<%= dasherize(name) %>">
  <label [for]="controlId()">
    {{ label() }}
    @if (required()) {
      <span aria-hidden="true">*</span>
    }
  </label>

  <input
    [id]="controlId()"
    type="text"
    inputmode="numeric"
    autocomplete="one-time-code"
    [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)"
  />

  @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>
