<!--
  ~ 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">
        <span class="label"> Environment name </span>
        <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"> {{element[DICTIONARY[PROVIDER].billing.dlabId]}} </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="user">
      <th mat-header-cell *matHeaderCellDef class="th_user">
        <span class="label"> User </span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filteredReportData.user.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">
        <span class="label">Project</span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filteredReportData.project.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">
        <span class="label"> Resource Type </span>
        <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[DICTIONARY[PROVIDER].billing.resourceType]}} </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef class="th_status">
        <span class="label"> Status </span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filteredReportData.status.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">
        <span class="label"> Instance size</span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span
              *ngIf="filteredReportData['shape'].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">
        <span>{{element[DICTIONARY[PROVIDER].billing.instance_size]}}</span>
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="service">
      <th mat-header-cell *matHeaderCellDef class="service">
        <span class="label"> Service </span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span
              *ngIf="filteredReportData['shape'].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">
        <span *ngIf="element[DICTIONARY[PROVIDER].billing.service]">{{ element[DICTIONARY[PROVIDER].billing.service] }}</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">
        <span class="label"> Service Charges </span>
      </th>

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

    <!-- ----------------FILTER -->
    <ng-container matColumnDef="name-filter">
      <th mat-header-cell *matHeaderCellDef>
        <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>
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'user'"
          [items]="filterConfiguration.user" [model]="filteredReportData.user"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="project-filter">
      <th mat-header-cell *matHeaderCellDef>
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'project'"
          [items]="filterConfiguration.project" [model]="filteredReportData.project"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="type-filter">
      <th mat-header-cell *matHeaderCellDef>
        <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>
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'status'"
          [items]="filterConfiguration.status" [model]="filteredReportData.status"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="shape-filter">
      <th mat-header-cell *matHeaderCellDef>
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
          [type]="'shape'"[items]="filterConfiguration['shape']"
          [model]="filteredReportData['shape']"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="service-filter">
      <th mat-header-cell *matHeaderCellDef>
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
          [type]="['service']"
          [items]="filterConfiguration['service']"
          [model]="filteredReportData['service']"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="actions" stickyEnd>
      <th mat-header-cell *matHeaderCellDef>
        <div class="actions">
          <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 || !PROVIDER" 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>