<ng-container *ngIf="item$ | async; let item">
  <ng-container *ngIf="availability$ | async; let availability">
    <div class="option-icon">
      <ui-icon size="50px" icon="box_out"></ui-icon>
    </div>
    <h4>Abholung</h4>
    <p>
      Möchten Sie den Artikel in einer unserer Filialen abholen?
    </p>
    <span class="price" *ngIf="price$ | async; let price">{{ price?.value?.value | currency: price?.value?.currency:'code' }}</span>
    <ui-branch-dropdown
      [branches]="branches$ | async"
      [selected]="selected$ | async"
      (selectBranch)="selectBranch($event)"
    ></ui-branch-dropdown>
    <span class="date"
      >Abholung ab <strong>{{ (availability$ | async)?.estimatedShippingDate | date: 'shortDate' }}</strong></span
    >
    <div class="grow"></div>
    <div>
      <button [disabled]="availability.price?.value?.value < 0" type="button" class="select-option" (click)="select()">
        Auswählen
      </button>
    </div>
  </ng-container>
</ng-container>
