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

{% block styles %}
    <style>
        .rotate90 {
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
            float: left;
            margin-top: 3em; // TODO: do not hardcode to center align
        }
        .highlight-row-on-hover:hover td {
            background-color: #fcf8e3;
        }

        .label-as-button input[type='radio'] {
            display: none
        }
    </style>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div style="text-align: center">
            <p>Please choose option A or option B by clicking on the corresponding box.</p>
            <p>(The earnings are summarized once again in the text below the table.)</p>
        </div>

        <div class="form-group required label-as-button" data-toggle="buttons">
            <table class="table table-bordered text-center" style="width: auto; margin: auto">
                <tr>
                    <th colspan="2" rowspan="2"></th>
                    <th colspan="2">The other participant</th>
                </tr>
                <tr>
                    <th>Action A</th>
                    <th>Action B</th>
                </tr>
                <tr class="highlight-row-on-hover">
                    <th rowspan="2"><span class="rotate90 text-primary">You</span></th>
                    <td>
                        <label class="btn btn-outline-primary btn-large">
                            <input type="radio" name="coordinate_decision" id="A" value="A" autocomplete="off">Action A
                        </label>
                    </td>
                    <td><span class="text-primary">{{ Constants.payoff_action_a|floatformat:"-1" }} credits</span>, {{ Constants.payoff_action_a|floatformat:"-1" }} credits</td>
                    <td><span class="text-primary">{{ Constants.payoff_action_a|floatformat:"-1" }} credits</span>, 0 credits</td>
                </tr>
                <tr class="highlight-row-on-hover">
                    <td>
                        <label class="btn btn-outline-primary btn-large">
                            <input type="radio" name="coordinate_decision" id="B" value="B" autocomplete="off">Action B
                        </label>
                    </td>
                    <td><span class="text-primary">0 credits</span>, {{ Constants.payoff_action_a|floatformat:"-1" }} credits</td>
                    <td><span class="text-primary">{{ Constants.payoff_action_b|floatformat:"-1" }} credits</span>, {{ Constants.payoff_action_b|floatformat:"-1" }} credits</td>
                </tr>
            </table>
        </div>

        <div class="wrapper instructions">
            <p style="text-align: center"><b>Reminder of earnings</b></p>
            <p>
                If you choose option A, you earn {{ Constants.payoff_action_a|floatformat:"-1" }} credits,
                regardless of the choice of the other participant. The other participant also receives
                {{ Constants.payoff_action_a|floatformat:"-1" }} credits if he has also chosen option A. Conversely, if he has chosen option B,
                 the other participant receives nothing.
            </p>
            <p>
                If you choose option B and the other participant also chooses option B, 
                you both receive {{ Constants.payoff_action_b|floatformat:"-1" }} credits.
                However, if you choose option B and the other participant chooses option A,
                you receive nothing while the other participant receives {{ Constants.payoff_action_a|floatformat:"-1" }} credits.
            </p>
        </div>

        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        $(function () {
            $('.label-as-button label').on('click', function () {
                $(this).addClass('focus');
                $('.label-as-button label').not(this).removeClass('focus')
            });
            $(document).on('click', function (e) {
                if ($(e.target).closest('.label-as-button label').length === 0) {
                    $('.label-as-button label').removeClass('focus');
                }
            });
        })
    </script>
{% endblock %}