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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <!-- custom style sheet-->
    <link href="{% static 'eet/css/styles.css' %}" rel="stylesheet">

    <!-- set order of x- and y-list -->
    {% if Constants.one_page %}
        {% if list_ordering == 'xy' %}
            <style type="text/css">
                #x-list { order: 1; }
                #y-list { order: 2; }
            </style>
        {% else %}
            <style type="text/css">
                #x-list { order: 2; }
                #y-list { order: 1; }
            </style>
        {% endif %}
    {% endif %}


    <style>
        .otree-timer {
            display: none;
        }
    </style>
    <script>
        $(function () {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                if (event.offset.totalSeconds == 60) {
                    $('.otree-timer').show();
                }
            });
        });
    </script>
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
    <!-- consistency -->
    {% if Constants.enforce_consistency %}
        <script src="{% static 'eet/js/consistency.js' %}"></script>
    {% endif %}
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}

    <h4  style="text-align:center">
        Allocation between you and another participant
    </h4>

    <p>Please make your decision in the following problems.
    </p>
    <p>
        Once you click on an option for a row, choices for other rows indicated by your choice will be filled automatically (this will save you time).
    </p>
    {# ----------------------------------------------------------------------------------------------------------- #}
    {# --- x-List --- #}
    {# ----------------------------------------------------------------------------------------------------------- #}
    {% if show_x %}
        <div class="card" id="x-list">
            <table class="table">
                <thead>
                <tr>
                    <th colspan="2">{% trans "Option 'Left'" %}</th>
                    <th></th>
                    <th colspan="2">{% trans "Option 'Right'" %}</th>
                </tr>
                <tr>
                    <th>{% trans "Your Payoff" %}</th>
                    <th>{% trans "Other's Payoff" %}</th>
                    <th></th>
                    <th>{% trans "Your Payoff" %}</th>
                    <th>{% trans "Other's Payoff" %}</th>
                </tr>
                </thead>

                <tbody>
                {% for field, xy_a, xy_i, e_a, e_i in x_list %}
                    <tr>
                        <!-- option "left" -->
                        <td>{{ xy_a|c }}</td>
                        <td>{{ xy_i|c }}</td>

                        <!-- radio select form fields -->
                        <td>
                            <input type="radio" name="{{ field }}" value="L" class="x-items" required>
                            <input type="radio" name="{{ field }}" value="R" class="x-items" required>
                        </td>

                        <!-- option "right" -->
                        <td>{{ e_a|c }}</td>
                        <td>{{ e_i|c }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}

    {# ----------------------------------------------------------------------------------------------------------- #}
    {# --- y-List --- #}
    {# ----------------------------------------------------------------------------------------------------------- #}
    {% if show_y %}
        <div class="card" id="y-list">
            <table class="table">
                <thead>
                <tr>
                    <th colspan="2">{% trans "Option 'Left'" %}</th>
                    <th></th>
                    <th colspan="2">{% trans "Option 'Right'" %}</th>
                </tr>
                <tr>
                    <th>{% trans "Your Payoff" %}</th>
                    <th>{% trans "Other's Payoff" %}</th>
                    <th></th>
                    <th>{% trans "Your Payoff" %}</th>
                    <th>{% trans "Other's Payoff" %}</th>
                </tr>
                </thead>

                <tbody>
                {% for field, xy_a, xy_i, e_a, e_i in y_list %}
                    <tr>
                        <!-- option "left" -->
                        <td>{{ xy_a|c }}</td>
                        <td>{{ xy_i|c }}</td>

                        <!-- radio select form fields -->
                        <td>
                            <input type="radio" name="{{ field }}" value="L" class="y-items" required>
                            <input type="radio" name="{{ field }}" value="R" class="y-items" required>
                        </td>

                        <!-- option "right" -->
                        <td>{{ e_a|c }}</td>
                        <td>{{ e_i|c }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}


    {% next_button %}

{% endblock %}