<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->
<div class="managment-wrapper scrolling" #pageWrapper (scroll)="scrollTable($event)" (resize)="onResize($event)">
  <div class="ani scrolling scroll-wrapper" #wrapper (scroll)="scrollTable($event)">
    <div class="wrapper" #tableWrapper >
      <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6" #table >
      <ng-container matColumnDef="checkbox">
        <th mat-header-cell *matHeaderCellDef class="checkbox label-header">
          <datalab-checkbox
            class="header-checkbox"
            *ngIf="allActiveNotebooks?.length"
            [checked]="selected?.length === allActiveNotebooks?.length"
            (toggleSelection)="toggleSelectionAll()"
          >
          </datalab-checkbox>
          <button mat-icon-button aria-label="More" class="ar checkbox-border" (click)="toggleFilterRow()">
            <i class="material-icons">
  <!--            <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>-->
              <span>more_vert</span>
            </i>
          </button>
        </th>
        <td mat-cell *matCellDef="let element">
          <ng-template [ngIf]="element.type !== 'odahu' && element.type !== 'edge node' && (element.status==='running' || element.status==='stopped') && !clustersInProgress(element.resources)">
            <datalab-checkbox
              [checked]="element.isSelected"
              (toggleSelection)="toggleActionForAll(element)"
            >
            </datalab-checkbox>
          </ng-template>
        </td>
      </ng-container>

      <ng-container matColumnDef="user">
        <th mat-header-cell *matHeaderCellDef class="user label-header">
          <span class="label">User</span>
          <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
            <i class="material-icons">
              <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>
              <span [hidden]="filtering && filterForm.users.length > 0 && !collapsedFilterRow">more_vert</span>
            </i>
          </button> </th>
        <td
          mat-cell *matCellDef="let element"
          class="user-name ellipsis"
          matTooltip="{{element.user}}"
          matTooltipPosition="above"
          [matTooltipDisabled]="element.user?.length<30"
        >
          <span >{{ element.user }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="project">
        <th mat-header-cell *matHeaderCellDef class="project label-header">
          <span class="label">Project</span>
          <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
            <i class="material-icons">
              <span *ngIf="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">filter_list</span>
              <span [hidden]="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">more_vert</span>
            </i>
          </button> </th>
        <td mat-cell *matCellDef="let element">{{ element.project }}</td>
      </ng-container>

      <ng-container matColumnDef="endpoint">
        <th mat-header-cell *matHeaderCellDef class="endpoint label-header">
          <span class="label">Endpoint</span>
          <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
            <i class="material-icons">
              <span *ngIf="filtering && filterForm.endpoints.length > 0 && !collapsedFilterRow">filter_list</span>
              <span [hidden]="filtering && filterForm.endpoints.length > 0 && !collapsedFilterRow">more_vert</span>
            </i>
          </button> </th>
        <td mat-cell *matCellDef="let element">{{ element.endpoint }}</td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef class="type label-header">
          <span class="label">Name</span>
          <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
            <i class="material-icons">
              <span *ngIf="filtering && filterForm.type.length > 0 && !collapsedFilterRow">filter_list</span>
              <span [hidden]="filtering && filterForm.type.length > 0 && !collapsedFilterRow">more_vert</span>
            </i>
          </button> </th>
        <td type mat-cell *matCellDef="let element">
          <span
            *ngIf="element.name"
            [ngClass]="{'computation': element.exploratory_urls?.length}"
            (click)="openNotebookDetails(element)"
          >
            {{element.name}}
          </span>
          <span *ngIf="!element.name">{{element.type}}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="shape">
        <th mat-header-cell *matHeaderCellDef class="shape label-header">
          <span class="label">Shape / Resource id</span>
          <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
            <i class="material-icons">
              <span *ngIf="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">filter_list</span>
              <span [hidden]="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">more_vert</span>
            </i>
          </button> </th>
        <td mat-cell *matCellDef="let element" class="shape">
          <div>{{ element.shape || element.ip }}</div>
          <div *ngIf="element.gpu_type">{{ element.gpu_type }}</div>
          <div *ngIf="element.gpu_count">GPU count: {{ element.gpu_count }}</div>
        </td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef class="status label-header">
          <span class="label">Status</span>

          <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
            <i class="material-icons">
              <span *ngIf="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">filter_list</span>
              <span [hidden]="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">more_vert</span>
            </i>
          </button> </th>
        <td mat-cell *matCellDef="let element" class="ani status" >
          <span ngClass="{{element.status || ''}}">{{ element.status }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="resources">
        <th mat-header-cell *matHeaderCellDef class="resources label-header">
          <span class="label">Compute</span>
          <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
            <i class="material-icons">
              <span *ngIf="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">filter_list</span>
              <span [hidden]="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">more_vert</span>
            </i>
          </button> </th>
        <td mat-cell *matCellDef="let element" class="ani resources">
          <div class="source" *ngIf="element.resources">
            <div *ngIf="!element.resources?.length">
              <span *ngIf="!element.resources.length" class="no-details">no details</span>
            </div>
            <div *ngIf="element.resources?.length">
              <div *ngFor="let resource of element.resources" class="resource-wrap">
                <div class="resource-name">
                  <a>
                    {{ resource.computational_name }}
                  </a>
                </div>
                <span ngClass="{{resource.status || ''}}" class="resource-status">{{ resource.status }}</span>
                <div class="resource-actions">
                  <span class="not-allow">
                    <a class="start-stop-action" *ngIf="resource.image === 'docker.datalab-dataengine'">
                      <i class="material-icons" (click)="toggleResourceAction(element, 'stop', resource)"
                         [ngClass]="{'not-allowed' : resource.status !== 'running' || selected?.length }">pause_circle_outline</i>
                    </a>
                  </span>
                  <span class="not-allow">
                    <a class="remove_butt" (click)="toggleResourceAction(element, 'terminate', resource)"
                      [ngClass]="{ 'disabled' : element.status !== 'running' || (resource.status !== 'running' && resource.status !== 'stopped') || selected?.length }">
                      <i class="material-icons">highlight_off</i>
                    </a>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef class="actions label-header">
          <span class="label"> Actions </span>
        </th>
        <td mat-cell *matCellDef="let element" class="settings actions-col">
          <span [ngClass]="{'not-allow' : selected?.length}">
            <span #settings class="actions" (click)="actions.toggle($event, settings)" *ngIf="element.type !== 'edge node' && element.type !== 'odahu'"
              [ngClass]="{
                'disabled' : (element.status !== 'running' && element.status !== 'stopped')
                 || selected?.length || inProgress(element.resources)}">

            </span>
          </span>
          <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
            <ul class="list-unstyled">
              <li
                matTooltip="{{ element.type !== 'edge node' ? 'Unable to stop notebook because at least one computational resource is in progress' : 'Unable to stop edge node because at least one resource of this user is in progress' }}"
                matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)"
                [hidden]="element.name === 'edge node' && element.status === 'stopped'">
                <div (click)="toggleResourceAction(element, 'stop')"
                  [ngClass]="{'not-allowed' : element.status === 'stopped' || element.status === 'stopping' || element.status === 'starting' || element.status === 'creating image' || element.status === 'failed' || isResourcesInProgress(element)}">
                  <i class="material-icons">pause_circle_outline</i>
                  <span>Stop</span>
                </div>
              </li>
              <li *ngIf="element.name !== 'edge node'"
                matTooltip="Unable to terminate notebook because at least one compute is in progress"
                matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
                <div (click)="toggleResourceAction(element, 'terminate')"
                  [ngClass]="{'not-allowed' : element.status !== 'running' && element.status !== 'stopped' || isResourcesInProgress(element)}">
                  <i class="material-icons">phonelink_off</i>
                  <span>Terminate</span>
                </div>
              </li>

              <div *ngIf="element.name === 'edge node' && element.status === 'stopped'">
                <li (click)="toggleResourceAction(element, 'run')">
                  <i class="material-icons">play_circle_outline</i>
                  <span>Start</span>
                </li>
              </div>
            </ul>
          </bubble-up>
        </td>
      </ng-container>


      <!-- FILTERING -->
      <ng-container matColumnDef="checkbox-filter" sticky>
        <th mat-header-cell *matHeaderCellDef class="filter-row-item">

        </th>
      </ng-container>

      <ng-container matColumnDef="user-filter" sticky>
        <th mat-header-cell *matHeaderCellDef class="filter-row-item">
          <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'users'" [items]="filterConfiguration.users"
            [model]="filterForm.users"></multi-select-dropdown>
        </th>
      </ng-container>
      <ng-container matColumnDef="type-filter" sticky>
        <th mat-header-cell *matHeaderCellDef class="filter-row-item">
          <input placeholder="Filter by name" type="text" class="form-control filter-field"
            [value]="filterForm.type" (input)="onFilterNameUpdate($event.target['value'])"/>
        </th>
      </ng-container>
      <ng-container matColumnDef="project-filter" sticky>
        <th mat-header-cell *matHeaderCellDef class="filter-row-item">
          <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'projects'"
            [items]="filterConfiguration.projects" [model]="filterForm.projects"></multi-select-dropdown>
        </th>
      </ng-container>
      <ng-container matColumnDef="endpoint-filter" sticky>
        <th mat-header-cell *matHeaderCellDef class="filter-row-item">
          <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'endpoints'"
                                 [items]="filterConfiguration.endpoints" [model]="filterForm.endpoints"></multi-select-dropdown>
        </th>
      </ng-container>
      <ng-container matColumnDef="shape-filter" sticky>
        <th mat-header-cell *matHeaderCellDef class="filter-row-item">
          <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'shapes'"
            [items]="filterConfiguration.shapes" [model]="filterForm.shapes"></multi-select-dropdown>
        </th>
      </ng-container>
      <ng-container matColumnDef="status-filter" sticky>
        <th mat-header-cell *matHeaderCellDef class="filter-row-item">
          <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'"
            [items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
        </th>
      </ng-container>
      <ng-container matColumnDef="resource-filter" sticky>
        <th mat-header-cell *matHeaderCellDef class="filter-row-item">
          <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
            [items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
        </th>
      </ng-container>
      <ng-container matColumnDef="actions-filter" sticky>
        <th mat-header-cell *matHeaderCellDef  class="actions-col filter-row-item">
          <div class="actions">
            <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="!isFilterSelected">
              <i class="material-icons">close</i>
            </button>

            <button mat-icon-button class="btn apply" (click)="applyFilter(filterForm)"
              [disabled]="isFilterChanged">
              <i class="material-icons"
                [ngClass]="{'not-allowed': allFilteredEnvironmentData?.length == 0 && !filtering}">done</i>
            </button>
          </div>
        </th>
      </ng-container>


      <ng-container matColumnDef="placeholder">
        <td mat-footer-cell *matFooterCellDef colspan="8">
          <div class="info"
            *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering">
            To start working, please, create new environment</div>
          <div *ngIf="(allFilteredEnvironmentData?.length == 0) && filtering" class="info">No matches found</div>
        </td>
      </ng-container>

      <ng-container matColumnDef="scrollButtons">
          <td mat-footer-cell *matFooterCellDef colspan="9" class="buttons-wrap">
            <div class="buttons" [ngStyle]="{'width.px': tableWrapperWidth }" [hidden]="!tableWrapperWidth">
              <div class="button-container">
                <button mat-mini-fab aria-label="Scroll left"
                        (click)="sctollTo('left')"
                        [ngClass]="{'not-allowed': wrapper.scrollLeft === 0 }"
                >
                  <mat-icon [ngClass]="{'highlight': wrapper.scrollLeft !== 0 }">keyboard_arrow_left</mat-icon>
                </button>
              </div>
              <div class="button-container" [ngClass]="{'not-allowed': checkMaxRight()}">
                <button mat-mini-fab aria-label="Scroll right"
                        (click)="sctollTo('right')"

                        [ngClass]="{'not-allowed': !(isMaxRight | async)}"
                >
                  <mat-icon [ngClass]="{'highlight': (isMaxRight | async) || false}">keyboard_arrow_right</mat-icon>
                </button>
              </div>
            </div>
          </td>
        </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
      <tr [hidden]="!collapsedFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
        class="filter-row"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>


      <tr [hidden]="allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['placeholder']" class="info"></tr>
      <tr [hidden]="!tableEl || !tableEl['offsetWidth'] || tableWrapper.offsetWidth - tableEl['offsetWidth'] > -16 || !allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['scrollButtons']; sticky: true" class="info"></tr>
    </table>

    </div>
  </div>
</div>