<div class="DashboardList" ng-hide="noJobs">
    <div class="DashboardList-header">
        <h3 class="DashboardList-headerText">
            RECENT JOB RUNS
        </h3>
        <a href="/#/jobs" class="DashboardList-viewAll">
            VIEW ALL
        </a>
    </div>
    <div class="DashboardList-container">
        <table class="List-table">
           <tr>
              <th class="List-tableHeader DashboardList-tableHeader--name" ng-click="sort('job_templates','name')">Title <i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i></th>
              <th class="List-tableHeader DashboardList-tableHeader--time">Time</th>
           </tr>
           <tr class="List-tableRow"
                ng-class-odd="'List-tableRow--oddRow'"
                ng-class-even="'List-tableRow--evenRow'"
                ng-repeat = "job in jobs">
              <td class="DashboardList-nameCell">
                    <i class="fa
                      DashboardList-status"
                      ng-class="{'DashboardList-status--success icon-job-successful': isSuccessful(job.status),
                          'DashboardList-status--failed icon-job-successful': !isSuccessful(job.status)}">
                    </i>
                    <a href="{{ job.detailsUrl }}" class="DashboardList-nameContainer">
                        {{ job.name }}
                    </a>
              </td>
              <td class="DashboardList-timeCell">
                  {{job.time}}
              </td>
           </tr>
        </table>
    </div>
</div>

<div class="DashboardList" ng-show="noJobs">
    <div class="DashboardList-header">
        <h3 class="DashboardList-headerText">
            RECENT JOB RUNS
        </h3>
    </div>
    <div class="DashboardList-container">
        <p class="DashboardList-noJobs">It doesn't seem like you have any recent job runs.</p>
    </div>
</div>
