@if (showSearch) {
  <div class="form-group p-16 m-b-0 d-flex sticky-top bg-component">
    <div class="input-group input-group-search">
      <input
        class="form-control"
        [attr.aria-label]="'Search properties' | translate"
        placeholder="{{ 'Search properties' | translate }}"
        role="searchbox"
        type="search"
        autocomplete="off"
        [(ngModel)]="inputText"
        (input)="onSearch()"
        #filter
      />
      @if (filter.value.length === 0) {
        <span
          class="input-group-addon"
          [attr.aria-hidden]="true"
        >
          <i
            class="dlt-c8y-icon-search"
            [c8yIcon]="'search'"
          ></i>
        </span>
      }
      @if (filter.value.length > 0) {
        <span
          class="input-group-addon"
          [attr.aria-hidden]="true"
        >
          <i
            class="text-muted dlt-c8y-icon-times"
            [c8yIcon]="'times'"
            [attr.aria-label]="'Clear search' | translate"
            tabindex="0"
            role="button"
            (click)="clearSearch()"
          ></i>
        </span>
      }
    </div>
  </div>
}

@if (showTabBar) {
  <c8y-tabs-outlet
    class="elevation-none m-b-16 p-sticky bg-component d-block"
    [outletName]="tabsOutletName"
    orientation="horizontal"
  ></c8y-tabs-outlet>

  @if (showAsset) {
    <c8y-tab
      [isActive]="selectedTab === 'asset'"
      [tabsOutlet]="tabsOutletName"
      [priority]="1100"
      (onSelect)="onTabChange('asset')"
    >
      <i [c8yIcon]="'cube'"></i>
      <span>
        {{ tabNames.asset | translate }}
        <span
          class="m-l-4 badge badge-default flex-no-shrink"
          aria-live="assertive"
        >
          {{ assetCount }}
        </span>
      </span>
    </c8y-tab>
  }

  @if (showRegular) {
    <c8y-tab
      [isActive]="selectedTab === 'regular'"
      [tabsOutlet]="tabsOutletName"
      [priority]="1000"
      (onSelect)="onTabChange('regular')"
    >
      <i [c8yIcon]="'new-property'"></i>
      <span>
        {{ tabNames.regular | translate }}
        <span
          class="m-l-4 badge badge-default flex-no-shrink"
          aria-live="assertive"
        >
          {{ regularCount }}
        </span>
      </span>
    </c8y-tab>
  }

  @if (showComputed) {
    <c8y-tab
      [isActive]="selectedTab === 'computed'"
      [tabsOutlet]="tabsOutletName"
      [priority]="900"
      (onSelect)="onTabChange('computed')"
    >
      <i [c8yIcon]="'bolt'"></i>
      <span>
        {{ tabNames.computed | translate }}
        <span
          class="m-l-4 badge badge-default flex-no-shrink"
          aria-live="assertive"
        >
          {{ computedCount }}
        </span>
      </span>
    </c8y-tab>
  }
}

<c8y-asset-property-list
  class="bg-component d-block"
  [config]="config"
  [extraProperties]="displayedProperties"
  (selectedProperties)="onSelectedProperties($event)"
></c8y-asset-property-list>
@if (selectedTab === 'regular') {
  <c8y-load-more
    [paging]="paging"
    [useIntersection]="true"
    (onLoad)="loadMore()"
  ></c8y-load-more>
}