<% locals.subtitle = '<a href="/job/' + job.SLUG + '">' + job.ALIAS + '</a> <a href="/job/' + job.SLUG + '/' +run.NUM + '">#' + run.NUM +' <span>ran</span> <span data-END="' + run.END + '" data-SLUM="' + run.SLUM + '">' + moment.duration((run.END - now), 'seconds').humanize(true) + '</span></a>' %>

<% include ../header %>
<div class="pure-u-1-1">

<div class="runs-table-responsive">
<table class="runs">
  <thead>
  <tr>
    <td colspan="2"></td>
    <td></td>
    <td class="count">total</td>
    <td class="count">passed</td>
    <td class="count">failed</td>
    <td class="count">dubious</td>
    <td class="count">skipped</td>
    <td class="info duration">duration</td>
  </tr>
  </thead>

  <tr class="detail">
    <td class="num"><span><%= run.NUM %></span></td>
    <td class="state badge" ><img src="/img/<%= run.TO.ST %>.png" /><span class="bg-<%= run.TO.ST %>"><%= run.TO.ST %></span></td>
    <td class="donut"><canvas class="donut" id="chart-detail-<%= run.SLUM %>" width="36" height="36"></canvas></td>
    <td class="result"><%= run.TO.TO %></td>
    <td class="result"><%= run.TO.PA %></td>
    <td class="result"><%= run.TO.FA %></td>
    <td class="result"><%= run.TO.DB %></td>
    <td class="result"><%= run.TO.SK %></td>
    <td class="info time"><%= run.DU %> <span class="testing"><%= run.TO.DU %></span></td>
    <td></td>
  </tr>
    <%
      for(var NAME in run.TE) {
        var TE = run.TE[NAME];
    %>
    <tr>
      <td class="test" colspan="2"><a href="#test-<%= NAME %>"><%= NAME %></a></td>
      <td class="state badge"><a href="#test-<%= NAME %>"><img src="/img/<%= TE.ST %>.png" /><span class="bg-<%= TE.ST %>"><%= TE.ST %></span></a></td>
      <td class="result"><%= TE.TO %></td>
      <td class="result"><%= TE.PA %></td>
      <td class="result"><%= TE.FA %></td>
      <td class="result"><%= TE.DB %></td>
      <td class="result"><%= TE.SK %></td>
      <td class="info time"><%= TE.DU %>&nbsp;</td>
      <td class="desc"><a href="#test-<%= NAME %>"><%= (desc[NAME] || '') %></a></td>
    </tr>
  <% } %>
</table>
</div>

<h2>Log <a href="/file/<%= job.SLUG %>/<%= run.MASK %>/run.log"><span>[view raw]</span></a></h2>
<div class="log">
<%- log %>
</div>

<div class="screenshots">
<% if (images.length) { %>
<h2>Screenshots</h2>
<% images.forEach(function(img, ix){ %>
  <div>
    <a class="anchor" name="<%= img %>"></a>
    <a href="/file/<%= job.SLUG %>/<%= run.MASK %>/<%= img %>">
      <h4><%= img %></h4>
      <img src="/file/<%= job.SLUG %>/<%= run.MASK %>/<%= thumbs[ix] %>" />
    </a>
  </div>
<% }) %>
</div>
<% } %>

</div>

<script>
(function(){
  var options = {
    percentageInnerCutout: 40,
    animationSteps: 25,
    animationEasing: 'linear',
    animateRotate: true,
    animateScale: true,
    showTooltips: false
  };
  var data = [{
    value: <%- JSON.stringify(run.TO.PA) %>,
    color: '#19C736',
  }, {
    value: <%- JSON.stringify(run.TO.FA) %>,
    color: '#CD3328',
  }];
  new Chart(document.getElementById('chart-detail-<%= run.SLUM %>').getContext('2d')).Doughnut(data, options);
}())
</script>
<% include ../footer %>
