<div class="DashboardList" ng-hide="noJobs">
    <div class="DashboardList-header">
        <h3 class="DashboardList-headerText">
            <translate>RECENT JOB RUNS</translate>
        </h3>
        <a href="/#/jobs" class="DashboardList-viewAll">
            <translate>VIEW ALL</translate>
        </a>
    </div>
    <div class="DashboardList-container">
        <table class="List-table">
           <tr>
              <th class="List-tableHeader DashboardList-tableHeader--name" translate>Name</th>
              <th class="List-tableHeader DashboardList-tableHeader--time" translate>Time</th>
           </tr>
           <tr class="List-tableRow"
                ng-repeat = "job in jobs">
                <td class="DashboardList-nameCell">
                    <a href="{{ job.detailsUrl }}" ng-if="isSuccessful(job.status)" aw-tool-tip="{{strings.get('list.STATUS_TOOLTIP', job.status)}}" aw-tip-placement="right" data-tip-watch="strings.get('list.STATUS_TOOLTIP', job.status)">
                        <i class="fa DashboardList-status DashboardList-status--success icon-job-successful"></i>
                    </a>
                    <a href="{{ job.detailsUrl }}" ng-if="!isSuccessful(job.status)" aw-tool-tip="{{strings.get('list.STATUS_TOOLTIP', job.status)}}" aw-tip-placement="right" data-tip-watch="strings.get('list.STATUS_TOOLTIP', job.status)">
                        <i class="fa DashboardList-status DashboardList-status--failed icon-job-failed"></i>
                    </a>
                    <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">
            <translate>RECENTLY RUN JOBS</translate>
        </h3>
    </div>
    <div class="DashboardList-container">
        <p class="DashboardList-noJobs" translate>No jobs were recently run.</p>
    </div>
</div>
