{{ block content }}

{{ for field in form }}
<p>
    {{ field.label }}
</p>

<div class="grid m-3">
    {{ for choice in field }}
        <h5>
            {{ choice._value }}
        </h5>
    {{ endfor }}

    {{ for choice in field }}
        <div class="input">
            {{ choice }}
        </div>
    {{ endfor }}

    {{ for choice in field }}
        <h6>
            {{ choice.label }}
        </h6>
    {{ endfor }}
</div>
{{ endfor }}

{{ next_button }}

{{ endblock }}

{{ block styles }}
<style>
    .grid {
        display: grid;
        grid-template-columns: repeat(11, 1fr);
    }

    h5,
    h6,
    .input {
        align-self: center;
        text-align: center;
    }

    h6 {
        font-size: small;
    }
</style>

{{ endblock }}