<ng-container *ngIf="item$ | async; let item">
  <ng-container *ngIf="availability$ | async; let availability">
    <div class="option-icon">
      <ui-icon size="50px" icon="truck"></ui-icon>
    </div>
    <h4>Versand</h4>
    <p>
      Möchten Sie den Artikel geliefert bekommen?
    </p>
    <div class="price-wrapper">
      <span class="price" *ngIf="price$ | async; let price">{{ price?.value?.value | currency: price?.value?.currency:'code' }}</span>
      <ng-container *ngIf="showTooltip$ | async">
        <button [uiOverlayTrigger]="tooltipContent" #tooltip="uiOverlayTrigger" class="info-tooltip-button" type="button">
          i
        </button>
        <ui-tooltip #tooltipContent yPosition="above" xPosition="after" [yOffset]="-16">
          Günstigerer Preis aus Hugendubel Katalog wird übernommen
        </ui-tooltip>
      </ng-container>
    </div>
    <div class="grow"></div>
    <span class="delivery">Versandkostenfrei</span>
    <span *ngIf="availability?.estimatedDelivery; else estimatedShippingDate" class="date">
      Zustellung zwischen <br />
      <strong
        >{{ (availability?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
        {{ (availability?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}</strong
      >
    </span>
    <ng-template #estimatedShippingDate>
      <span class="date">
        Versanddatum <strong>{{ estimatedShippingDate | date }}</strong>
      </span>
    </ng-template>
    <div>
      <button [disabled]="availability.price?.value?.value < 0" type="button" class="select-option" (click)="select()">
        Auswählen
      </button>
    </div>
  </ng-container>
</ng-container>
