<div class="d-flex gap-16 p-l-4 p-l-24 p-r-24">
  @if (!useTabs) {
    <div class="p-b-8 separator-bottom sticky-top p-t-4">
      @for (checkbox of checkboxesState; track $index) {
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            [checked]="checkbox.value"
            [indeterminate]="checkbox.indeterminate"
            (click)="onCheckboxChange($event, checkbox)"
            [attr.disabled]="checkbox.isDisabled ? true : null"
          />
          <span></span>
          <span>{{ checkbox.label | translate }}</span>
        </label>
      }
    </div>
  }
</div>

@if (useTabs) {
  <c8y-tabs-outlet
    class="elevation-none"
    outletName="searchTabs"
    orientation="horizontal"
  ></c8y-tabs-outlet>
}

<c8y-tab
  [icon]="'asterisk-key'"
  [title]="'All devices, assets and groups' | translate"
  [isActive]="selectedTab === tabNames.all"
  [tabsOutlet]="'searchTabs'"
  [label]="tabNames.all | translate"
  [priority]="1000"
  (onSelect)="onTabChange(tabNames.all)"
></c8y-tab>
<c8y-tab
  [icon]="'exchange'"
  [title]="'Devices only' | translate"
  [isActive]="selectedTab === tabNames.devices"
  [tabsOutlet]="'searchTabs'"
  [label]="tabNames.devices | translate"
  [priority]="750"
  (onSelect)="onTabChange(tabNames.devices)"
></c8y-tab>
<c8y-tab
  [icon]="'c8y-modules'"
  [title]="'Assets and groups only' | translate"
  [isActive]="selectedTab === tabNames.groupsAndAssets"
  [tabsOutlet]="'searchTabs'"
  [label]="tabNames.groupsAndAssets | translate"
  [priority]="500"
  (onSelect)="onTabChange(tabNames.groupsAndAssets)"
></c8y-tab>

@if (useTabs && (context$ | async)?.contextData?.name) {
  <div class="p-l-48 p-t-8 d-flex a-i-center">
    <span translate>Search only in`specified group or asset`</span>
    <span class="text-bold p-l-4">{{ (context$ | async)?.contextData?.name }}</span>
    <label
      class="m-l-8 c8y-switch c8y-switch--inline"
      [title]="'Search only within the current group or asset hierarchy' | translate"
    >
      <input
        [attr.aria-label]="'Search only within the current group or asset hierarchy' | translate"
        type="checkbox"
        [ngModel]="isOnlyHierarchyQuery"
        (ngModelChange)="onHierarchyQueryChange($event)"
      />
      <span></span>
    </label>
  </div>
}