<ul id="job-views"
    data-ng-class="{ 'colour-blind-mode': settings.colourBlind == 1 }"
    style="font-size: {{ settings.fontSize }}em"
    class="columns-{{ settings.numberOfColumns }}">

    <li ng-repeat="job in jobs" class="{{job.status}}" id="{{ job.name | slugify }}">
        <div class="progress" style="width: {{job.progress}}%">
            <span>{{job.progress}}%</span>
        </div>

        <div class="meta">
            <div class="latest-results">
                <h2>
                    <a ng-if="settings.stripVanadium == 0" title="{{job.name}}" href="{{job.url}}">{{job.name}}</a>
                    <a ng-if="settings.stripVanadium == 1" title="{{job.name}}" href="{{job.url}}">{{job.shortName}}</a>
                </h2>
                <ul class="description">
                    <li data-ng-show="job.claimed">Claimed by <strong>{{ job.claimAuthor }}</strong>: {{ job.claimReason }}</li>
                </ul>
                <div ng-if="settings.showCulprits == 1">
                  <ul ng-if="job.shouldIndicateCulprits" class="culprits">
                      <li data-ng-repeat="name in job.culprits">{{name}}</li>
                  </ul>
                </div>
                <ul ng-if="job.hasKnownFailures" class="failures">
                    <li data-ng-repeat="name in job.knownFailures">{{name}}</li>
                </ul>
            </div>

            <a data-ng-show="!!job.lastBuildName" class="build-name"
               title="Details of {{job.name}}, build {{job.lastBuildName}}"
               href="{{job.lastBuildUrl}}">{{job.lastBuildName}}</a>

            <div data-ng-show="!!job.estimatedDuration" class="build-time">
                <span class="elapsed" data-ng-show="job.progress > 0">{{job.lastBuildDuration}}</span>
                <span class="estimated">{{job.estimatedDuration}}</span>
            </div>
        </div>
    </li>
</ul>