<!--
  ~ 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.
  -->

<section class="table-wrapper">
  <table mat-table [dataSource]="reportData" class="data-grid reporting mat-elevation-z6">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef class="env_name label-header">
        <div class="label"><span class="text"> Environment name</span></div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filteredReportData.dlab_id.length > 0; else dlab_id_filtered">filter_list</span>
            <ng-template #dlab_id_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element"><span class="table-item">{{element.dlabId}}</span></td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="user">
      <th mat-header-cell *matHeaderCellDef class="th_user label-header">
        <div class="sort">
          <div class="sort-arrow up" (click)="sortBy('user', 'down')" [ngClass]="{'active': !!this.active['userdown']}"></div>
          <div class="sort-arrow down" (click)="sortBy('user', 'up')" [ngClass]="{'active': !!this.active['userup']}"></div>
        </div>
        <div class="label">
          <span class="text"> User </span>
        </div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filteredReportData.users.length > 0; else user_filtered">filter_list</span>
            <ng-template #user_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef=" let element"> {{element.user}} </td>
      <td mat-footer-cell *matFooterCellDef  class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="project">
      <th mat-header-cell *matHeaderCellDef class="th_project label-header">
        <div class="sort">
          <div class="sort-arrow up" (click)="sortBy('project', 'down')" [ngClass]="{'active': !!this.active['projectdown']}"></div>
          <div class="sort-arrow down" (click)="sortBy('project', 'up')" [ngClass]="{'active': !!this.active['projectup']}"></div>
        </div>
        <div class="label"><span class="text">Project</span></div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filteredReportData.projects.length > 0; else project_filtered">filter_list</span>
            <ng-template #project_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element"> {{element.project}} </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef class="th_type label-header">
        <div class="label"><span class="text"> Resource Type</span> </div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filteredReportData.resource_type.length > 0; else type_filtered">filter_list</span>
            <ng-template #type_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element"> {{element.resource_type | titlecase}} </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef class="th_status label-header">
        <div class="label"><span class="text"> Status</span> </div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filteredReportData.statuses.length > 0; else status_filtered">filter_list</span>
            <ng-template #status_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element">
        <span class="status" ngClass="{{ element.status.toLowerCase() || '' }}"
          *ngIf="element.status">{{ element.status.toLowerCase() }}</span>
        <span *ngIf="!element.status">N/A</span>
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="shape">
      <th mat-header-cell *matHeaderCellDef class="th_shape label-header">
        <div class="label"><span class="text"> Instance size</span></div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span
              *ngIf="filteredReportData['shapes'].length > 0; else shape_filtered">filter_list</span>
            <ng-template #shape_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element">
        <div *ngFor="let shape of element.shape.split('↵')">{{shape}}</div>
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="service">
      <th mat-header-cell *matHeaderCellDef class="service label-header">
        <div class="label"><span class="text"> Product</span> </div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span
              *ngIf="filteredReportData['shapes'].length > 0; else service_filtered">filter_list</span>
            <ng-template #service_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.product }}
<!--        <span *ngIf="element.product">{{ element.product }}</span>-->
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="charge" stickyEnd>
      <th mat-header-cell *matHeaderCellDef class="th_charges label-header">
        <div class="label">
          <div class="sort">
            <div class="sort-arrow up" (click)="sortBy('cost', 'down')" [ngClass]="{'active': !!this.active['costdown']}"></div>
            <div class="sort-arrow down" (click)="sortBy('cost', 'up')" [ngClass]="{'active': !!this.active['costup']}"></div>
          </div>
          <span class="text">Service Charges</span>
        </div>
      </th>

      <td mat-cell *matCellDef="let element">
        {{ element.cost }} {{ element['currency'] }}
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer total-cost">
        Total <span *ngIf="reportData?.length"> {{ fullReport['total_cost'] }}
          {{ fullReport['currency'] }}</span>
      </td>
    </ng-container>

    <!-- ----------------FILTER -->
    <ng-container matColumnDef="name-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <input #nameFilter type="text" placeholder="Filter by environment name" class="form-control filter-field"
          [value]="filtered?.dlab_id" (input)="filteredReportData.dlab_id = $event.target['value']" />
      </th>
    </ng-container>
    <ng-container matColumnDef="user-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'user'"
          [items]="filterConfiguration.users" [model]="filteredReportData.users"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="project-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'project'"
          [items]="filterConfiguration.projects" [model]="filteredReportData.projects"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="type-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="['resource_type']"
          [items]="filterConfiguration.resource_type" [model]="filteredReportData.resource_type">
        </multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="status-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'status'"
          [items]="filterConfiguration.statuses" [model]="filteredReportData.statuses"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="shape-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
          [type]="'shapes'" [items]="filterConfiguration['shapes']"
          [model]="filteredReportData['shapes']"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="service-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
          [type]="['products']"
          [items]="filterConfiguration['products']"
          [model]="filteredReportData['products']"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="actions" stickyEnd>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <div class="actions th_charges">
          <button mat-icon-button class="btn reset" (click)="resetFiltering(); isFiltered = !isFiltered">
            <i class="material-icons">close</i>
          </button>

          <button mat-icon-button class="btn apply" (click)="filter_btnClick()">
            <i class="material-icons">done</i>
          </button>
        </div>
      </th>
    </ng-container>
    <ng-container matColumnDef="placeholder">
      <td mat-footer-cell *matFooterCellDef colspan="7" class="info">
        No data available
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>

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

    <tr [hidden]="!reportData?.length" mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"
      class="header-row"></tr>
    <tr [hidden]="reportData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
  </table>
</section>