{% from "macros.j2" import court_button %}
<h3>Timer</h3>
<div class="timer">
    <div role="group" style="height: 100%">
        <button id="timer-dec"><i class="fas fa-light fa-minus"></i></button>
        <input id="timer-display" type="text" style="text-align:center; height: 100%" readonly></input>
        <button id="timer-inc"><i class="fas fa-light fa-plus"></i></button>
    </div>
    <button id="timer-start"><i class="fas fa-light fa-play"></i></button>
    <button id="timer-stop"><i class="fas fa-light fa-stop"></i></button>
</div>
<h3>Generation</h3>
<div class="grid">
    <button class="button is-dark is-responsive" 
            hx-post="/propose" 
            hx-target="#games" 
            hx-include="[name='levels'], [name='team']">Generate</button>
    <button class="button is-dark is-responsive" 
            hx-post="/confirm" 
            hx-target="#games">Confirm</button>
    <button class="button is-dark is-responsive" 
            hx-post="/reset" 
            hx-target="#games">RESET!</button>
</div>
<div class="grid">
    <div class="select is-responsive">
        <select name="levels">
            <option>10 Levels</option>
            <option>8 Levels</option>
            <option>6 Levels</option>
            <option>4 Levels</option>
            <option>2 Levels</option>
            <option>0 Levels</option>
        </select>
    </div>
    <div class="select is-responsive">
        <select name="team">
            <option>Random</option>
            <option>Teams</option>
        </select>
    </div>
</div>
<h3>Courts</h3>
<div class="parent">
{% for court in courts %}
    {{ court_button(court) }}
{% endfor %}
</div>