{% extends 'otree/WaitPage.html' %}
{% load otree %}
{% block title %}Please wait!{% endblock %}

{% block content %}
    <div class="form-group required">
        {% if player.role == "Hunter_1" %}
            <p><span style="font-size: 24pt; font-family:'Lato', sans-serif"> You are <strong>Hunter 1</strong>.
                What is the choice that you want to make?
            </span></p>
            <table class="table table-bordered text-center" style="width: auto; margin: auto">
                <tr>
                    <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>
                <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>
                <!-- This is row 1, columns 1 and 2 -->
                <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>
                <!-- This is row 2, columns 1 and 2 -->
                <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 %}
            <p><span style="size: 24pt"> You are <strong>Hunter 2</strong>.
                What is the choice that you want to make?
            </span></p>
            <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</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>
                <!-- This is row 1, columns 1 and 2 -->
                <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>
                <!-- This is row 2, columns 1 and 2 -->
                <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>




{% endblock %}