{% from "macros.j2" import court_button %}
<div class="fixed-grid has-6-cols">
    <div class="grid">
    {% for key, value in courts.items() %}
        {{ court_button(key, value) }}
    {% endfor %}
    </div>
</div>
<div class="columns">
    <div class="column">
        <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>
    <div class="column">
        <div class="select is-responsive">
            <select name="team">
                <option>Random</option>
                <option>Teams</option>
            </select>
        </div>
    </div>
    <div class="column">
        <button class="button is-dark is-responsive" 
                hx-post="/propose" 
                hx-target="#games" 
                hx-include="[name='levels'], [name='team']">Generate</button>
    </div>
    <div class="column"></div>
    <div class="column">
        <button class="button is-dark is-responsive" 
                hx-post="/confirm" 
                hx-target="#games">Confirm</button>
    </div>
    <div class="column">
        <button class="button is-dark is-responsive" 
                hx-post="/reset" 
                hx-target="#games">RESET!</button>
    </div>
</div>