{% 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>
        In this study, you will play {{ num_rounds }} rounds of prisoner's dilemma games with a
        randomly generated computer player (the 'bot').<br>
        The bot implements one particular strategy in all rounds,
        which is randomly chosen at the start of the experiment. <br>
        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>
        In each round, both you and the bot privately choose whether you want to cooperate or defect.<br>



        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>