<div class="DashboardList" ng-hide="noJobTemplates">
    <div class="DashboardList-header">
        <h3 class="DashboardList-headerText">
            <translate>RECENTLY USED TEMPLATES</translate>
        </h3>
        <a href="/#/templates" class="DashboardList-viewAll">
            <translate>VIEW ALL</translate>
        </a>
    </div>
    <div class="DashboardList-container">
        <div class="List-table">
           <div class="List-tableHeaderRow">
               <div class="d-flex">
                   <div class="List-tableHeader col-sm-4">
                       <translate>Name</translate>
                   </div>
                   <div class="List-tableHeader col-sm-5">
                       <translate>Activity</translate>
                   </div>
                   <div class="List-tableHeader List-tableHeader--actions col-sm-3">
                       <translate>Actions</translate>
                   </div>
               </div>
           </div>
           <div class="List-tableRow" ng-repeat="template in templates">
               <div class="d-flex">
                  <div class="List-tableCell col-sm-4">
                      <a aria-label="{{'Navigate to template titled ' + template.name | translate}}" ng-href="#/templates/{{template.type}}/{{template.id}}" class="DashboardList-nameContainer">
                          {{ template.name }}
                      </a>
                  </div>
                  <div class="List-tableCell col-sm-5">
                      <aw-smart-status jobs="template.recent_jobs" template-type="template.type"></aw-smart-status>
                  </div>
                  <div class="col-sm-3 List-actionsContainer">
                      <div class="List-actionButtonCell List-tableCell">
                          <at-launch-template template="template"
                              ng-show="template.can_start">
                          </at-launch-template>
                      </div>
                   </div>
               </div>
           </div>
       </div>
    </div>
</div>
<div class="DashboardList" ng-show="noJobTemplates">
    <div class="DashboardList-header">
        <h3 class="DashboardList-headerText">
            <translate>RECENTLY USED JOB TEMPLATES</translate>
        </h3>
    </div>
    <div class="DashboardList-container">
        <p class="DashboardList-noJobs"><translate>No job templates were recently used.</translate><br />
        <!-- TODO: Seems $sce.trustAsHtml() does not work here. -->
        <div ng-show="canAddJobTemplate">
            <translate>You can create a job template <a href="#/templates/add_job_template">here</a>.</translate></p>
        </div>
    </div>
</div>
