<ui-searchbox>
  <input #input [ngModel]="search$ | async" uiSearchboxInput type="text" placeholder="PLZ, Ort" (keydown.enter)="filter(input.value)" />
  <button
    [class.hide]="branchesFetching$ | async"
    type="submit"
    uiSearchboxSearchButton
    (click)="filter(input.value)"
    [disabled]="branchesFetching$ | async"
  >
    <ui-icon class="spin" *ngIf="branchesFetching$ | async" icon="spinner" size="32px"></ui-icon>
    <ui-icon *ngIf="!(branchesFetching$ | async)" icon="search" size="24px"></ui-icon>
  </button>
  <button *ngIf="input.value" type="reset" uiSearchboxClearButton (click)="filter(''); input.value = ''">
    <ui-icon icon="close" size="22px"></ui-icon>
  </button>
</ui-searchbox>

<p class="subtitle">
  <span class="bold">{{ item.product?.name }}</span> ist in den <span class="bold">Umkreisfilialen</span> folgendermaßen verfügbar:
</p>

<hr />

<div class="branches">
  <ng-container *ngFor="let branch of filteredBranches$ | async">
    <div class="branch">
      <div class="branch-info">
        <span class="branch-name">
          {{ branch.name }}
        </span>
        <span class="branch-address">
          {{ branch.address.street }} {{ branch.address.streetNumber }}, {{ branch.address.zipCode }}
          {{ branch.address.city }}
        </span>
      </div>

      <div class="branch-actions">
        <button *ngIf="(branch.id | stockInfo: (inStock$ | async))?.availableQuantity > 0" class="cta-reserve" (click)="reserve(branch)">
          Reservieren
        </button>

        <ui-spinner [show]="stockFetching$ | async">
          <span class="branch-stock">
            <ui-icon icon="home" size="22px"></ui-icon>

            <span>{{ branch.id | inStock: (inStock$ | async) }}x</span>
          </span>
        </ui-spinner>
      </div>
    </div>
    <hr />
  </ng-container>
</div>
