<div class="row">
  <div class="col-md-12">
    <h3>Durations</h3>
    <div class="progress">
      {% for action in summary %}
      <div class="progress-bar progress-bar-{% cycle 'success' 'warning' 'info' 'danger' %} {% cycle '' 'progress-bar-striped' %}" style="width: {{ action.2 }}%" title="{{ action.0 }} - {{ action.2|floatformat:"2" }}%">
        {% if action.2 >= 10 %}{{ action.0 }} - {{ action.2|floatformat:"0" }}%{% endif %}
      </div>
      {% endfor %}
    </div>

    <div class="row">
      <div class="col-md-6">
        <dl class="dl-horizontal">
        {% for action in summary %}
          <dt>{{ action.0 }}</dt>
          <dd>{{ action.2|floatformat:"2" }}% ({{ action.1 }})</dd>
        {% endfor %}
        </dl>
      </div>
      <div class="col-md-6">
        <dl class="dl-horizontal">
          <dt>Total</dt>
          <dd>{{ total_duration }} seconds</dd>
          <dt>Max</dt>
          <dd>{{ max_duration }} seconds</dd>
          <dt>Mean</dt>
          <dd>{{ mean_duration|floatformat:"2" }} seconds</dd>
        </dl>
      </div>
    </div>

    <h3>Timings</h3>
    <div id="timings" style="height: 300px;"></div>

    <h3>Complete timing</h3>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Level</th>
          <th>Action</th>
          <th>Duration (seconds)</th>
          <th>Timeout (seconds)</th>
        </tr>
      </thead>
      <tbody>
        {% for action in pipeline %}
        {% if action.2 >= action.3 %}
        <tr class="tr-danger">
        {% elif action.4 %}
        <tr class="tr-warning">
        {% else %}
        <tr>
        {% endif %}
          <td><a href="{% url 'lava.scheduler.job.definition' job.id %}#pipeline:{{ action.0 }}">{{ action.0 }}</a></td>
          <td>{{ action.1 }}</td>
          <td>{{ action.2 }}</td>
          <td>{{ action.3|floatformat:"0" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
