{% load otree %}

<div class="card bg-light m-3">
    <div class="card-body">

    <h3>
        Instructions
    </h3>

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

    <p>
        -   In this study, <i style="color:green"> you</i> will be randomly  paired with <b style="color:red"> another
        participant </b> to play the discount-choice game for at least 5 but not more than 10 rounds.
<br>
        -   Each of you choose whether you want to offer high or low discounts.
<br>
        -   Your payoffs in each round will be determined by the choices of both as below.
<br>
        -  Your payoff in a randomly selected round will be <i style="color:green"> your </i> monetary compensation.
    </p>
    <p><i>In each cell, the amount to the left is
        <i style="color:green"> your </i> payoff and the amount to the right is the payoff for the <b style="color:red"> other
        participant </b>.</i></p>

    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=2><b style="color:red"> The Other
        Participant </b></th>
        </tr>
        <tr>
            <th>Low Discount</th>
            <th>High Discount</th>
        </tr>
        <tr>
            <th rowspan=2><span style="transform: rotate(-90deg);"><i style="color:green"> You </i></span></th>
            <th>Low Discount</th>
            <td>{{Constants.P2_both_stag_payoff}}, {{Constants.P1_both_stag_payoff}}</td>
            <td>{{ Constants.P2_hare_stag_payoff }}, {{Constants.P1_hare_stag_payoff}}</td>
        </tr>
        <tr>
            <th>High Discount</th>
            <td>  {{Constants.P2_stag_hare_payoff}} , {{ Constants.P1_stag_hare_payoff }}</td>
            <td>{{Constants.P2_both_hare_payoff}}, {{Constants.P1_both_hare_payoff}}</td>
        </tr>
    </table>

</div>
</div>