{% 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 grit_choice == 'easy' %}
            <table style="width: 25%">
                {% for row in table_easy %}
                    <tr>
                        {% for col in row %}
                            <td class="not-done">{{ col }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </table>
        {% else %}
            <table>
                {% for row in table_difficult %}
                    <tr>
                        {% for col in row %}
                            <td class="not-done">{{ col }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </table>
        {% endif %}

        {% if round1 %}
          {{ form.grit_num_correct_round1.as_hidden }}
        {% else %}
          {{ form.grit_num_correct_round2.as_hidden }}
        {% endif %}

        {% next_button %}
    </div>
{% endblock %}