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


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

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


{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    {% trans "Allocation Task" %}
{% endblock %}


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

            <ul>
                <li>
                    In this task, you are asked to make a series of decisions.
                </li>
                <li>
                    The decisions influence your earnings and the earnings of another randomly chosen participant.
                </li>
                <li>
                    In each  decision, you choose between two alternatives: "Left" or "Right".
                </li>
                <li>
                    The following is an example: you can either choose "Left"
                    (so that you receive 55 {{ experimental_currency }} and the other receive 75 {{ experimental_currency }}), or choose "Right" (so that
                    both of you receive 50 {{ experimental_currency }}).
                </li>

                <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>
                        <tr>
                            <!-- option "left" -->
                            <td>{{ 55|c }}</td>
                            <td>{{ 75|c }}</td>

                            <!-- radio select form fields -->
                            <td class="formfield">
                                <input type="radio" style="pointer-events: none;" disabled>
                                <input type="radio" style="pointer-events: none;" disabled>
                            </td>

                            <!-- option "right" -->
                            <td>{{ 50|c }}</td>
                            <td>{{ 50|c }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                </li>
                <li>
                    At the end of the experiment, you will be matched with another participant, and one of you
                    will be randomly selected as the <em>Proposer</em>.
                </li>
                <li>
                    One of the decision problems will be randomly selected as the payoff-relevant choice.
                </li>
                <li>
                    The actual earnings depend on the <i>Proposer</i>'s choice
                    in the selected decision problem.
                </li>
            </ul>




    {% next_button %}

{% endblock %}