<div
  class="shared-branch-selector-input-container"
  (click)="branchInput.focus(); openComplete()"
>
  <button
    (click)="onClose($event)"
    type="button"
    class="shared-branch-selector-input-icon p-2"
  >
    <shared-icon
      class="text-[#AEB7C1]"
      icon="magnify"
      [size]="32"
    ></shared-icon>
  </button>
  <input
    #branchInput
    class="shared-branch-selector-input"
    [class.shared-branch-selector-opend]="autocompleteComponent?.opend"
    uiInput
    type="text"
    [placeholder]="placeholder"
    [ngModel]="query$ | async"
    (ngModelChange)="onQueryChange($event)"
    (keyup)="onKeyup($event)"
  />
  @if ((query$ | async)?.length > 0) {
    <button
      class="shared-branch-selector-clear-input-icon pr-2"
      type="button"
      (click)="clear()"
    >
      <shared-icon
        class="text-[#1F466C]"
        icon="close"
        [size]="32"
      ></shared-icon>
    </button>
  }
</div>
<ui-autocomplete class="shared-branch-selector-autocomplete z-modal w-full">
  @if (autocompleteComponent?.opend) {
    <hr class="ml-3 text-[#9CB1C6]" uiAutocompleteSeparator />
  }
  @if ((filteredBranches$ | async)?.length > 0) {
    <p class="text-p2 p-4 font-normal" uiAutocompleteLabel>Filialvorschläge</p>
  }
  @for (branch of filteredBranches$ | async; track branch) {
    <button
      class="shared-branch-selector-autocomplete-option min-h-[44px]"
      [class.shared-branch-selector-selected]="value && value.id === branch.id"
      (click)="setBranch(branch)"
      [uiAutocompleteItem]="branch"
    >
      <span class="text-lg font-semibold">{{
        store.formatBranch(branch)
      }}</span>
    </button>
  }
</ui-autocomplete>
