<div class="app-form-field">
  @if (label()) {
    <div class="app-form-field__label-row">
      <label class="app-form-field__label" [for]="fieldId">
        {{ label() }}
        @if (required()) {
          <span class="app-form-field__required" aria-hidden="true">*</span>
        }
      </label>
      @if (showReset()) {
        <button type="button" class="app-form-field__reset" [attr.aria-label]="resetLabel()" (click)="resetClicked.emit()">
          <app-icon name="refresh" [size]="12" />
          {{ resetLabel() }}
        </button>
      }
    </div>
  }

  <div class="app-form-field__control">
    <ng-content />
  </div>

  @if (error()) {
    <p class="app-form-field__error" [id]="errorId" role="alert">{{ error() }}</p>
  } @else if (hint()) {
    <p class="app-form-field__hint" [id]="hintId">{{ hint() }}</p>
  }

  @if (usedBy(); as targets) {
    @if (targets.length) {
      <p class="app-form-field__used-by" [id]="usedById">
        @if (usedByLabel()) {
          <span class="app-form-field__used-by-label">{{ usedByLabel() }}</span>
        }
        {{ targets.join(', ') }}
      </p>
    }
  }
</div>
