{% extends "global/Page.html" %}
{% load otree static %}


{% block content %}
<div class="card">
     <div class="card-body">
        <div id="result"> Number of d letters left: <span id="selected"> {{ Constants.d_total }} </span></div>
     </div>
</div>
<div class="table-responsive">
    <table class="table">
        {% for field in form %}
            <tr>
            {% for choice in field|slice:"0:10" %}
                <td>{{ choice }}</td>
            {% endfor %}
            </tr>
            <tr>
            {% for choice in field|slice:"10:20" %}
                <td>{{ choice }}</td>
            {% endfor %}
            </tr>
            <tr>
            {% for choice in field|slice:"20:30" %}
                <td>{{ choice }}</td>
            {% endfor %}
            </tr>
            <tr>
            {% for choice in field|slice:"30:40" %}
                <td>{{ choice }}</td>
            {% endfor %}
            </tr>
            <tr>
            {% for choice in field|slice:"40:50" %}
                <td>{{ choice }}</td>
            {% endfor %}
            </tr>
            <tr>
            {% for choice in field|slice:"50:60" %}
                <td>{{ choice }}</td>
            {% endfor %}
            </tr>
            <tr>
            {% for choice in field|slice:"60:70" %}
                <td>{{ choice }}</td>
            {% endfor %}
            </tr>
            <tr>
            {% for choice in field|slice:"70:80" %}
                <td>{{ choice }}</td>
            {% endfor %}
            </tr>
        </th>
        {% endfor %}
    </table>
</div>
<p><b>Do you wish to submit the task?</b></p>

<button class="otree-btn-next btn btn-primary">Submit</button>

{% endblock %}

{% block scripts %}
    <script>

     const selectedElm = document.getElementById('selected');
     var total_d = {{Constants.d_total|json}}

     function showChecked(){
        selectedElm.innerHTML = total_d - document.querySelectorAll('input[value=d]:checked').length;
      }

     document.querySelectorAll("input[value=d]").forEach(i=>{
     i.onclick = () => showChecked();
      });

    </script>
{% endblock %}