<div
  class="grid grid-cols-[1fr,auto] items-center justify-between"
  [attr.data-position]="position()"
>
  <div class="isa-text-body-1-bold">Menge {{ position() }}</div>
  <div class="-mr-4">
    <input
      name="quantity"
      placeholder="Menge eingeben"
      type="number"
      [ngModel]="quantity()"
      (ngModelChange)="setQuantity($event)"
      #model="ngModel"
      [min]="1"
      [max]="999"
      required
      data-what="input"
      data-which="quantity"
      class="isa-text-body-2-bold placeholder:isa-text-body-2-regular placeholder:text-isa-neutral-500 text-isa-neutral-900 focus:outline-none w-[9rem] px-4 text-right"
    />
    <ui-dropdown
      [ngModel]="quantityAndReason().reason"
      (ngModelChange)="setReason($event)"
      class="border-none max-w-56 truncate"
      data-what="dropdown"
      data-which="reason"
      [label]="dropdownLabel()"
    >
      @if (reasonResource.value(); as reasons) {
        @for (reson of reasons; track reson.key) {
          <ui-dropdown-option
            [value]="reson.value"
            data-what="dropdown-option"
            data-which="reason-option"
            [attr.data-reason-key]="reson.key"
          >
            {{ reson.value }}
          </ui-dropdown-option>
        }
      }
    </ui-dropdown>
  </div>
</div>
