<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Runs</title>

    <script src="{{ url_for('static', filename='scripts/main.js') }}"></script>
    <script src="{{ url_for('static', filename='vendors/require.js') }}"></script>
    <script>
        requirejs(["runs/viewModel"], function (viewModel) {
            viewModel.initialize("#runs");
            viewModel.bind();
        });
    </script>


    <!-- Bootstrap -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="{{ url_for('static', filename='vendors/bootstrap/css/bootstrap.min.css') }}">

    <!-- Optional theme -->
    <link rel="stylesheet"
          href="{{ url_for('static', filename='vendors/bootstrap/css/bootstrap-theme.min.css') }}">


    <!-- DataTables, jQuery and its plugins, debug mode -->
   <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='vendors/datatables/datatables.css') }}">
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='vendors/datatables/DataTables-1.10.15/css/dataTables.jqueryui.css') }}">

    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='css/runs.css') }}"/>


</head>
<body>
<div class="container-fluid">

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Sacredboard</a>
            </div>
        </div>
    </nav>

    <div class="row-fluid clearfix">
        <div class="col-md-12">
            Filter runs:
            <query-filter params="value: queryFilters"></query-filter>
        </div>
    </div>

    <hr>
    <div class="row-fluid">
        <table id="runs" class="table table-striped table-hover">
            <caption>Experiments Run Overview<br>
                Legend:
                <span class="run-alive">&block;</span> <input type="checkbox"
                                                              data-bind="checkedValue: predefinedFilters['run-alive'], checked: statusFilters.filters">
                Running,
                <span class="run-completed">&block;</span> <input
                        type="checkbox"
                        data-bind="checkedValue: predefinedFilters['run-completed'], checked: statusFilters.filters">
                Completed,
                <span class="run-failed">&block;</span> <input type="checkbox"
                                                               data-bind="checkedValue: predefinedFilters['run-failed'], checked: statusFilters.filters">
                Failed,
                <span class="run-interrupted">&block;</span> <input
                        type="checkbox"
                        data-bind="checkedValue: predefinedFilters['run-interrupted'], checked: statusFilters.filters">
                Interrupted,
                <span class="run-dead">&block;</span> <input type="checkbox"
                                                             data-bind="checkedValue: predefinedFilters['run-dead'], checked: statusFilters.filters">
                Probably dead,
                <span class="run-queued">&block;</span> <input type="checkbox"
                                                               data-bind="checkedValue: predefinedFilters['run-queued'], checked: statusFilters.filters">
                Queued
                    &nbsp;&nbsp; <button data-bind="click: reloadTable">Refresh</button>
            </caption>
            <thead>
            <tr>
                <th><!-- expand / hide button --></th>
                <th>Id</th>
                <th>Experiment name</th>
                <th>Command</th>
                <th>Start time</th>
                <th>Last activity</th>
                <th>Hostname</th>
                <th>Result</th>

            </tr>
            </thead>
            <tbody>
            {% for run in runs %}
                <tr>

                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
</body>
</html>