<ng-container *ngIf="(hasOption$ | async) === false">
  <h3 class="modal-title">Wie möchten Sie den Artikel erhalten?</h3>

  <div class="options-wrapper">
    <ng-container *ngFor="let option of availableOptions$ | async" [ngSwitch]="option">
      <page-take-away-option *ngSwitchCase="'take-away'"></page-take-away-option>
      <page-pick-up-option *ngSwitchCase="'pick-up'"></page-pick-up-option>
      <page-delivery-option *ngSwitchCase="'delivery'"></page-delivery-option>
      <page-dig-delivery-option *ngSwitchCase="'dig-delivery'"></page-dig-delivery-option>
      <page-b2b-delivery-option *ngSwitchCase="'b2b-delivery'"></page-b2b-delivery-option>
    </ng-container>
    <ng-container *ngIf="(availableOptions$ | async).length === 0">
      <p class="hint">Derzeit nicht bestellbar</p>
    </ng-container>
  </div>
</ng-container>

<ng-container *ngIf="hasOption$ | async">
  <h3 class="modal-title">Artikel dem Warenkorb hinzufügen</h3>

  <div class="option-product-summary" *ngIf="item$ | async; let item">
    <div class="header-row">
      <h5 class="option-name" *ngIf="option$ | async; let option">
        <ng-container *ngIf="option | purchaseOptionIcon; let icon">
          <ui-icon [size]="icon === 'truck_b2b' ? '40px' : '23px'" [icon]="icon"></ui-icon>
        </ng-container>

        {{ option | purchaseOptionName }}
      </h5>
      <span *ngIf="(option$ | async) !== 'download'">
        in der Filiale:
        <span class="option-branch">{{ (branch$ | async)?.name }}</span>
      </span>
    </div>
    <hr />
    <div class="product-row">
      <img class="thumbnail" [src]="(item?.imageId !== undefined ? item?.imageId : item?.product?.ean) | productImage: 80:100:true" />
      <div class="details">
        <h6 class="title">{{ item?.product?.contributors }} - {{ item?.product?.name }}</h6>
        <strong class="can-add-error" *ngIf="canAddError$ | async; let canAddError">{{ canAddError }}</strong>
        <div class="grow"></div>
        <div class="format" *ngIf="item?.product?.format && item?.product?.formatDetail">
          <img
            *ngIf="item?.product?.format !== '--'"
            src="assets/images/Icon_{{ item?.product?.format }}.svg"
            [alt]="item?.product?.formatDetail"
          />
          {{ item?.product?.formatDetail }}
        </div>

        <div class="price">
          {{ price$ | async | currency: item?.catalogAvailability?.price?.value?.currency || 'EUR':'code' }}
        </div>
        <div class="date" *ngIf="option$ | async; let option">
          <ng-container *ngIf="option === 'pick-up'">
            Abholung ab {{ (getAvailability(option) | async)?.estimatedShippingDate | date: 'shortDate' }}
          </ng-container>
          <ng-container *ngIf="showDeliveryInfo$ | async">
            <ng-container *ngIf="getAvailability(option) | async; let availability">
              <ng-container *ngIf="availability?.estimatedDelivery; else estimatedShippingDate">
                Zustellung zwischen {{ (availability?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
                {{ (availability?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}
              </ng-container>
              <ng-template #estimatedShippingDate> Versanddatum {{ availability?.estimatedShippingDate | date: 'shortDate' }} </ng-template>
            </ng-container>
          </ng-container>
        </div>
      </div>
      <div class="quantity">
        <div class="row">
          <ui-quantity-dropdown
            #quantityControl
            [showSpinner]="purchasingOptionsModalStore.selectFetchingAvailability | async"
            [ngModel]="quantity$ | async"
            [range]="quantityRange$ | async"
            (ngModelChange)="changeQuantity($event)"
          >
          </ui-quantity-dropdown>
          <button *ngIf="!quantityControl?.customInput" (click)="backToSetOptions()" class="cta-modify">Ändern</button>
        </div>
        <div class="quantity-error" *ngIf="quantityError$ | async; let message">{{ message }}</div>
      </div>
    </div>
    <div class="custom-price" *ngIf="showCustomPrice$ | async">
      <page-purchasing-options-modal-price-input
        (priceChanged)="changeCustomPrice($event)"
        (vatChanged)="changeCustomVat($event)"
      ></page-purchasing-options-modal-price-input>
    </div>
    <hr />
    <div class="summary-row" *ngIf="quantity$ | async; let quantity">
      <div class="reading-points">
        {{ quantity }} Artikel
        <ng-container *ngIf="promoPoints$ | async; let promoPoints"> | {{ promoPoints }} Lesepunkte </ng-container>
      </div>
      <div class="subtotal">
        Zwischensumme
        {{ (price$ | async) * quantity | currency: item?.catalogAvailability?.price?.value?.currency || 'EUR':'code' }}
        <div class="shipping-cost" *ngIf="showDeliveryInfo$ | async">
          ohne Versandkosten
        </div>
      </div>
    </div>
  </div>
  <div class="actions" *ngIf="option$ | async; let option">
    <button
      *ngIf="canContinueShopping$ | async"
      class="cta-continue-shopping"
      [disabled]="(fetching$ | async) || (canContinueShopping$ | async) === false || (customPriceInvalid$ | async) === true"
      (click)="continue('continue-shopping')"
    >
      Weiter einkaufen
    </button>
    <button *ngIf="canUpgrade$ | async" class="cta-upgrade-customer" (click)="continue('add-customer-data')">
      Kundendaten hinzufügen
    </button>
    <button
      *ngIf="showTakeAwayButton$ | async"
      [disabled]="(fetching$ | async) || (canAdd$ | async) === false || (customPriceInvalid$ | async) === true"
      class="cta-continue"
      (click)="continue()"
    >
      Reservieren
    </button>
    <button
      *ngIf="showDefaultContinueButton$ | async"
      class="cta-continue"
      (click)="continue()"
      [disabled]="(fetching$ | async) || (canAdd$ | async) === false || (customPriceInvalid$ | async) === true"
    >
      Fortfahren
    </button>
    <button *ngIf="showContinueWithoutAdding$ | async" class="cta-continue" (click)="continue()">
      Ohne Artikel Fortfahren
    </button>
  </div>
</ng-container>
