<!--
  ~ 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="ani">
  <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6">
    <ng-container matColumnDef="user">
      <th mat-header-cell *matHeaderCellDef class="user">
        <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">{{ element.user }}</td>
    </ng-container>

    <ng-container matColumnDef="project">
      <th mat-header-cell *matHeaderCellDef class="project">
        <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="type">
      <th mat-header-cell *matHeaderCellDef class="type">
        <span class="label">Type</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 mat-cell *matCellDef="let element">{{ element.name || element.type }}</td>
    </ng-container>

    <ng-container matColumnDef="shape">
      <th mat-header-cell *matHeaderCellDef class="shape">
        <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">{{ element.shape || element.ip }}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef class="status">
        <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">
        <span class="label">Computational resources</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 class="detailed-link">
                  {{ resource.computational_name }}
                </a>
              </div>
              <span ngClass="{{resource.status || ''}}" class="resource-status">{{ resource.status }}</span>
              <div class="resource-actions">
                <a class="start-stop-action" *ngIf="resource.image === 'docker.dlab-dataengine'">
                  <i class="material-icons" (click)="toggleResourceAction(element, 'stop', resource)"
                    [ngClass]="{'not-allowed' : resource.status !== 'running' }">pause_circle_outline</i>
                </a>

                <a class="remove_butt" (click)="toggleResourceAction(element, 'terminate', resource)"
                  [ngClass]="{ 'disabled' : element.status !== 'running' || resource.status !== 'running' && resource.status !== 'stopped' }">
                  <i class="material-icons">highlight_off</i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef class="actions">
        <span class="label"> Actions </span>
      </th>
      <td mat-cell *matCellDef="let element" class="settings actions-col">
        <span #settings class="actions" (click)="actions.toggle($event, settings)" *ngIf="element.type !== 'edge node'"
          [ngClass]="{
            'disabled' : isActiveResources(element),
            'disabled' : element.status !== 'running' && element.status !== 'stopped' && element.status !== 'stopping' && element.status !== 'failed' }"></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 computational resource 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="user-filter" sticky>
      <th mat-header-cell *matHeaderCellDef>
        <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>
        <input placeholder="Filter by environment type" type="text" class="form-control filter-field"
          [value]="filterForm.type" (input)="filterForm.type = $event.target.value" />
      </th>
    </ng-container>
    <ng-container matColumnDef="project-filter" sticky>
      <th mat-header-cell *matHeaderCellDef>
        <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'projects'"
          [items]="filterConfiguration.projects" [model]="filterForm.projects"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="shape-filter" sticky>
      <th mat-header-cell *matHeaderCellDef>
        <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>
        <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>
        <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">
        <div class="actions">
          <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()">
            <i class="material-icons">close</i>
          </button>

          <button mat-icon-button class="btn apply" (click)="applyFilter(filterForm)"
            [disabled]="allFilteredEnvironmentData?.length == 0 && !filtering">
            <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="6" class="info">
        <span
          *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering">
          To start working, please, create new environment</span>
        <span *ngIf="(allFilteredEnvironmentData?.length == 0) && filtering">No matches found</span>
      </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']"></tr>
  </table>

</div>