<ui-toolbar>
  <span class="text-isa-neutral-600 isa-text-body-2-regular">Sortieren</span>
  <div class="flex-grow"></div>
  @for (orderBy of orderByOptions(); track orderBy.by) {
    <button
      class="flex flex-grow-0 gap-1 items-center text-nowrap"
      uiTextButton
      type="button"
      (click)="toggleOrderBy(orderBy)"
      data-what="sort-button"
      [attr.data-which]="orderBy.by"
    >
      <div>
        {{ orderBy.label }}
      </div>
      @if (orderBy.currentDir) {
        <ng-icon [name]="orderBy.currentDir" size="1.25rem"></ng-icon>
      } @else {
        <div class="w-5 h-5"></div>
      }
    </button>
  }
</ui-toolbar>
