<div class="purchase-options-tile__heading" [class.muted]="hasNoInStoreAvailability$ | async">
  <div class="icon-wrapper">
    <shared-icon icon="isa-box-out"></shared-icon>
  </div>
  <span class="purchase-option-name">Abholung</span>
</div>
<div class="purchase-options-tile__body" [class.muted]="hasNoInStoreAvailability$ | async">Artikel in einer unserer Filialen abholen?</div>
<div class="purchase-options-tile__actions group">
  <button type="button" class="w-[176px] flex flex-row items-center justify-between" (click)="sharedBranchSelector.focus()">
    <span class="grow text-left truncate">{{ pickupBranch$ | async | branchName }}</span>
    <span class="transition-all group-focus-within:rotate-180">
      <shared-icon icon="menu-down"></shared-icon>
    </span>
  </button>
  <shared-branch-selector
    #sharedBranchSelector
    class="absolute inset-x-0 shadow-xl invisible"
    [ngModel]="undefined"
    (ngModelChange)="setPickupBranch($event)"
    [branchType]="1"
    [orderBy]="auth.hasRole('Store') ? 'distance' : 'name'"
  ></shared-branch-selector>
</div>
