<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-list-item flex ng-mouseover="hover=true" ng-mouseout="hover=false">
  <div flex="100"
       id="ws-name-{{workspaceItemCtrl.workspace.config.name}}"
       data-ws-status="{{workspaceItemCtrl.getWorkspaceStatus()}}"
       layout="row"
       layout-align="start stretch"
       class="che-list-item-row">
    <div layout="row"
         layout-align="start center"
         class="che-checkbox-area"
         ng-if="workspaceItemCtrl.isSelectable === true">
      <che-list-item-checked ng-model="workspaceItemCtrl.isSelect"
                             ng-show="('RUNNING' === workspaceItemCtrl.getWorkspaceStatus() || 'STOPPED' === workspaceItemCtrl.getWorkspaceStatus())"
                             che-aria-label-checkbox="Workspace {{workspaceItemCtrl.workspace.config.name}}"
                             ng-click="workspaceItemCtrl.onCheckboxClick()"></che-list-item-checked>
    </div>
    <div flex
         layout-xs="column" layout-gt-xs="row"
         layout-align-gt-xs="start center"
         layout-align-xs="start start"
         class="che-list-item-details">

      <!-- Name -->
      <div flex-gt-xs="25"
           layout="row"
           class="workspace-item-name"
           ng-click="workspaceItemCtrl.redirectToWorkspaceDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>Name</span>
        <div layout="row" flex>
          <workspace-status-indicator flex="none" che-status="workspaceItemCtrl.getWorkspaceStatus()"></workspace-status-indicator>
          <div class="workspace-name-clip" id="ws-full-name-{{workspaceItemCtrl.workspace.namespace}}/{{workspaceItemCtrl.workspace.config.name}}">
            <span uib-tooltip="{{'RUNNING' === workspaceItemCtrl.getWorkspaceStatus() ? 'Running' : 'Last modified: ' + (workspaceItemCtrl.workspace.attributes.updated | amTimeAgo)}}"
                  class="che-hover">
              <che-clip-the-middle>{{workspaceItemCtrl.workspace.namespace}}/{{workspaceItemCtrl.workspace.config.name}}</che-clip-the-middle>
            </span>
          </div>
        </div>
        <i class="fa fa-clock-o workspace-item-temp" ng-if="workspaceItemCtrl.workspace.temporary"></i>
      </div>

      <!-- RAM -->
      <div flex-gt-xs="15"
           class="che-list-item-name workspace-item-ram"
           ng-click="workspaceItemCtrl.redirectToWorkspaceDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>RAM</span>
        <span class="workspace-consumed-value" name="workspace-ram-value">{{workspaceItemCtrl.getMemoryLimit(workspaceItemCtrl.workspace)}}</span>
      </div>

      <!-- Projects -->
      <div flex-gt-xs="15"
           class="che-list-item-name workspace-item-projects"
           ng-click="workspaceItemCtrl.redirectToWorkspaceDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>Projects</span>
        <span class="che-hover" name="workspace-projects-value">{{workspaceItemCtrl.workspace.config.projects.length}}
          <span ng-if="workspaceItemCtrl.displayLabels"> project<span ng-if="workspaceItemCtrl.workspace.config.projects.length > 1">s</span></span></span>
      </div>

      <!-- Stack ID -->
      <div flex-gt-xs="30"
           class="che-list-item-name workspace-item-stack"
           ng-click="workspaceItemCtrl.redirectToWorkspaceDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>Stack</span>
        <span class="che-hover" name="workspace-stacks-name">{{workspaceItemCtrl.workspace.attributes.stackId}}</span>
      </div>

      <!-- Actions -->
      <div flex-gt-xs="15"
           class="workspace-item-actions">
        <span class="che-xs-header noselect" hide-gt-xs>Actions</span>

        <div class="che-list-actions"
             ng-if="workspaceItemCtrl.isSupported === true">
          <che-workspace-status workspace-id="workspaceItemCtrl.workspace.id"
                                name="workspace-stop-start-button"
                                is-request-pending="workspaceItemCtrl.isRequestPending"></che-workspace-status>
          <a href="#/workspace/{{workspaceItemCtrl.workspace.namespace}}/{{workspaceItemCtrl.workspace.config.name}}?tab=Config"
             name="configure-workspace-button"
             uib-tooltip="Configure workspace">
            <span class="fa fa-cog"></span>
          </a>
          <span ng-click="workspaceItemCtrl.redirectToWorkspaceDetails('Projects');" uib-tooltip="Add project">
            <span class="fa fa-plus-square-o" name="add-project-button"></span>
          </span>
        </div>
        <div class="che-list-item-secondary workspace-item-not-supported"
             ng-if="workspaceItemCtrl.isSupported === false">
          <div>
            <span>Not supported</span>
            <span class="che-list-actions"><i class="fa fa-question-circle" uib-tooltip="Current infrastructure doesn't support this workspace recipe type."></i></span>
          </div>
        </div>

      </div>
    </div>
  </div>
</che-list-item>
