{% load otree %}
<script>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</script>
<div class="card bg-light m-3">
    <div class="card-body">

    <h3 style="font-size: 24pt; font-family:'Lato', sans-serif">Instructions</h3>
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>

    <p><span style="font-size: 14pt; font-family:'Lato', sans-serif">
        Welcome. Thank you for participating in this experiment.
        If you have any questions during the course of the experiment please raise your hand
        and an experimenter will assist you.
        Please turn off all electronic devices and refrain from speaking with any other participants.
        If you fail to do so you will be excluded from the study and any payments will be forfeit.
    </p>
    </span>
        <h4 style="font-size: 24pt; font-family:'Lato', sans-serif">Objective:</h4>
    <p><span style="font-size: 14pt; font-family:'Lato', sans-serif">
        At the beginning of the session you will be randomly paired with another participant to play a game.
        Each round will be played against the same partner you were paired with in the first round.
        The game will continue for five rounds, after which there is a 55 percent chance that the game ends.
        The game will automatically end after the tenth round.
        During each round the participants will simultaneously select, by clicking the corresponding
        button, either "stag" or "hare".
        Both your choice and your partner's choice affect the payoff each participant receives according to
        the table below.
    </span></p>

    <p><i><span style="font-size: 14pt; font-family:'Lato', sans-serif">
        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="font-size: 24pt; font-family:'Lato', sans-serif; color: green">The Other Participant (Hunter 2)</span> </i></th>
            <tr>
                <th><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">stag</span></i></th>
                <th><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">hare</span></i></th>
            </tr>
            <tr>
                <th rowspan="2"><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>You (Hunter 1)</b></span></th>
                <th><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>stag</b></span></th>
                <td><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{Constants.stag_match_payoff}}</b></span>,
                    <i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{Constants.stag_match_payoff}}</span></i></td>
                <td><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{ Constants.stag_mismatch_payoff }}</b></span>,
                    <i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{group.h_2_hare_payoff}}</span></i></td>
            </tr>
            <tr>
                <th><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>hare</b></span></th>
                <td><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{Constants.h_1_hare_payoff}}</b></span>,
                    <i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{ Constants.stag_mismatch_payoff }}</span></i></td>
                <td><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{Constants.h_1_hare_payoff}}</b></span>,
                    <i><span style="font-size: 24pt; font-family:'Lato', sans-serif; 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="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>The Other Participant (Hunter 1)</b></span></th>
            </tr>
            <tr>
                <th><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>stag</b></span></th>
                <th><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>hare</b></span></th>
            </tr>
            <tr>
                <th rowspan="2"><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green"><i>You (Hunter 2)</i></span></th>
                <th><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">stag</span></i></th>
                <td><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{Constants.stag_match_payoff}}</span></i>,
                   <span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{Constants.stag_match_payoff}}</b><span</td>
                <td><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{ Constants.stag_mismatch_payoff }}</span></i>,
                    <span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{Constants.h_1_hare_payoff}}</b></span></td>
            </tr>
            <tr>
                <th><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">hare</span></i></th>
                <td><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{group.h_2_hare_payoff}}</span></i>,
                    <span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{ Constants.stag_mismatch_payoff }}</b></span></td>
                <td><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{group.h_2_hare_payoff}}</span></i>,
                    <span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{Constants.h_1_hare_payoff}}</b></span></td>
            </tr>
        </table>
    {% endif %}
</div>
</div>