<ui-dropdown
  class="max-w-64"
  [value]="selected()"
  [appearance]="appearance()"
  label="Filiale auswählen"
  [disabled]="disabled()"
  [equals]="equals"
  (valueChange)="onSelectionChange($event)"
  data-what="branch-dropdown"
  data-which="select-branch"
  aria-label="Select branch"
>
  <ui-dropdown-filter placeholder="Filiale suchen..."></ui-dropdown-filter>
  @for (branch of options(); track branch.id) {
    <ui-dropdown-option
      [value]="branch"
      [attr.data-what]="'branch-option'"
      [attr.data-which]="branch.id"
    >
      {{ branch.key }} - {{ branch.name }}
    </ui-dropdown-option>
  } @empty {
    <ui-dropdown-option [value]="null" [disabled]="true">
      Keine Filialen verfügbar
    </ui-dropdown-option>
  }
</ui-dropdown>
