<p
  class="isa-text-body-1-regular text-isa-neutral-600"
  data-what="text"
  data-which="dialog-message"
  role="status"
>
  {{ data.message }}
</p>
<div class="flex flex-col gap-8">
  <div class="flex flex-row gap-4">
    <ui-text-field-container>
      <ui-text-field size="small" class="w-[22rem] desktop-small:w-[26rem]">
        <input
          #inputRef
          uiInputControl
          class="isa-text-body-2-bold placeholder:isa-text-body-2-bold"
          [placeholder]="data?.inputLabel ?? ''"
          [attr.aria-label]="data?.inputLabel ?? 'Texteingabe'"
          [attr.aria-invalid]="control.invalid && control.touched"
          [attr.aria-required]="true"
          data-what="input"
          data-which="dialog-text-input"
          type="text"
          [formControl]="control"
          (cleared)="control.setValue('')"
          (blur)="control.updateValueAndValidity()"
          (keydown.enter)="onConfirm()"
        />

        <ui-text-field-clear></ui-text-field-clear>
      </ui-text-field>

      @if (data?.inputValidation || asyncError()) {
        <ui-text-field-errors>
          @if (asyncError()) {
            <span
              data-what="error"
              data-which="async-error"
              role="alert"
              aria-live="polite"
              >{{ asyncError() }}</span
            >
          }
          @for (validation of data.inputValidation; track validation.errorKey) {
            @if (control.errors?.[validation.errorKey] && control.touched) {
              <span
                data-what="error"
                [attr.data-which]="'validation-' + validation.errorKey"
                role="alert"
                >{{ validation.errorText }}</span
              >
            }
          }
        </ui-text-field-errors>
      }
    </ui-text-field-container>

    <shared-scanner-button
      class="self-start"
      data-what="button"
      data-which="scanner"
      aria-label="Barcode scannen"
      [disabled]="!!control?.value"
      (scan)="onScan($event)"
    >
    </shared-scanner-button>
  </div>

  <div class="flex flex-row gap-2 w-full">
    <button
      class="grow"
      uiButton
      (click)="close({})"
      color="secondary"
      data-what="button"
      data-which="close"
      [disabled]="isLoading()"
    >
      {{ data.closeText || 'Verlassen' }}
    </button>
    <button
      class="grow"
      uiButton
      (click)="onConfirm()"
      color="primary"
      data-what="button"
      data-which="save"
      [disabled]="control.invalid || isLoading()"
      [pending]="isLoading()"
    >
      {{ data.confirmText || 'Speichern' }}
    </button>
  </div>
</div>
