{% load otree %}

<div class="card bg-light instructions">
    <div class="card-body">

    <h3>
        Instructions
    </h3>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>

    <p>
        This study consists of 3 sessions.
        In each session, you will play {{ rounds_per_session }} rounds of prisoner's dilemma games with a
        pre-programmed computer player (the 'bot'). Your goal is to maximize your total payoff in each session. <br>
    </p>
    <p>
        The bot implements a different strategy in each session
        (within each session, it implements the same strategy in all rounds of that session).
        The bot's strategy is unknown to you (you are of course welcome to attempt to guess the bot's
        strategy in order to adjust your own strategy accordingly). <br>
    </p>
    <p>
        In each round, both you and the bot privately choose whether you want to cooperate or defect.
        Your payoffs will be determined by the choices of both you and the bot as below:

    </p>
    <p><i>In each cell, the amount to the left is the payoff for
        you and to the right for the bot.</i></p>

    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=2>The Bot</th>
        </tr>
        <tr>
            <th>Cooperate</th>
            <th>Defect</th>
        </tr>
        <tr>
            <th rowspan=2><span class="rotate90">You</span></th>
            <th>Cooperate</th>
            <td>{{ Constants.both_cooperate_payoff }}, {{ Constants.both_cooperate_payoff }}</td>
            <td>0, {{ Constants.betray_payoff }}</td>
        </tr>
        <tr>
            <th>Defect</th>
            <td>{{ Constants.betray_payoff }}, 0</td>
            <td>{{ Constants.both_defect_payoff }}, {{ Constants.both_defect_payoff }}</td>
        </tr>
    </table>

</div>
</div>