<div (click)="isOpen = false" [class.backdrop]="isOpen"></div>
<div *ngIf="branches" class="wrapper">
  <div class="select-wrapper">
    <button
      class="select-button"
      [class.select-button-selected]="isOpen"
      (click)="open()"
      type="button"
      cdkOverlayOrigin
      #trigger="cdkOverlayOrigin"
    >
      <span>{{ selected ?? 'Filiale auswählen' }}</span>
      <div class="arrow-icon">
        <ui-icon size="15px" icon="arrow_head"></ui-icon>
      </div>
    </button>
  </div>

  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="isOpen">
    <div class="dropdown-wrapper">
      <div class="search-input">
        <input
          (ngModelChange)="filter($event)"
          [(ngModel)]="searchFilter"
          class="searchbox"
          type="text"
          placeholder="Suche nach Filialnamen"
          (keydown)="onKeydown($event)"
        />
        <button class="search-icon">
          <ui-icon size="15px" icon="search"></ui-icon>
        </button>
      </div>
      <ul #list (closeDropdown)="isOpen = false" class="list">
        <li *ngFor="let branch of filteredBranches">
          <ui-branch-dropdown-item
            [branch]="branch"
            [isSelected]="selected === branch?.name"
            (click)="setBranch(branch)"
          ></ui-branch-dropdown-item>
        </li>
      </ul>
    </div>
  </ng-template>
</div>
