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

{% block styles %}
    <link href="{% static 'global/css/wason.css' %}" rel="stylesheet">
{% endblock %}

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

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="instructions text-center">
            <p>
                A set of four cards are laid out on a table in front of you. Each card has a number on one side and a letter on the other.
            </p>
            <p>
                Which card (s) should you return to verify that the following is correct:
            </p>
            <p align="center"><i> if a card displays a D on one side, then it displays a 3 on the other side ?</i></p>
        </div>

        <div class="container-fluid">
            <div class="row">
                {% for i, c in cards %}
                    <div class="col-3 mt-auto mb-auto">
                        <div class="wason-card z-depth-3 rounded" id="{{ i }}" >{{ c }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% for field in form %}
            {{ field.as_hidden }}
        {% endfor %}

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

{% endblock %}