<!--
  ~ 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="base-retreat">
  <div class="sub-nav">
    <div *ngIf="healthStatus?.admin" class="admin-group">
      <div class="action-select-wrapper admin-group" >
        <span class="action-button-wrapper">
          <button
            type="button" class="butt actions-btn"
            mat-raised-button
            [disabled]="!selected.length"
            (click)="toogleActions();$event.stopPropagation()"
          >
            Actions
            <i class="material-icons" >{{ !isActionsOpen ?  'expand_more' : 'expand_less' }}</i>
          </button>
          </span>
        <div class="action-menu" *ngIf="isActionsOpen">
          <span>
          <button
           type="button" class="butt action-menu-item"
            [ngClass]="{'disabled': selectedRunning.length === 0  || selectedStopped.length !== 0 }"
            mat-raised-button
            [disabled]="selectedRunning.length === 0"
            (click)="resourseAction('stop');$event.stopPropagation()"
          >
            Stop
          </button>
            </span>
          <button
            type="button" class="butt action-menu-item"
            mat-raised-button
            (click)="resourseAction('terminate');$event.stopPropagation()"
          >
            Terminate
          </button>
        </div>
      </div>
      <button mat-raised-button class="butt ssn" (click)="showEndpointsDialog()">
        <i class="material-icons"></i>Endpoints
      </button>
      <!-- <button mat-raised-button class="butt ssn" (click)="openSsnMonitorDialog()">
        <i class="material-icons"></i>SSN Monitor
      </button> -->
      <button mat-raised-button class="butt env" (click)="openManageEnvironmentDialog()">
          Manage DataLab quotas
      </button>
      <!-- <button mat-raised-button class="butt" (click)="showBackupDialog()" [disabled]="creatingBackup">
        <i class="material-icons">backup</i>Backup
      </button> -->
    </div>
    <button mat-raised-button class="butt" (click)="refreshGrid()">
      <i class="material-icons refresh-icon">autorenew</i>Refresh
    </button>
  </div>
  <mat-divider></mat-divider>
  <management-grid [currentUser]="user.toLowerCase()" [isAdmin]="healthStatus?.admin"
    [environmentsHealthStatuses]="healthStatus?.list_resources" (refreshGrid)="buildGrid()"
    (actionToggle)="toggleResourceAction($event)" (emitSelectedList)="selectedList($event)">
  </management-grid>
</div>