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

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="wrapper instructions">
            <p>
                We would like you to play this activity with another participant for 4 rounds.
            </p>
            <p>{{ partner }}</p>
            <p>
                During each round, each of you has a choice between two options: A and B.
            </p>
            <p style="text-align: center">
                Both participants’ earnings are presented in the table below<br>
                (your earnings are in blue, those of your partner in black)
            </p>
            <div style="position: relative">
                <img src="{% static "coordination/coordination.png" %}"
                     width="60%" style="margin-right: auto; margin-left: auto; display: block">
            </div>
            <br>
            <p>
                <b>If you choose option A,</b> 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>
                <b>If you choose option B</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>
            <p>
                The next page will allow you to make your choices.<br>
            </P>
            <P>
                Once you have both made your choices, you will see a summary on the screen showing your choice, 
                the choice of the other participant, and the credits you will receive for this round.<br>
                The on-screen summary will be displayed for {{ Constants.seconds_for_summary }} seconds,
                after which the next round will begin where you can again choose between options A and B.
            </p>
            <p>
                When you are ready, please click on the "Start" button.
            </p>
        </div>

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