<app-modal id="checkout-modal">
  <div class="modal-step-1" *ngIf="stepOne && !isDownload">
    <div class="header">
      <h1>Wie möchten Sie den Artikel erhalten?</h1>
      <lib-icon (click)="closeModal()" class="close-icon" height="21px" name="close" alt="close"></lib-icon>
    </div>
    <div class="body">
      <div class="option" *ngIf="takeNowAvailable | async">
        <div class="option__top-container">
          <lib-icon class="img img-now" name="Take_now" alt="take now" width="47px" height="37px"></lib-icon>
          <h2 class="title-take-now">Rücklage</h2>
          <span class="description description-take-now">Möchten Sie den Artikel zurücklegen lassen?</span>
        </div>
        <div>
          <span class="price price-take-now">{{ price | bookPrice }} {{ currency }}</span>
          <app-button [primary]="true" [outline]="true" class="modal-btn" (action)="selectedAction(deliveryOptions.now)"
            >Auswählen</app-button
          >
        </div>
      </div>
      <div class="option" *ngIf="(storeAvailable | async) || searchingNewBranch">
        <div class="option__top-container">
          <lib-icon class="img" name="Package_Icon" alt="package" width="47px" height="37px"></lib-icon>
          <h2>Abholung</h2>
          <span class="description description-take-away">Möchten Sie den Artikel in einer unserer Filialen abholen?</span>
          <div class="option__content-container">
            <lib-search-dropdown
              [selected]="currentLocation"
              [options]="filteredBranches"
              (valueChanges)="selectLocation($event)"
              (search)="branchSearch($event)"
              class="location location-dropdown"
              [left]="!(shippingAvailable | async) ? '-50px' : '0'"
              [load]="true"
              #branchesdropdown
            >
            </lib-search-dropdown>
            <span class="location location-date" *ngIf="!branchLoad">Abholung ab {{ currentPickUpDate }}</span>
          </div>
        </div>
        <div>
          <span class="price price-take-away">{{ pickUpPrice | bookPrice }} {{ currency }}</span>
          <app-button [primary]="true" [outline]="true" class="modal-btn" (action)="selectedAction(deliveryOptions.pick_up)"
            >Auswählen
          </app-button>
        </div>
      </div>
      <div class="option" *ngIf="shippingAvailable | async">
        <div class="option__top-container">
          <lib-icon class="img img-truck" name="truck_Icon" alt="truck" width="47px" height="37px"></lib-icon>
          <h2>Versand</h2>
          <span class="description description-delivery">Möchten Sie den Artikel nach Hause geliefert bekommen?</span>
          <div class="delivery">
            <lib-icon class="check" name="Check-green" height="13px" width="17px" alt="arrow"></lib-icon>
            ohne Versandkosten
          </div>
          <span class="delivery-date">Versanddatum {{ currentDeliveryDate }}</span>
        </div>
        <div>
          <span class="price price-order">{{ deliverPrice | bookPrice }} {{ currency }}</span>
          <app-button [primary]="true" [outline]="true" class="modal-btn" (action)="selectedAction(deliveryOptions.delivery)"
            >Auswählen</app-button
          >
        </div>
      </div>
    </div>
  </div>

  <div class="modal-step-2" *ngIf="!stepOne || isDownload">
    <div class="header">
      <h1>Artikel wurde dem Warenkorb hinzugefügt</h1>
      <lib-icon (click)="closeModal()" class="close-icon" height="21px" name="close" alt="close"></lib-icon>
    </div>
    <div class="modal-body">
      <div class="body-heading">
        <lib-icon
          (click)="closeModal()"
          class="close-icon img"
          width="23px"
          height="23px"
          name="{{ stepTwoImgType }}"
          alt="truck"
        ></lib-icon>
        <h1 *ngIf="!isDownload">{{ deliveryType }}</h1>
        <h1 *ngIf="isDownload">Download</h1>
      </div>
      <hr />
      <div class="body-content">
        <div class="item-row">
          <img src="{{ book.imageId | bookImageUrl | async }}" alt="book" class="thumbnail" />
          <span class="book-title">{{ book.product.name }}</span>
          <div class="order-details">
            <span>
              <lib-icon class="order-book-icon" width="13px" height="18px" name="Icon_{{ book.product.format }}" alt="book-icon"></lib-icon>
              {{ book.product.manufacturer }} I {{ book.product.contributors }}</span
            >
            <!-- TODO: populate here with delivery info like DHL I Lieferung 18.01.-->
            <span
              class="order-details-delivery-info"
              *ngIf="
                deliveryType === 'Donwload' ||
                deliveryType === 'Rücklage' ||
                deliveryType === 'Versand' ||
                !currentDeliveryDate ||
                deliveryType === 'Abholung' ||
                !currentPickUpDate
              "
            ></span>
            <span class="order-details-delivery-info" *ngIf="deliveryType === 'Versand' && currentDeliveryDate"
              >Versand {{ currentDeliveryDate }}</span
            >
            <span class="order-details-delivery-info" *ngIf="deliveryType === 'Abholung' && currentPickUpDate"
              >Abholung ab {{ currentPickUpDate }}</span
            >
          </div>
          <span class="price">{{ selectedPrice | bookPrice }} {{ currency }}</span>
          <app-delete-dropdown
            [selected]="currentNumberOfItems"
            [options]="possibleItems"
            (valueChanges)="setNumberOfItems($event)"
            (delete)="deleteProduct()"
            (switch)="switchSteps(true)"
            [ddload]="true"
            [notUpdatable]="isDownload"
            #deleteDropdown
          ></app-delete-dropdown>
        </div>
        <div class="secondary-info">
          <div class="errors">
            <span *ngIf="quantityError">{{ quantityError }}</span>
          </div>
        </div>
      </div>
      <div></div>
      <hr class="line bottom-line" />
      <div class="overview">
        <span class="items">{{ displayItemsNumber }} Artikel I {{ currentPoints }} Lesepunkte</span>
        <div class="overview-price-container">
          <span class="overview-price">Zwischensumme {{ selectedPrice | bookPrice: currentNumberOfItems }} {{ currency }}</span>
          <span *ngIf="deliveryType === 'Versand'" class="overview-tax">ohne Versandkosten</span>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <app-button (action)="updateCart()" [disabled]="(addItemsToCartDisabled || loading) && !isDownload">Weiter einkaufen</app-button>
      <app-button [primary]="true" [disabled]="(addItemsToCartDisabled || loading) && !isDownload" (action)="itemsConfirmed()">{{
        confirmationBtnText
      }}</app-button>
    </div>
  </div>
</app-modal>
