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

{% block title %}
Block {{ player.current_step }} of 5
{% endblock %}

{% block content %}

<hr>

<div class="progress">
    <div class="progress-bar" style="width: {{ progress }}%">{{ player.current_step }} / 5</div>
</div>

<hr>

<div class="otdm__choices-selection">
    <h3 class="text-center">
        Gain {{ gain | c }} <em>per Week</em>
    </h3>

    <table class="otdm__choices-table table table-bordered table-striped" style="table-layout: fixed;">
        <thead>
        <tr class="text-center">
            <th>Option A</th>
            <th width="75">A</th>
            <th width="75">B</th>
            <th>Option B</th>
        </tr>
        </thead>
        <tbody class="small">
        {% for week, gain, rev_week, rev_gain in week_gain %}
        <tr>
            <td class="text-right">
                {% if gain == 1 %}
                in week <span class="otdm__week">{{ week }}</span>
                {% else %}
                starting in week <span class="otdm__week">{{ week_start }}</span>
                and ending (after) week <span class="otdm__week">{{ week }}</span>
                [<span class="otdm__week">{{ gain }}</span>]
                {% endif %}
            </td>
            <td class="text-center otdm__choice-cell">
                <label>
                    <input type="radio" name="otdm__option_week{{forloop.counter}}"
                           class="otdm__choice-input"
                           value="A" data-week="{{ week }}" data-index="{{ forloop.counter }}">
                </label>
            </td>
            <td class="text-center otdm__choice-cell">
                <label>
                    <input type="radio" name="otdm__option_week{{forloop.counter}}"
                           class="otdm__choice-input"
                           value="B" data-week="{{ week }}" data-index="{{ forloop.counter }}">
                </label>
            </td>
            <td class="text-left">
                {% if rev_gain == 1 %}
                in week <span class="otdm__week">{{ rev_week }}</span>
                {% else %}
                starting in week <span class="otdm__week">{{ rev_week }}</span>
                and ending (after) week <span class="otdm__week">{{ week_end }}</span>
                [<span class="otdm__week">{{ rev_gain }}</span>]
                {% endif %}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>

    <div class="otdm__waiting">
        You have to select an option above to continue.
    </div>
</div>

<div class="otdm__confirm-button-wrapper">
    <button class="btn btn-primary otdm__confirm-button" type="button">
        Confirm
    </button>
</div>

<div class="otdm__player-confirmation">
    <h5>Your choices mean that you prefer to:</h5>

    <p class="text-center">
        Gain {{ gain | c }} <em>per Week</em>, <span class="otdm__confirmation-either"></span>
    </p>

    <p class="text-center">
        <b>rather than</b>
    </p>

    <p class="text-center">
        Gain {{ gain | c }} <em>per Week</em>, <span class="otdm__confirmation-other"></span>
    </p>

    <br>

    <p class="text-center">Are you sure about your choice?</p>

    <div class="text-center">
        <button class="btn btn-primary otdm__confirmation-yes" type="submit">YES</button>
        <button class="btn btn-light otdm__confirmation-no" type="button">NO</button>
    </div>
</div>

<input class="otdm__value" type="hidden" name="{{ var_name }}">

{% endblock %}

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

{% block scripts %}
<script src="{% static 'otdm/scripts/choices.js' %}"></script>
{% endblock %}