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

<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"> {{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">
      <mat-chip-list>
        <mat-chip *ngFor="let group of element.groups">{{ group }}</mat-chip>
      </mat-chip-list>
    </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 }}
            </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">
          <div class="active-items"></div>
          <li class="project-seting-item" *ngIf="areStoppedEndpoints(element)" (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="areStartedEndpoints(element)" (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="areStoppedEndpoints(element) || areStartedEndpoints(element)" (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)">
            <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>