<div class="template-selector-item">

  <che-list-item flex>

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

      <div layout="row"
           layout-align="center center"
           class="che-checkbox-area template-selector-item-checkbox">
        <che-list-item-checked ng-model="templateIsChecked[template.name]"
                               che-aria-label-checkbox="Sample {{template.name}}"
                               id="sample-{{template.name}}"
                               ng-click="onTemplateClick()"></che-list-item-checked>
      </div>

      <div flex="25" layout="column" layout-align="center start">
        <span class="che-list-item-name template-selector-item-name">{{template.name}}</span>
      </div>

      <div flex layout="column" layout-align="center start">
        <span class="che-list-item-secondary template-selector-item-description">{{template.description}}</span>
      </div>

    </div>

  </che-list-item>

</div>
