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


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


{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
    {% if Constants.enforce_consistency == True %}
        {% if Constants.one_choice_per_page == False and Constants.random_order == False %}
            <script src="{% static 'cem/js/consistency.js' %}"></script>
        {% endif %}
    {% endif %}
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    {% trans "Your Decision" %}
{% endblock %}


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

    <div class="wrapper">

        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Progress Bar -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        {% if Constants.one_choice_per_page == True and Constants.progress_bar == True %}
            <label>
                {% blocktrans trimmed with page=page total=total %}
                    Page {{ page }} of {{ total }}
                {% endblocktrans %}
            </label>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width:{{ progress|json }}%;">
                    <span class="sr-only"></span>
                </div>
            </div>
        {% endif %}


        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Table - Lottery Decisions (Accept/Reject) -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        {% if Constants.accept_reject == True and Constants.variation != 'sure_payoff' %}

            <div class="card">
                <table class="table table-striped">
                    <thead>
                        <tr class="header">
                            <th class="lottery_left">{% trans "Lottery" %}</th>
                            <th class="formfield">{% trans "Accept" %}</th>
                            <th class="formfield">{% trans "Reject" %}</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for i,f,p,hi,lo,sp in choices %}
                            <tr>
                                <!-- lotteries -->
                                <td class="lottery_left">
                                    <b>{{ hi }}</b>
                                    {% trans "with a probability of " %}{{ p|floatformat:1 }},
                                    <b>{{ lo }}</b> {% trans "otherwise" %}
                                </td>

                                <!-- accept -->
                                <td class="formfield">
                                    <input type="radio" name="{{ f }}" value="A" required>
                                </td>

                                <!-- reject -->
                                <td class="formfield">
                                    <input type="radio" name="{{ f }}" value="B" required>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Table - Lottery Decisions (Option A/B) -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        {% else %}

            <div class="card">
                <table class="table table-striped">
                    <thead>
                        <tr class="header">
                            <th class="lottery">{% trans "Option A" %}</th>
                            <th class="formfield"></th>
                            <th class="sure_payoff">{% trans "Option B" %}</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for i,f,p,hi,lo,sp in choices %}
                            <tr>
                                <!-- lotteries -->
                                <td class="lottery">
                                    {{ hi }} {% trans "with a probability of " %}{{ p|floatformat:1 }},<br/>
                                    {{ lo }} {% trans "otherwise" %}
                                </td>

                                <!-- radio select form fields -->
                                <td class="formfield">
                                    <input type="radio" name="{{ f }}" value="A" required>
                                    <input type="radio" name="{{ f }}" value="B" required>
                                </td>

                                <!-- sure payoff -->
                                <td class="sure_payoff">
                                    {{ sp }} {% trans "with a probability of " %}100.0%<br/>
                                    {% trans "(sure payoff)" %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        {% endif %}
    </div>

    {% next_button %}

{% endblock %}