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

{% block title %} Second test ({{ current_matrix }}/{{ Constants.total_num_raven_rounds }}) {% endblock %}

{% block app_styles %}

    <style>

        .table>tbody>tr>td, .table>tbody>tr>th,
        .table>tfoot>tr>td, .table>tfoot>tr>th,
        .table>thead>tr>td, .table>thead>tr>th {
            border: 0
        }

        .table {
            border:none !important;
            border-collapse: collapse;
        }

            td, th {
                padding: 0;
            }

        img {
            object-fit: contain;
            margin-top: 0%;
            margin-left: 0%;
        }

    </style>

{% endblock %}

{% block content %}

    <p>
        Please select the symbol that you think fits.
    </p>

    <div style="display:table; max-width:35vw; max-height:35vh">

        <div style="display:table-row; padding-left: 10%; padding-right: 10%">
            <img src="{% static image_path %}" height="80%" width="80%"/>
        </div>
        <br><br>

        <div style="display:table-row; height:0; padding-left: 10%; padding-right: 10%; padding-bottom: 1%">

            <table class="table" cellspacing="0" cellpadding="0">
            <tr>
                {% for choice in form.raven_6_submitted_answer %}
                    {% if forloop.counter <= 3 %}
                        <td>{{ choice }}</td>
                    {% endif %}
                {% endfor %}

            </tr>
            <tr>

                {% for choice in form.raven_6_submitted_answer %}
                    {% if forloop.counter > 3 %}
                        <td>{{ choice }}</td>
                    {% endif %}
                {% endfor %}
            </tr>
            </table>

        </div>

    </div>

{#    {{ form.my_field1 }} <br> {{ form.my_field2 }}#}

    {% next_button %}

{% endblock %}