<app-modal id="{{ id }}">
  <div class="modal-step-1">
    <div class="header">
      <h1>Wie möchten Sie den Artikel erhalten?</h1>
      <div (click)="closeModal()">
        <lib-icon class="close-icon" height="21px" name="close" alt="close"></lib-icon>
      </div>
    </div>
    <div class="body">
      <div class="option" *ngIf="takeNowAvailable | async">
        <lib-icon class="img img-now" name="Take_now" alt="take now"></lib-icon>
        <h2 class="title-take-now">Rücklage</h2>
        <span class="description description-take-now">Möchten Sie den Artikel jetzt gleich mit nach Hause nehmen?</span>
        <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 class="option" *ngIf="(storeAvailable | async) || searchingNewBranch">
        <lib-icon class="img" name="Package_Icon" alt="package"></lib-icon>
        <h2>Abholung</h2>
        <span class="description description-take-away">Möchten Sie den Artikel in einer unserer Filialen abholen?</span>

        <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-take-away" *ngIf="!branchLoad">Abholung ab {{ currentPickUpDate }}</span>
        <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 class="option" *ngIf="shippingAvailable | async">
        <lib-icon class="img img-truck" name="truck_Icon" alt="truck"></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>
        <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>
</app-modal>
