{% 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><span style="size: 24pt">
        In this study, you will be randomly and anonymously paired with another
        participant.
        Each of you simultaneously and privately chooses whether you want to
        stag or hunt.
        Your payoffs will be determined by the choices of both as below:

    </span></p>
    <p><i><span style="size: 24pt">In each cell, the amount to the left is the payoff for
        hunter 1 and to the right for the hunter 2.</span></i></p>

    {% if player.role == "Hunter_1" %}
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <th colspan="2" rowspan="2"></th>
            <th colspan="2"><i><span style="size: 24pt; color: green">The Other Participant(Hunter 2)</span> </i></th>
            <tr>
                <th><i><span style="size: 24pt; color: green">stag</span></i></th>
                <th><i><span style="size: 24pt; color: green">hare</span></i></th>
            </tr>
            <tr>
                <th rowspan="2"><span style="size: 24pt; color: red "><b>You (Hunter 1)</b></span></th>
                <th><span style="size: 24pt; color: red "><b>stag</b></span></th>
                <td><span style="size: 24pt; color: red "><b>{{Constants.stag_match_payoff}}</b></span>,
                    <i><span style="size: 24pt; color: green">{{Constants.stag_match_payoff}}</span></i></td>
                <td><span style="size: 24pt; color: red "><b>{{ Constants.stag_mismatch_payoff }}</b></span>,
                    <i><span style="size: 24pt; color: green">{{group.h_2_hare_payoff}}</span></i></td>
            </tr>
            <tr>
                <th><span style="size: 24pt; color: red "><b>hare</b></span></th>
                <td><span style="size: 24pt; color: red "><b>{{Constants.h_1_hare_payoff}}</b></span>,
                    <i><span style="size: 24pt; color: green">{{ Constants.stag_mismatch_payoff }}</span></i></td>
                <td><span style="size: 24pt; color: red "><b>{{Constants.h_1_hare_payoff}}</b></span>,
                    <i><span style="size: 24pt; color: green">{{group.h_2_hare_payoff}}</span></i></td>
            </tr>
        </table>
    {% else %}
       <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th colspan="2"><span style="size: 24pt; color: red "><b>The Other Participant</b></span></th>
            </tr>
            <tr>
                <th><span style="size: 24pt; color: red "><b>stag</b></span></th>
                <th><span style="size: 24pt; color: red "><b>hare</b></span></th>
            </tr>
            <tr>
                <th rowspan="2"><span style="size: 24pt; color: green "><i>You (Hunter 2)</i></span></th>
                <th><i><span style="size: 24pt; color: green">stag</span></i></th>
                <td><i><span style="size: 24pt; color: green">{{Constants.stag_match_payoff}}</span></i>,
                   <span style="size: 24pt; color: red "><b>{{Constants.stag_match_payoff}}</b><span</td>
                <td><i><span style="size: 24pt; color: green">{{ Constants.stag_mismatch_payoff }}</span></i>,
                    <span style="size: 24pt; color: red "><b>{{Constants.h_1_hare_payoff}}</b></span></td>
            </tr>
            <tr>
                <th><i><span style="size: 24pt; color: green">hare</span></i></th>
                <td><i><span style="size: 24pt; color: green">{{group.h_2_hare_payoff}}</span></i>,
                    <span style="size: 24pt; color: red "><b>{{ Constants.stag_mismatch_payoff }}</b></span></td>
                <td><i><span style="size: 24pt; color: green">{{group.h_2_hare_payoff}}</span></i>,
                    <span style="size: 24pt; color: red "><b>{{Constants.h_1_hare_payoff}}</b></span></td>
            </tr>
        </table>
    {% endif %}
</div>
</div>