<!--

    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

-->
<div layout="column" flex>
  <div class="stack-label-info">Create a new workspace with a ready-to-go stack.</div>
  <div layout="row" flex="100">
    <che-stack-library-filter layout="row" flex
                              stack-tags="readyToGoStacksCtrl.allStackTags"
                              on-tags-changes="readyToGoStacksCtrl.onTagsChanges(tags)">
    </che-stack-library-filter>
  </div>
  <div layout="row" layout-wrap>
    <md-card layout="column" class="che-simple-selector"
             ng-repeat="stack in readyToGoStacksCtrl.generalStacks | orderBy:readyToGoStacksCtrl.getPrioritySortPosition"
             ng-click="readyToGoStacksCtrl.setStackSelectionById(stack.id)"
             ng-hide="readyToGoStacksCtrl.filteredStackIds.indexOf(stack.id) === -1"
             ng-class="{'che-simple-selector-active' : '{{stack.id}}' === readyToGoStacksCtrl.selectedStackId}">
      <div layout="row">
        <div class="selector-icon" ng-class="{'chefont cheico-type-blank' : !readyToGoStacksCtrl.getIconSrc(stack.id)}">
          <img ng-src="{{readyToGoStacksCtrl.getIconSrc(stack.id)}}"/>
        </div>
        <div flex="70" class="title">
          <div>{{stack.name}}</div>
        </div>
      </div>
      <div class="description">{{stack.description}}</div>
    </md-card>
  </div>
</div>
