<!--
  ~ Copyright (C) 2023 Robert Bosch GmbH Copyright (C) 2023 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->
<div class="dialog-content-wrapper">
  <div class="dialog-header">
    <div class="dialog-title-icon">
      <div class="dialog-title">
        {{ intl.title }}
        {{ totalActiveCount > 0 ? '(' + totalActiveCount + ')' : '' }}
      </div>
    </div>
    <div>
      <button class="close-button" mat-icon-button (click)="closeModal()" data-test="modal-window-close-button">
        <i class="Bosch-Ic Bosch-Ic-abort"></i>
      </button>
    </div>
  </div>
  <mat-dialog-content>
    <mat-form-field appearance="fill" style="width: 100%">
      <input
        matInput
        [placeholder]="'Search'"
        [(ngModel)]="searchInput"
        (focus)="isSearchInputFocused = true"
        (blur)="isSearchInputFocused = false"
        (keyup.enter)="searchSubmit()"
      />
      <button mat-icon-button matSuffix (mousedown)="removeFilter()" *ngIf="isSearchInputFocused">
        <mat-icon fontIcon="bosch-ic-close-small"></mat-icon>
      </button>
      <button mat-icon-button matSuffix (click)="searchSubmit()">
        <mat-icon fontIcon="Bosch-Ic-search"></mat-icon>
      </button>
    </mat-form-field>
    <mat-tab-group
      class="bci-filter-tab-group"
      (selectedTabChange)="onSelectedTabChange($event)"
      animationDuration="0ms"
      [bciTabNavigationCustomPadding]="0"
    >
      <mat-tab *ngFor="let tab of tabLabelValue; let i = index">
        <ng-template mat-tab-label
          >{{ tab.label }} {{ tab.activeCount > 0 ? '(' + tab.activeCount + ')' : '' }}</ng-template
        >
        <ng-template matTabContent>
          <div *ngIf="!tab.showEmptyState"><ng-content></ng-content></div>
          <ng-container *ngIf="tab.showEmptyState">
            <bci-empty-state>
              <div class="empty-state">
                <mat-icon fontIcon="bosch-ic-emoji-sad"></mat-icon>
                <span class="text-center" [innerHTML]="intl.filterEmptyState"></span>
              </div>
            </bci-empty-state>
          </ng-container>
        </ng-template>
      </mat-tab>
    </mat-tab-group>
  </mat-dialog-content>
</div>
<mat-dialog-actions>
  <button
    bciSecondaryButton
    class="optionalButton"
    (click)="onClickResetfilters()"
    [disabled]="!bciFilterService.activateResetAllBtn"
  >
    <mat-icon fontIcon="bosch-ic-reset"></mat-icon>{{ intl.resetAll }}
  </button>
  <button
    bciPrimaryButton
    (click)="applyFilters()"
    class="action-button"
    [disabled]="!bciFilterService.activateApplyBtn"
  >
    {{ intl.apply }}
  </button>
  <button bciSecondaryButton (click)="closeModal()" class="action-button">
    {{ intl.cancel }}
  </button>
</mat-dialog-actions>
