{% extends "base.html" %}

{% block content %}

<div class="page-header">
    <h1>History list</h1>
</div>


<div class="row">
    <div class="col-md-4 col-md-offset-5">{{job.comments|nl2br|safe}}</div>
</div>

<hr>

<div style="margin: 0 auto; width: 80%" id="label"> </div>
<div style="margin: 0 auto; width:80%;" id="stats">

</div>

<hr>

<table align="center" style="width: 30%;" class="table table-hover">
    <thead>
    <tr>
        <th class="text-center">Run Script</th>
        <th class="text-center">Fail Script</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center"><a class="btn btn-default" href="/history/runscript/{{job.id}}/" role="button">View Script</a></td>
            <td class="text-center"><a class="btn btn-default" href="/history/failscript/{{job.id}}/" role="button">View Script</a></td>
        </tr>
    </tbody>
</table>

<hr>

<div style="width: 70%; margin: 0 auto;">
    <table align="center" style="width: 100%;" class="table table-hover results">
        <thead>
        <tr>
            <th>Output</th>
            <th>Run Date</th>
            <th>Time Taken</th>
            <th>Result</th>
            <th>Size</th>
        </tr>
        </thead>
        <tbody>
        {% if !histories %}
        <tr>
            <td align="center" colspan="4">No results</td>
        </tr>
        {% endif %}
        {% for history in histories %}
        <tr class="{{history.getTRClass}}">
            <td><a class="btn btn-default" href="./history/log/{{job.id}}/{{history.id}}/" role="button">View</a></td>
            <td>{{history.run_date}}</td>
            <td>{{history.time_taken}}</td>
            <td>{{history.result}}</td>
            <td>{{history.getSize}}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{% if histories %}
<script type="text/javascript">

    $(function () {
        $.dynatableSetup({
            features: {
                search: true,
                pushState: false
            }
        });
        $(".results").dynatable();

        var graph = new Dygraph(document.getElementById("stats"),

                {{csv|safe}},
                {
                    series: {
                        'Log Size': {
                            axis: 'y2'
                        },
                    },
                    axes: {
                        y2: {
                            independentTicks: true
                        }
                    },
                    legend: "always",
                    hideOverlayOnMouseOut: false,
                    labelsDiv: "label",
                    showRangeSelector: true,
                    animatedZooms: true,
                    labels: ["Date", "Time Taken", "Log Size", "Result"]
                }
        );

    });

</script>
{% endif %}

{% endblock %}