{{ block title }}
    Main Game
{{ endblock }}
{% block styles %}
   <style>
      input[type=radio] {
        transform: scale(1.8);
        margin:10px;
      }
   </style>
{% endblock %}
{{ block content }}
<p>
    Choose a number
</p>
<div class="card bg-light m-3">
    <div class="card-body">
        <div class="grid" id="choices"></div>
        {{ formfield_errors 'number' }}
    </div>
</div>

<style>
    p {font-size: 18px;}
</style>

<script>
    let choices = document.getElementById('choices');
    if (js_vars.commit == -1){
        for (let i = 1; i < 11; i++) {
            var rd = document.createElement("div");
            rd.innerHTML = "<input type='radio' name='number' value='"
            +i+"' id='"
            +i+"'><label for='choice-10'>"+i+"</label>";
            choices.appendChild(rd);
        }
    } else {
        var rd = document.createElement("div");
            let i = js_vars.commit;
            var rd = document.createElement("div");
            rd.innerHTML = "<input type='radio' name='number' value='"
            +i+"' id='"
            +i+"'><label for='choice-10'>"+i+"</label>";
            choices.appendChild(rd);
    }
</script>
    {{ next_button }}

{{ endblock }}