{% extends 'template.html' %}

{% block title %}Tempest Results{% endblock %}

{% block body %}

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Results</h1>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="panel panel-default">
            <div class="panel-heading">Results from Run #{{run_id}}</div>
            <div class="panel-body">
                <div id="sunburst"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
         <div class="panel panel-default">
             <div class="panel-heading" id="table-heading">Test Run Info</div>
             <div class="panel-body">
                   <div class="table-responsive" id="result-table-div">
                       <table class="table table-bordered table-hover table-striped" id="test-table">
                       </table>
                   </div>
             </div>
        </div>
    </div>

</div>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading"><button type="button" id="show-hide-failures">Show/Hide Failures</button></div>
            <div class="panel-body">
                <div class="table-responsive" id="failure-table-div">
                </div>
            </div>
        </div>
    </div>
</div>

<script>window.addEventListener('load', createSunburst( {{run_id}} ));</script>
<script>
$(document).ready(function(){
    $("#show-hide-failures").click(function() {
       $("#failure-table-div").toggle();
    });
});
</script>


{% endblock %}