<!--
  ~ 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="table-wrapper scrolling">
  <table mat-table [dataSource]="dataSource" class="projects-table mat-elevation-z6 selection">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef class="name"> Project name </th>
      <td mat-cell *matCellDef="let element" class="name project-name"> {{element.name}} </td>
    </ng-container>

    <ng-container matColumnDef="groups">
      <th mat-header-cell *matHeaderCellDef class="groups"> Group </th>
      <td mat-cell *matCellDef="let element" class="groups">
        <div class="mat-chip-list-wrap scrolling">
          <mat-chip-list>
            <mat-chip 
              *ngFor="let group of element.groups"
              [matTooltip]="group"
              matTooltipPosition="above"
              class="ellipsis"
            >
              {{ group }}
            </mat-chip>
          </mat-chip-list>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="endpoints">
      <th mat-header-cell *matHeaderCellDef class="endpoints">
        <span class="label-endpoint"> Endpoint </span>
        <span class="label-endpoint-status"> Endpoint status </span>
        <span class="label-status">Edge node status </span>
      </th>
      <td mat-cell *matCellDef="let element" class="source endpoints">
        <div *ngIf="!element.endpoints?.length; else list">
          <span *ngIf="!element.endpoints.length" class="no-details">no details</span>
        </div>
        <ng-template #list>
          <div *ngFor="let endpoint of element.endpoints" class="resource-wrap">
            <div class="resource-name">
              <a class="project-endpoint-name">
                {{ endpoint.name }}
              </a>
            </div>
            <div class="resource-status">
              <span [ngClass]="{'active' : endpoint.endpointStatus === 'ACTIVE', 'failed': endpoint.endpointStatus === 'INACTIVE'}">
                {{ (endpoint.endpointStatus | titlecase) || 'N/A'}}
              </span>
            </div>
            
            <span class="status resource-status" [ngClass]="endpoint?.status.toLowerCase() || ''">
              {{ endpoint?.status.toLowerCase() }}
            </span>
          </div>
        </ng-template>
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef class="project-actions">
        <span class="label"> Actions </span>
      </th>
      <td mat-cell *matCellDef="let element" class="settings">
        <span #settings (click)="actions.toggle($event, settings)" class="actions"></span>
        <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
          <ul class="list-unstyled actions-list">
            <div class="active-items"></div>
            <li class="project-seting-item" *ngIf="element.areStoppedNode" (click)="openEdgeDialog('start', element)">
              <i class="material-icons">play_circle_outline</i>
              <a class="action">
                Start edge node
              </a>
            </li>
            <li class="project-seting-item" *ngIf="element.areRunningNode" (click)="openEdgeDialog('stop', element )">
              <i class="material-icons">pause_circle_outline</i>
              <a class="action" >
                Stop edge node
              </a>
            </li>
            <li class="project-seting-item " *ngIf="element.areTerminatedNode" (click)="openEdgeDialog('recreate', element)">
              <i class="material-icons">refresh</i>
              <a class="action">
                Recreate edge node
              </a>
            </li>
            <li class="project-seting-item " *ngIf="element.areStoppedNode || element.areRunningNode" (click)="openEdgeDialog('terminate', element)">
              <i class="material-icons">phonelink_off</i>
              <a class="action">
                Terminate edge node
              </a>
            </li>
            <li class="project-seting-item" (click)="editProject(element)" *ngIf="!isProjectAdmin">
              <i class="material-icons">mode_edit</i>
              <a >
                Edit project
              </a>
            </li>
          </ul>
        </bubble-up>
      </td>
      <td class="settings"></td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>