<div class="tile tile-compact tile-template tile-click label-tags" ng-attr-title="{{(template | description) || template.metadata.name}}">
  <div row cross-axis="center" class="tile-flex">
    <div row main-axis="center" class="image-icon">
      <custom-icon resource="template" kind="template" ></custom-icon>
    </div>
    <div flex>
      <h3><a class="tile-target" ng-href="{{template | createFromTemplateURL : project}}">{{template.metadata.name}}</a></h3>
      <div ng-if="template | annotation : 'provider'">
        <label style="margin-right: 5px;">Provider:</label>
        {{template | annotation : 'provider'}}
      </div>
      <!-- Only show the namespace if it's not in the shared openshift namespace -->
      <div ng-if="template.metadata.namespace !== 'openshift'">
        <label style="margin-right: 5px;">Namespace:</label>
        {{template.metadata.namespace}}
      </div>
      <div ng-if="template | annotation : 'version'">
        <label style="margin-right: 5px;">Version:</label>
        {{template | annotation : 'version'}}
      </div>
      <a href=""
         ng-click="filterTag(tag)"
         ng-repeat="tag in (template | tags)"
         ng-attr-title="Filter by tag {{tag}}"
         class="tag small">
        {{tag}}
      </a>
    </div>
    <!-- Unset title attribute to prevent two tooltips. -->
    <div title="">
      <span ng-if="(template | tags).indexOf('quickstart') !== -1">
        <i
          class="fa fa-bolt tile-badge-icon"
          style="margin-right: 5px;"
          aria-hidden="true"
          data-toggle="tooltip"
          data-original-title="Quickstart"></i>
        <span class="sr-only">Quickstart</span>
      </span>
      <i
        class="fa fa-clone tile-badge-icon"
        aria-hidden="true"
        data-toggle="tooltip"
        data-original-title="Template"></i>
      <span class="sr-only">Template</span>
    </div>
  </div>
</div>
