{% extends 'base.html' %}


{% block content %}


<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main" class="container-fluid">
    <div id="experiments-row" class="row ml-2">
        <div class="col-lg-12">
            <div class="card border-secondary mb-4">
                <div class="card-body h-100">
                <h4 class="card-title">Experiments</h4>
                <table id="experiments-table" class="table rounded">
                    <thead class="custom-thead">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col" style="display:none">Full Path</th>
                        <th scope="col">Controller</th>
                        <th scope="col">Preset</th>
                        <th scope="col">Determinize</th>
                        <th scope="col">Numeric Predicates</th>
                        <th scope="col">Categorical Predicates</th>
                        <th scope="col">Impurity</th>
                        <th scope="col">Tolerance</th>
                        <th scope="col">Safe Pruning</th>
                        <th scope="col">Actions</th>
                        <th scope="col" class="collapse">User predicates</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="runall">
                        <td colspan="9"></td>
                        <td id="runall" style="cursor: pointer"><i id="runall-icon" class="fa fa-play text-success" aria-hidden="true"></i> Run all</td>
                    </tr>
                    <tr class="special">
                        <td colspan="10" align="center">Select a controller and preset on the self and click add</td>
                    </tr>
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
    <div id="results-row" class="row ml-2">
        <div class="col-lg-12">
            <div class="card border-secondary mb-4">
                <div class="card-body h-100">
                <h4 class="card-title">Results</h4>
                <table id="results-table" class="table rounded">
                    <thead class="thead-light">
                    <tr>
                        <th scope="col">Experiment #</th>
                        <th scope="col">Controller</th>
                        <th scope="col">Preset</th>
                        <th scope="col">Status</th>
                        <th scope="col"># Inner Nodes</th>
                        <th scope="col"># Leaf Nodes</th>
                        <th scope="col">Construction time</th>
                        <th scope="col">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="special">
                        <td colspan="10" align="center">Run experiment to view results here</td>
                    </tr>
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ url_for( 'static', filename='js/benchmark.js' ) }}"></script>
{% endblock %}