<!--
  ~ 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>
      <button mat-raised-button class="butt butt-create" (click)="createProject()" [disabled]="!projectList.length">
        <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">autorenew</i>Refresh
      </button>
    </div>
  </div>

  <mat-divider></mat-divider>

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

  <div [hidden]="!projectList.length">
    <project-list (editItem)="editProject($event)" (toggleStatus)="toggleStatus($event)">
    </project-list>
  </div>
</div>