<!--
  ~ Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<mat-toolbar>
  <!-- <mat-toolbar-row [class.margin-chips-next-to-commandbar-group-search-and-filters]="!filterOrSortButtonVisible"> -->
  <mat-toolbar-row [class.margin-chips-next-to-commandbar-group-search-and-filters]="!filterOrSortButtonVisible">
    <div
      #tooltip="matTooltip"
      [matTooltipHideDelay]="0"
      [matTooltipShowDelay]="100"
      [matTooltip]="tooltipText"
      matTooltipClass="tooltip-width"
      [matTooltipDisabled]="!isTextOverflow(message)"
      class="commandbar-group commandbar-group-entry-count entry-count"
      [class.active]="selectedItemCount"
      *ngIf="displayItemCount && (selectedItemCount || itemCount > -1)"
    >
      <!-- Itemcount -->
      <span #message class="text-overflow"
        ><ng-container *ngIf="selectedItemCount">{{ selectedItemCount }}/</ng-container
        ><span data-test="commandbar-item-count"
          ><ng-container *ngIf="itemCount > -1">{{ itemCount }}</ng-container>
          {{ itemCount === 1 ? intl.item : intl.items }}</span
        ></span
      >
    </div>

    <!-- Spacer -->
    <div class="fill-space" *ngIf="displayFillSpace && displayForSmallScreen"></div>

    <div
      class="commandbar-group commandbar-group-search-and-filters"
      [class.commandbar-groupsearch-fullspace]="displaySearchbarFullspace"
      [ngClass]="{
        'm-r-16': updateSearchStyling()
      }"
    >
      <!-- Searchbar -->
      <div
        *ngIf="showSearch"
        class="commandbar-search-field"
        [class.active]="selectedItemCount"
        [class.commandbar-search-field-small]="displayForSmallScreen && !displaySearchbarFullspace"
        (click)="searchbarClick()"
        (bciClickOutside)="searchbarClickOutside()"
      >
        <form [formGroup]="searchForm">
          <mat-form-field [matTooltip]="showSearchTooltip ? intl.search : ''">
            <button
              *ngIf="displayForSmallScreen && !displaySearchbarFullspace"
              type="button"
              mat-icon-button
              matPrefix
              (click)="searchSubmit()"
            >
              <mat-icon fontIcon="Bosch-Ic-search"></mat-icon>
            </button>
            <input
              matInput
              formControlName="search"
              data-test="commandbar-search-input"
              [placeholder]="intl.search"
              (focus)="focusedSearchInput = true"
              (blur)="focusedSearchInput = false"
              (keyup.enter)="searchSubmit()"
            />
            <button
              mat-icon-button
              matSuffix
              (mousedown)="removeFilter()"
              *ngIf="focusedSearchInput"
              data-test="commandbar-search-button"
            >
              <mat-icon fontIcon="bosch-ic-close-small"></mat-icon>
            </button>
            <button type="button" mat-icon-button matSuffix (click)="searchSubmit()">
              <mat-icon fontIcon="Bosch-Ic-search"></mat-icon>
            </button>
          </mat-form-field>
        </form>
      </div>

      <!-- Inline Filters -->
      <ng-content select="bci-commandbar-inlinefilters" *ngIf="displayInlineFilters" #commandbarInlinefilters>
      </ng-content>
    </div>

    <!-- Filter -->
    <div class="commandbar-group commandbar-group-filter" *ngIf="showFilter" [ngClass]="{ hidden: !displayFilter }">
      <bci-commandbar-button
        #commandbarFilterButton
        [render]="true"
        icon="Bosch-Ic-filter"
        [class.commandbar-button-active]="filterCount"
        [active]="filterCount"
        [attr.aria-label]="intl.filter"
        dataTest="commandbar-filter-button"
        (click)="filter()"
        >{{ intl.filter }}
        <ng-container *ngIf="filterCount"> ({{ filterCount }})</ng-container>
      </bci-commandbar-button>
    </div>

    <!-- Sort -->
    <div class="commandbar-group commandbar-group-sort" *ngIf="showSort" [ngClass]="{ hidden: !displaySort }">
      <bci-commandbar-button
        [render]="true"
        #commandbarSortButton
        icon="{{ sortIcon }}"
        [active]="sortDirection === 1"
        [class.commandbar-button-active]="sortDirection === 1"
        [attr.aria-label]="intl.sort"
        dataTest="commandbar-sort-button"
        (click)="sort()"
        >{{ intl.sort }}
      </bci-commandbar-button>
    </div>

    <!-- Quickfilters -->
    <ng-content select="bci-commandbar-quickfilters" *ngIf="displayQuickFilters" #commandbarQuickfilters></ng-content>

    <!-- Spacer -->
    <div #fillSpace [ngClass]="{ 'fill-space': true, hidden: !displayFillSpace || displayForSmallScreen }"></div>

    <!-- Actions -->
    <div class="commandbar-group commandbar-group-actions" *ngIf="displayActions">
      <ng-content select="bci-commandbar-actions"></ng-content>
    </div>

    <!-- More-Actions-Button -->
    <span #commandbarOptionsMenu>
      <bci-commandbar-button
        [class.m-r-0]="!showAdd"
        *ngIf="displayMenuButton && hasHiddenFilters"
        [renderLargeVariant]="false"
        [render]="true"
        data-test="commandbar-options-button"
        [moreActionsButtonBadge]="hiddenActiveFilters"
        icon="Bosch-Ic-show-more-vertical"
        [ngClass]="'options-menu'"
        (click)="openOptionsMenu()"
      >
      </bci-commandbar-button>
    </span>

    <span #commandbarAddBtn>
      <bci-commandbar-button
        bciCommandbarActionAdd
        *ngIf="showAdd"
        data-test="commandbar-add-button"
        [render]="true"
        [renderLargeVariant]="false"
        [ngClass]="'commandbar-action-add'"
        [attr.aria-label]="intl.add"
        (click)="onAdd()"
        [tooltip]="addButtonTooltip"
        [class.m-l-16]="additionalAddBtnMargin"
        [disabled]="disableAddButton"
      >
      </bci-commandbar-button>
    </span>
  </mat-toolbar-row>
</mat-toolbar>
<ng-content select="bci-commandbar-active-filters"></ng-content>
