<div class="department-windreamsearch">
  <label class="label">{{windreamSearchList._listName}}</label>
  <section class="toolbar">
    <div class="toolbar-button-row">
      <div class="toolbar-flex-container">
        <button mat-icon-button title="Hinzufügen" (click)=addItem()
          [disabled]="!(departmentDetails.inEditMode
                      && !departmentDetails.entityIsLoading
                      && windreamSearchList.focusedEntityShadowed.enabledNewButton())">
          <mat-icon>add</mat-icon>
        </button>
        <!-- <button mat-icon-button title="Bearbeiten" (click)=editItem()
                    [disabled]="!departmentDetails.inEditMode || windreamSearchList.focusedItemId===0 || !windreamSearchList.focusedEntityShadowed.enabledEditButton()">
                    <mat-icon>edit</mat-icon>
                </button> -->
        <button mat-icon-button title="Kopiere alle Windream-Kacheln zu anderen Abteilungen" (click)="copyAllTiles()"
          [disabled]="!(windreamSearchList.items.length>0
                    && !departmentDetails.entityIsLoading)">
          <mat-icon>copy_all</mat-icon>
        </button>
        <button mat-icon-button title="Füge die aktuelle Windream-Kachel zu anderen Abteilungen hinzu" (click)="copyCurrentTile()"
          [disabled]="!(!departmentDetails.entityIsLoading
                    && !windreamSearchList.focusedEntityShadowed.isNew)">
          <mat-icon>content_copy</mat-icon>
        </button>
        <button mat-icon-button title="Löschen"
          (click)=windreamSearchList.focusedEntityShadowed.delete();
          [disabled]="!(departmentDetails.inEditMode
                      && !departmentDetails.entityIsLoading
                      && !windreamSearchList.focusedEntityShadowed.isNew
                      && windreamSearchList.focusedEntityShadowed.enabledDeleteButton())">
          <mat-icon>delete</mat-icon>
        </button>
        <button mat-icon-button title="Vorrücken"
          (click)="departmentDataService.moveUpDown(-1, windreamSearchList)"
          [disabled]="!(departmentDetails.inEditMode
                      && !departmentDetails.entityIsLoading
                      && !windreamSearchList.focusedEntityShadowed.isNew
                      && windreamSearchList.focusedItemIndex>0)">
          <mat-icon>keyboard_arrow_up</mat-icon>
        </button>
        <button mat-icon-button title="Hinterrücken" class="toolbar-button-last"
          (click)="departmentDataService.moveUpDown(1, windreamSearchList)"
          [disabled]="!(departmentDetails.inEditMode
                      && !departmentDetails.entityIsLoading
                      && !windreamSearchList.focusedEntityShadowed.isNew
                      && windreamSearchList.focusedItemIndex<windreamSearchList.items.length-1)">
          <mat-icon>keyboard_arrow_down</mat-icon>
        </button>
      </div>
    </div>
  </section>
  <dx-data-grid
    name="windreamSearchGrid"
    [class]="'grid'+(columnConfigList.withExport ? ' withexport' : '')"
    [dataSource]="windreamSearchList.items"
    keyExpr="entityId"
    [(focusedRowIndex)]=windreamSearchList.focusedItemGridIndex
    [focusedRowEnabled]="true"
    [autoNavigateToFocusedRow]="true"
    [(focusedRowKey)]="windreamSearchList.focusedItemId"
    [(selectedRowKeys)]="windreamSearchList.selectedItemIds"
    [showBorders]="true"
    [allowColumnResizing]="true"
    columnResizingMode="widget"
    noDataText="Keine Daten sind vorhanden"
    [renderAsync]="true"
    (onKeyDown)="$event.handled = $event.event.key==='Escape'"
    (onExporting)="globals.doExcelExportSimple($event, windreamSearchList.getExportFilename4List())">

    <dxo-export [enabled]="columnConfigList.withExport" [texts]="{exportAll: 'Excel Export'}"></dxo-export>
    <dxo-header-filter [visible]="true"></dxo-header-filter> -->
    <dxo-filter-row [visible]="false" [applyFilter]="true"></dxo-filter-row>
    <dxo-paging [enabled]="false"></dxo-paging>
    <dxo-scrolling mode="virtual"></dxo-scrolling>
    <dxo-load-panel [enabled]="true"></dxo-load-panel>
    <dxo-sorting mode="multiple"></dxo-sorting>
    <dxo-selection mode="none"></dxo-selection>

    <ng-container *ngFor="let column of columnConfigList.columns">
      <ng-container *ngIf="column.visible">
        <dxi-column [allowHeaderFiltering]=column.allowHeaderFiltering [dataField]=column.dataField
          [dataType]=column.dataType [caption]=column.caption [width]=column.width
          [sortIndex]=column.sortIndex [sortOrder]=column.sortOrder [visibleIndex]=column.visibleIndex
          [visible]=column.visible [fixed]=column.fixed [headerCellTemplate]=column.headerCellTemplate
          [cellTemplate]=column.cellTemplate [allowSorting]=column.allowSorting
          [calculateCellValue]=column.calculateCellValue [calculateDisplayValue]=column.calculateDisplayValue
          [calculateGroupValue]=column.calculateGroupValue [calculateSortValue]=column.calculateSortValue
          [alignment]=column.alignment>
          <dxo-format *ngIf="column.dataType == 'date'" [type]=localeService.dateFormat></dxo-format>
          <dxo-format *ngIf="column.dataType == 'datetime'" [type]=localeService.dateTimeFormat></dxo-format>
        </dxi-column>
      </ng-container>
    </ng-container>
    <div *dxTemplate="let cell of 'checkbox_template'">
      <mat-checkbox #checkbox [checked]="cell.value"
        (click)="changeKeyWS(cell.data)"
        [disabled]="!departmentDetails.inEditMode"></mat-checkbox>
    </div>
    <div *dxTemplate="let cell of 'numberTemplate_0'">
      {{cell.value | number:'1.0-0':culture}}
    </div>
    <div *dxTemplate="let cell of 'numberTemplate_1'">
      {{cell.value | number:'1.1-1':culture}}
    </div>
    <div *dxTemplate="let cell of 'numberTemplate_2'">
      {{cell.value | number:'1.2-2':culture}}
    </div>
    <div *dxTemplate="let cell of 'numberTemplate_3'">
      {{cell.value | number:'1.3-3':culture}}
    </div>
  </dx-data-grid>
</div>
