<div class="flex flex-row">
  <div class="shared-purchase-options-list-item__thumbnail w-16 max-h-28">
    <img
      class="rounded shadow-card max-w-full max-h-full"
      [src]="product?.ean | productImage"
      [alt]="product?.name"
    />
  </div>
  <div class="shared-purchase-options-list-item__product grow ml-4">
    <div class="shared-purchase-options-list-item__contributors font-bold">
      {{ product?.contributors }}
    </div>
    <div
      class="shared-purchase-options-list-item__name font-bold h-12"
      sharedScaleContent
    >
      {{ product?.name }}
    </div>
    <div
      class="shared-purchase-options-list-item__format flex flex-row items-center"
    >
      <shared-icon [icon]="product?.format"></shared-icon>
      <span class="ml-2 font-bold">{{ product?.formatDetail }}</span>
    </div>
    <div class="shared-purchase-options-list-item__manufacturer-and-ean">
      {{ product?.manufacturer }}
      @if (product?.manufacturer && product?.ean) {
        <span>|</span>
      }
      {{ product?.ean }}
    </div>
    <div class="shared-purchase-options-list-item__volume-and-publication-date">
      {{ product?.volume }}
      @if (product?.volume && product?.publicationDate) {
        <span>|</span>
      }
      {{ product?.publicationDate | date: 'dd. MMMM yyyy' }}
    </div>
    <div
      class="shared-purchase-options-list-item__availabilities mt-3 grid grid-flow-row gap-2 justify-start"
    >
      @if ((availabilities$ | async)?.length) {
        <div class="whitespace-nowrap self-center">Verfügbar als</div>
      }
      @for (availability of availabilities$ | async; track availability) {
        <div class="grid grid-flow-col gap-4 justify-start">
          <div
            class="shared-purchase-options-list-item__availability grid grid-flow-col gap-2 items-center"
            [attr.data-option]="availability.purchaseOption"
          >
            @switch (availability.purchaseOption) {
              @case ('delivery') {
                <shared-icon icon="isa-truck" [size]="22"></shared-icon>
                {{
                  availability.data.estimatedDelivery?.start | date: 'EE dd.MM.'
                }}
                -
                {{
                  availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.'
                }}
              }
              @case ('dig-delivery') {
                <shared-icon icon="isa-truck" [size]="22"></shared-icon>
                {{
                  availability.data.estimatedDelivery?.start | date: 'EE dd.MM.'
                }}
                -
                {{
                  availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.'
                }}
              }
              @case ('b2b-delivery') {
                <shared-icon icon="isa-b2b-truck" [size]="24"></shared-icon>
                {{
                  availability.data.estimatedShippingDate
                    | date: 'dd. MMMM yyyy'
                }}
              }
              @case ('pickup') {
                <shared-icon
                  class="cursor-pointer"
                  #uiOverlayTrigger="uiOverlayTrigger"
                  [uiOverlayTrigger]="orderDeadlineTooltip"
                  [class.tooltip-active]="uiOverlayTrigger.opened"
                  icon="isa-box-out"
                  [size]="18"
                ></shared-icon>
                {{
                  availability.data.estimatedShippingDate
                    | date: 'dd. MMMM yyyy'
                }}
                <ui-tooltip
                  #orderDeadlineTooltip
                  yPosition="above"
                  xPosition="after"
                  [yOffset]="-12"
                  [xOffset]="4"
                  [warning]="true"
                  [closeable]="true"
                >
                  <b>{{ availability.data?.orderDeadline | orderDeadline }}</b>
                </ui-tooltip>
              }
              @case ('in-store') {
                <shared-icon icon="isa-shopping-bag" [size]="18"></shared-icon>
                {{ availability.data.inStock }}x
                @if (isEVT) {
                  ab {{ isEVT | date: 'dd. MMMM yyyy' }}
                } @else {
                  ab sofort
                }
              }
              @case ('download') {
                <shared-icon icon="isa-download" [size]="22"></shared-icon>
                Download
              }
            }
          </div>
        </div>
      }
    </div>
  </div>
  <div
    class="shared-purchase-options-list-item__price text-right ml-4 flex flex-col items-end"
  >
    <div
      class="shared-purchase-options-list-item__price-value font-bold text-xl flex flex-row items-center"
    >
      <div class="relative flex flex-row justify-end items-start">
        @if (showRedemptionPoints()) {
          <span class="isa-text-body-2-regular text-isa-neutral-600"
            >Einlösen für:</span
          >
          <span class="ml-2 isa-text-body-2-bold text-isa-secondary-900"
            >{{
              redemptionPoints() * quantityFormControl.value
            }}
            Lesepunkte</span
          >
        } @else {
          @if (canEditVat$ | async) {
            <ui-select
              class="w-[6.5rem] min-h-[3.4375rem] p-4 rounded-card border border-solid border-[#AEB7C1] mr-4"
              tabindex="-1"
              [formControl]="manualVatFormControl"
              [defaultLabel]="'MwSt'"
            >
              @for (vat of vats$ | async; track vat) {
                <ui-select-option
                  [label]="vat.name + '%'"
                  [value]="vat.vatType"
                ></ui-select-option>
              }
            </ui-select>
          }
          @if (canEditPrice$ | async) {
            <shared-input-control
              [class.ml-6]="
                priceFormControl?.invalid && priceFormControl?.dirty
              "
            >
              <shared-input-control-indicator>
                @if (priceFormControl?.invalid && priceFormControl?.dirty) {
                  <shared-icon icon="mat-info"></shared-icon>
                }
              </shared-input-control-indicator>
              <input
                [uiOverlayTrigger]="giftCardTooltip"
                triggerOn="none"
                #quantityInput
                #priceOverlayTrigger="uiOverlayTrigger"
                sharedInputControlInput
                type="string"
                class="w-24"
                [formControl]="priceFormControl"
                placeholder="00,00"
                (sharedOnInit)="
                  onPriceInputInit(quantityInput, priceOverlayTrigger)
                "
                sharedNumberValue
              />
              <shared-input-control-suffix>EUR</shared-input-control-suffix>
              <shared-input-control-error error="required"
                >Preis ist ungültig</shared-input-control-error
              >
              <shared-input-control-error error="pattern"
                >Preis ist ungültig</shared-input-control-error
              >
              <shared-input-control-error error="min"
                >Preis ist ungültig</shared-input-control-error
              >
              <shared-input-control-error error="max"
                >Preis ist ungültig</shared-input-control-error
              >
            </shared-input-control>
          } @else {
            {{ priceValue$ | async | currency: 'EUR' : 'code' }}
          }
        }
        <ui-tooltip
          [warning]="true"
          xPosition="after"
          yPosition="below"
          [xOffset]="-55"
          [yOffset]="18"
          [closeable]="true"
          #giftCardTooltip
        >
          Tragen Sie hier den
          <br />
          Gutscheinbetrag ein.
        </ui-tooltip>
      </div>
    </div>
    <ui-quantity-dropdown
      class="mt-2"
      [formControl]="quantityFormControl"
      [range]="maxSelectableQuantity$ | async"
      data-what="purchase-option-quantity"
      [attr.data-which]="product?.ean"
    ></ui-quantity-dropdown>
    <div class="pt-7">
      @if ((canAddResult$ | async)?.canAdd) {
        <input
          class="fancy-checkbox"
          [class.checked]="selectedFormControl?.value"
          [formControl]="selectedFormControl"
          type="checkbox"
          data-what="purchase-option-selector"
          [attr.data-which]="product?.ean"
        />
      }
    </div>

    @if (canAddResult$ | async; as canAddResult) {
      @if (!canAddResult.canAdd) {
        <span
          class="inline-block font-bold text-[#BE8100] mt-[14px] max-w-[19rem]"
        >
          {{ canAddResult.message }}
        </span>
      }
    }

    @if (showNoDownloadAvailability$ | async) {
      <span
        class="inline-block font-bold text-[#BE8100] mt-[14px] max-w-[19rem]"
      >
        Derzeit nicht verfügbar
      </span>
    }

    @if (showMaxAvailableQuantity$ | async) {
      <span class="font-bold text-[#BE8100] mt-[14px]">
        {{ (availability$ | async)?.inStock }} Exemplare sofort lieferbar
      </span>
    }
    @if (showNotAvailable$ | async) {
      <span class="font-bold text-[#BE8100] mt-[14px]"
        >Derzeit nicht bestellbar</span
      >
    }
  </div>
</div>
<div class="flex flex-row">
  <div class="w-16"></div>
  <div class="grow shared-purchase-options-list-item__availabilities"></div>
</div>
@if (showLowStockMessage()) {
  <div
    class="text-isa-accent-red isa-text-body-2-bold mt-6 flex flex-row items-center gap-2"
  >
    <ng-icon name="isaOtherInfo" size="1.5rem"></ng-icon>
    <div>Geringer Bestand - Artikel holen vor Abschluss</div>
  </div>
}
