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

<<%= selector %> title="Limites de Pix e cartão" (limitSubmit)="requestLimitChanges($event)" />
-->
<form [attr.aria-labelledby]="titleId()" [attr.aria-describedby]="descriptionId()" (submit)="submit($event)">
  <header>
    <h2 [id]="titleId()">{{ title() }}</h2>
    <p [id]="descriptionId()">{{ description() }}</p>
  </header>

  <div class="<%= dasherize(name) %>__list">
    @for (limit of limits(); track limit.id) {
      <section class="<%= dasherize(name) %>__item" [attr.aria-labelledby]="inputId(limit) + '-label'">
        <h3 [id]="inputId(limit) + '-label'">{{ limit.label }}</h3>
        <p [id]="detailsId(limit)">{{ usageText(limit) }}</p>
        <meter min="0" [max]="limit.max" [value]="limit.current">
          {{ limit.current }} / {{ limit.max }}
        </meter>
        <label [for]="inputId(limit)">Limite solicitado</label>
        <input
          [id]="inputId(limit)"
          type="number"
          inputmode="decimal"
          min="0"
          [max]="limit.max"
          step="100"
          [value]="requestedValue(limit)"
          [attr.aria-describedby]="detailsId(limit)"
          (input)="updateRequestedLimit(limit, $event)"
        />
      </section>
    }
  </div>

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

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