<h3>Woher wollen Sie den Artikel beziehen?</h3>

<hr />

@if (orderItem$ | async; as orderItem) {
  <div class="header">
    @if (orderItem?.product?.ean | productImage; as productImage) {
      <img
        class="thumbnail"
        loading="lazy"
        [src]="productImage"
        [alt]="orderItem?.product?.name"
        />
    }
    <div class="details">
      <div class="product-name">{{ orderItem.product?.name }}</div>
      @if (orderItem.product?.format && orderItem.product.formatDetail) {
        <div class="product-format">
          <img class="format-icon" [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'" alt="format icon" />
          {{ orderItem.product.formatDetail }}
        </div>
      }
      <div class="product-ean">
        {{ orderItem.product?.ean }}
      </div>
      <div class="quantity">{{ orderItem.quantity }}x</div>
    </div>
  </div>
  @if (availabilities$ | async; as availabilities) {
    <div class="supplier-grid">
      <span></span>
      <span class="number">Bestand</span>
      <span>MS</span>
      <span title="Vormerker">VM</span>
      <span>vsl. Lieferdatum</span>
      <span class="number">Preis</span>
      <span></span>
      @for (availability of availabilities; track availability; let i = $index) {
        @if (availability) {
          <span class="first-cell">{{ availability.supplier | supplierName }}</span>
          <span class="number">{{ availability.qty || 0 }}</span>
          <span>{{ availability.ssc }}</span>
          <span>
            @if (availability.supplier !== 'F') {
              <ui-checkbox [(ngModel)]="availability.isPrebooked"></ui-checkbox>
            }
          </span>
          <span>{{ availability.at | date: 'dd.MM.yy' }}</span>
          <span class="number">{{ availability.price?.value?.value | currency: 'EUR' : 'code' }}</span>
          <span>
            @if (availability.supplier !== 'F' || availability.qty > 0) {
              <ui-select-bullet
                [(ngModel)]="checkedSupplier"
                [value]="availability.supplier"
                (ngModelChange)="checked($event, availability)"
              ></ui-select-bullet>
            }
          </span>
        }
      }
    </div>
    @if (storeAvailabilityError$ | async) {
      <div class="availability-error">Lieferantenbestand nicht verfügbar</div>
      <hr />
    }
    @if (takeAwayAvailabilityError$ | async) {
      <div class="availability-error">Filialbestand nicht verfügbar</div>
      <hr />
    }
    @if (showReasons$ | async) {
      <div class="reason">
        <button class="reason-dropdown" [uiOverlayTrigger]="statusDropdown" #dropdown="uiOverlayTrigger">
          {{ selectedReason || 'Warum wird nachbestellt?' }}
          <ui-icon [rotate]="dropdown.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-icon>
        </button>
        <ui-dropdown #statusDropdown yPosition="above" xPosition="after" [xOffset]="8">
          @for (reason of reorderReasons$ | async; track reason) {
            <button uiDropdownItem (click)="selectedReason = reason.value; dropdown.close()">
              {{ reason.value }}
            </button>
          }
        </ui-dropdown>
        @if (showReasonError$ | async) {
          <span class="error">Bitte wählen Sie einen Grund für das nachbestellen</span>
        }
      </div>
    }
    <div class="actions">
      <button class="cta-not-available cta-action-secondary" [disabled]="ctaDisabled$ | async" (click)="notAvailable()">
        <ui-spinner [show]="ctaDisabled$ | async">Nicht lieferbar</ui-spinner>
      </button>
      <button class="cta-reorder cta-action-primary" [disabled]="ctaReorderDisabled$ | async" (click)="reorder()">
        <ui-spinner [show]="ctaDisabled$ | async">Bestellen</ui-spinner>
      </button>
    </div>
  } @else {
    <ui-spinner class="load-spinner" [show]="true"></ui-spinner>
  }
}
