{% extends "app.html" %}

{% block app_content %}
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        {% if benchmarks %}
        <li class="breadcrumb-item active">
          <a href="{{ url_for('app.run', run_id=benchmarks[0].run_id) }}">Run</a>
        </li>
        {% endif %}
        <li class="breadcrumb-item active">Batch</li>
        {% if benchmarks %}
        <li class="breadcrumb-item active" aria-current="page">{{ benchmarks[0].batch_id }}</li>
        {% endif %}
      </ol>
    </nav>

{% if plots %}
<div class="col-md-2"></div>
<div class="col-md-8" >
  <div id="bokeh-carousel" style="visibility: hidden;" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      {% for plot in plots %}
        {% if loop.index == 1 %}
        <div class="item active">
        {% else %}
        <div class="item">
        {% endif %}
        <div id="plot{{ loop.index }}" align="center"></div>
        </div>
      {% endfor %}
    </div>
    {% if plots|length > 1 %}
    <a class="left carousel-control" href="#bokeh-carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#bokeh-carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    {% endif %}
  </div>
  <br>
  <br>
</div>
<div class="col-md-2"></div>
{% endif %}

    <div class="col-md-12">
        <table id="benchmarks" class="table table-striped table-bordered table-hover">
        <caption>Benchmarks{% include 'units-tooltip.html' %}</caption>
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Language</th>
                    <th scope="col">Batch</th>
                    <th scope="col">Benchmark</th>
                    <th scope="col">Mean</th>
                    <th scope="col" nowrap>Z-Score</th>
                </tr>
            </thead>
            <tbody>
                {% for benchmark in benchmarks %}
                <tr>
                     <td style="white-space: nowrap;">{{ benchmark.display_timestamp }}</td>
                     <td style="white-space: nowrap;">{{ benchmark.display_language }}</td>
                     <td style="white-space: nowrap;">
                         <div>{{ benchmark.display_batch }}</div>
                     </td>
                     <td><a href="{{ url_for('app.benchmark', benchmark_id=benchmark.id) }}">
                         <div>{{ benchmark.display_name }}</div>
                     </a></td>
                     <td>{{ benchmark.display_mean }}</td>
                     {% if benchmark.stats.z_score is not none %}
                       <td>{{ benchmark.stats.z_score }}</td>
                     {% else %}
                       <td></td>
                     {% endif %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

{% endblock %}

{% block scripts %}
{{super()}}

{{ resources | safe }}

<script type="text/javascript">
$(document).ready(function() {
    {% for plot in plots %}
        Bokeh.embed.embed_item({{ plot | safe }});
    {% endfor %}
    document.getElementById("bokeh-carousel").style.visibility = "visible";
});

var table = $('#benchmarks').dataTable( {
    "responsive": true,
    "order": [[0, 'desc']],
    "columnDefs": [{ "orderable": false, "targets": [4] }]
} );

$(document).ready(function() {
    $('#unit-tooltip').tooltip()
   });
</script>
{% endblock %}
