{% extends "_base.html" %}

{% block content %}

<div class="body-content">
    <div class="row">
        <h1>Summer Games Done Quick Schedulizer</h1>

        <p>
          Build and share your Summer Games Done Quick schedule!
        </p>

        <label for="showToggle">Hide unselected</label>
        <input type="checkbox" id="showToggle" onchange="updateHideUnselected()">

        <table id="the_table">
            <tr>
                <th scope="col">Time & Estimate</th>
                <th scope="col">Run</th>
                <th scope="col">Runners</th>
            </tr>
            {% for run in runs %}
            <tr class="run {{run["class"]}}" id="run-{{run["order"]}}">
                <td>{{run["time"]}} &rarr; {{run["estimate"]}}</td>
                <td>{{run["name"]}} <span class="de-emphasis">{{run["category"]}}</span></td>
                <td>{{run["runners"]}}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
</div>

{% endblock %}