<app-modal id="branches-overview-modal" *ngIf="item">
  <div class="modal-wrapper">
    <div class="header">
      <lib-icon (click)="closeDialog()" height="21px" class="close-icon" name="close" alt="close"></lib-icon>
    </div>
    <div class="title">
      <span>Weitere Verfügbarkeiten</span>
    </div>
    <div class="search-area">
      <app-search #searchInput (search)="filter($event)" (empty)="filter()" placeholder="PLZ, Ort" error="{{ error }}"></app-search>
    </div>
    <div class="sub-title">
      <span
        ><b>{{ item.product.name }}</b> ist in den <b>Umkreisfilialen</b> folgendermaßen verfügbar:</span
      >
    </div>
    <div class="result-container">
      <hr />
      <ng-container *ngFor="let branch of filteredBranchInfos">
        <div class="result-row">
          <span
            ><b>{{ branch.name }}</b></span
          >
          <span>{{ branch.address }}</span>
          <div class="quantity-wrapper">
            <div class="quantity-icon">
              <lib-icon name="House_Icon_blue" height="22px"></lib-icon>
            </div>
            <span
              ><b>{{ branch.availability }}x</b></span
            >
          </div>
        </div>
        <hr />
      </ng-container>
    </div>
  </div>
</app-modal>
