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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/grit.css" %}">
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static "global/js/grit.js" %}"></script>

{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="instructions">
            <p>
                When you identify a pair (by clicking on both numbers), the pair is saved in the grid (both numbers change color), 
                and you can move on to the next pair.
            </p>
        </div>

        {% if player.grit_decision == 'easy' %}
            <table style="width: 25%">
                {% for row in participant.vars.table_easy %}
                    <tr>
                        {% for col in row %}
                            <td class="not-done">{{ col }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </table>
        {% else %}
            <table>
                {% for row in participant.vars.table_difficult %}
                    <tr>
                        {% for col in row %}
                            <td class="not-done">{{ col }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </table>
        {% endif %}



        {{ form.grit_num_correct.as_hidden }}

        <button class="otree-btn-next btn btn-primary">Continue</button>
    </div>
{% endblock %}