<!--

    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"
       layout="row"
       layout-align="start stretch"
       id="stack-name-{{stackItemController.stack.name}}"
       class="che-list-item-row">
    <div layout="row"
         layout-align="start center"
         class="che-checkbox-area"
         ng-if="stackItemController.isSelectable === true">
      <che-list-item-checked ng-show="stackItemController.stack.creator === stackItemController.userId"
        ng-model="stackItemController.isSelect"
        che-aria-label-checkbox="Stack {{stackItemController.stack.name}}"
        ng-click="stackItemController.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">
      <div flex layout-gt-xs="row" layout-align-gt-xs="start center"
           ng-click="stackItemController.redirectToStackDetails();">
        <div flex-gt-xs="20" class="che-list-item-name stack-item-name">
          <span class="che-xs-header noselect" hide-gt-xs>Name</span>
          <span class="che-hover">{{stackItemController.stack.name}}</span>
        </div>
        <div flex-gt-xs="35" class="che-list-item-name stack-item-description">
          <span class="che-xs-header noselect" hide-gt-xs>Description</span>
          <span class="che-hover che-list-item-secondary">{{stackItemController.stack.description}}</span>
        </div>
        <div flex-gt-xs="30" class="che-list-item-name stack-item-components">
          <span class="che-xs-header noselect" hide-gt-xs>Components</span>
          <span
            class="che-hover che-list-item-secondary">{{stackItemController.getComponents(stackItemController.stack)}}</span>
        </div>
      </div>
      <div flex-gt-xs="15"
           class="stack-item-actions">
        <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
        <span class="che-list-actions">
          <a uib-tooltip="Delete Stack" ng-disabled="stackItemController.stack.creator !== stackItemController.userId"
             ng-click="stackItemController.onDelete(stackItemController.stack);">
            <span class="fa fa-trash-o"></span>
          </a>
          <a uib-tooltip="Duplicate stack" ng-click="stackItemController.onDuplicate(stackItemController.stack);">
            <span class="fa fa-copy"></span>
          </a>
        </span>
      </div>
    </div>
  </div>
</che-list-item>
