@let p = product();
<div class="flex gap-6 flex-shrink-0 justify-between items-center">
  <div>
    {{ question().description }}
  </div>

  <div class="flex gap-4 items-center">
    <ui-text-field-container>
      <ui-text-field size="small" class="min-w-[22.875rem]">
        <input
          #inputRef
          uiInputControl
          class="isa-text-body-2-bold placeholder:isa-text-body-2-bold"
          placeholder="EAN eingeben / scannen"
          type="text"
          [formControl]="control"
          (cleared)="resetProduct()"
          (blur)="control.updateValueAndValidity()"
          (keydown.enter)="check()"
        />
        @if (!p) {
          <button
            class="px-0"
            uiTextButton
            size="small"
            color="strong"
            (click)="check()"
            [pending]="status().fetching"
          >
            Prüfen
          </button>
        } @else {
          <ui-text-field-clear></ui-text-field-clear>
        }
      </ui-text-field>

      <ui-text-field-errors>
        @if (!p && status().hasResult === false && !control.invalid) {
          <span>Kein Artikel gefunden</span>
        }

        @if (control.invalid && control.touched) {
          <span>Die eingegebene EAN ist ungültig</span>
        }
      </ui-text-field-errors>
    </ui-text-field-container>

    <shared-scanner-button
      class="self-start"
      [disabled]="!!control?.value"
      (scan)="onScan($event)"
    >
    </shared-scanner-button>
  </div>
</div>

@if (p) {
  <div class="mb-6 flex flex-col gap-4">
    <div class="isa-text-body-2-bold">Gelieferter Artikel:</div>
    <div class="flex flex-row gap-4">
      <img
        class="w-[3.375rem]"
        sharedProductRouterLink
        sharedProductImage
        [ean]="p.ean"
        [alt]="p.name"
      />
      <div class="flex flex-col gap-2">
        <div class="isa-text-body-2-bold text-isa-secondary-900">
          {{ p.contributors }}
        </div>
        <div class="text-isa-neutral-900 isa-text-body-2-regular">
          {{ p.name }}
        </div>
      </div>
    </div>
  </div>
  <div class="isa-text-caption-regular">
    Falls es sich um den falschen Artikel handelt, geben sie die EAN erneut ein,
    oder Scannen Sie das Produkt erneut.
  </div>
}
