<!--
  ~ 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 *ngIf="projectList" class="base-retreat">
  <div class="sub-nav">
    <div
      matTooltip="Only admin can create new project."
      matTooltipPosition="above"
      [matTooltipDisabled]="healthStatus?.admin"
    >
      <button 
        mat-raised-button 
        class="butt butt-create" 
        (click)="createProject()" 
        [disabled]="!projectList.length || !healthStatus?.admin && healthStatus?.projectAdmin"
      >
        <i class="material-icons">add</i>Create new
      </button>
    </div>
    <div>
      <button 
        mat-raised-button 
        class="butt butt-tool mr-10" 
        (click)="toggleFiltering()"
      >
        <span *ngIf="!activeFiltering">
          <i class="material-icons">visibility_off</i> Show active
        </span>
        <span *ngIf="activeFiltering">
          <i class="material-icons">visibility</i> Show all
        </span>
      </button>
      <button 
        mat-raised-button 
        class="butt" 
        (click)="refreshGrid()" 
        [hidden]="!projectList.length"
      >
        <i class="material-icons refresh-icon">autorenew</i>Refresh
      </button>
    </div>
  </div>

  <mat-divider></mat-divider>

  <mat-card class="project-form" *ngIf="!projectList.length && healthStatus?.admin">
    <project-form></project-form>
  </mat-card>

  <div [hidden]="!projectList.length">
    <project-list 
      (editItem)="editProject($event)" 
      (toggleStatus)="toggleStatus($event)" 
      [isProjectAdmin]="!healthStatus?.admin && healthStatus?.projectAdmin"
    ></project-list>
  </div>

  <inform-message [message]="noPermissionMessage" *ngIf="!healthStatus?.admin && healthStatus?.projectAdmin && !projectList.length"></inform-message>
</div>