<div layout="column" flex>
  <div class="stack-label-info">Select from our library of stacks.</div>
  <div layout="row" flex="100">
    <che-stack-library-filter layout="row" flex
                              stack-tags="createProjectStackLibraryCtrl.allStackTags"
                              on-tags-changes="createProjectStackLibraryCtrl.onTagsChanges(tags)">
    </che-stack-library-filter>
  </div>
  <div layout="row" flex layout-align="start start">
    <div layout="row">
      <div layout="column" flex="auto">

        <div layout="row" layout-wrap>
          <che-stack-library-selecter
            ng-repeat="stack in createProjectStackLibraryCtrl.stacks"
            ng-init="$first && createProjectStackLibraryCtrl.setStackSelectionById(stack.id)"
            ng-hide="createProjectStackLibraryCtrl.filteredStackIds.indexOf(stack.id) === -1"
            che-is-select="stack.id === createProjectStackLibraryCtrl.selectedStackId"
            che-is-active="true"
            che-title="{{stack.name}}"
            che-text="{{stack.description}}"
            che-extra-text="{{createProjectStackLibraryCtrl.getTooltip(stack)}}"
            che-stack-id="{{stack.id}}"/>
        </div>
      </div>
    </div>
  </div>
</div>
