<div class="stack-selector-item"
     ng-class="{'stack-selector-item-selected': (stack.id === stackIdSelected)}">
  <che-list-item flex
                 ng-click="stackOnClick({stackId: stack.id})"
                 class=" che-hover"
                 ng-mouseover="hover=true" ng-mouseout="hover=false">

    <div flex="100"
         layout="row"
         layout-align="start stretch"
         class="che-list-item-row">

      <div layout="column" flex
           class="che-list-item-details">

        <!-- Stack description row -->
        <div layout="row" flex>

          <!-- Icon -->
          <div class="stack-selector-icon-column"
               layout="column" layout-align="center center">
            <div ng-if="stackIconLink" class="stack-selector-item-icon">
              <img img-src="{{stackIconLink}}"/>
            </div>
            <div ng-if="!stackIconLink" class="stack-selector-item-icon blank-icon">
              <div class="chefont cheico-type-blank"></div>
            </div>

            <div class="stack-selector-item-thumb-tack"
                 ng-if="isPinned(stack)">
              <i class="fa fa-thumb-tack" aria-hidden="true"></i>
            </div>
          </div>

          <div layout="column" flex>
            <div flex
                 layout-gt-md="row"
                 class="stack-selector-item-description">
              <!-- Name cell -->
              <div flex-gt-md="15">
                <span class="che-list-item-name">{{stack.name}}</span>
              </div>
              <!-- Description cell -->
              <div flex-gt-md>
                <span class="che-list-item-secondary">{{stack.description}}</span>
              </div>
            </div>

            <!-- Components list -->
            <div class="stack-selector-item-components">
              <div ng-repeat="component in stack.components"
                   class="stack-component">
                <div class="stack-component-title">{{component.name}}</div>
                <md-tooltip md-direction="right">{{component.version}}</md-tooltip>
              </div>
            </div>
          </div>

          <!-- RAM -->
          <div flex="25" layout="row" layout-align="start center">
            <span class="stack-ram-offset stack-selector-item-secondary-color"
                  ng-if="stackMachines.length === 1">{{stackMachines[0].memoryLimitBytes | changeMemoryUnit:['B','GB']}}</span>
          </div>
          <!-- todo Pull number -->
          <!-- not implemented yet -->

        </div>

        <!-- Services row -->
        <div>
          <div ng-if="stackMachines.length > 1"
               ng-repeat="machine in stackMachines"
               layout="row" flex
               class="stack-selector-machines">
            <div class="stack-selector-machine-icon">
              <div class="chefont cheico-stacks"></div>
            </div>
            <div flex="auto"
                 class="stack-selector-item-machine-name">{{machine.name}}
            </div>
            <div flex="25"
                 class="stack-selector-item-secondary-color stack-ram-offset">{{machine.memoryLimitBytes | changeMemoryUnit:['B','GB']}}</div>
          </div>
        </div>

      </div>

    </div>

  </che-list-item>

</div>
