{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Decision
{% 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>
                    <td><button name="decision" value="stag" class="btn btn-primary btn-large">I will choose stag</button></td>
                    <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>
                    <td><button name="decision" value="hare" class="btn btn-primary btn-large">I will choose hare</button></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">{{ 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="font-size: 24pt; font-family:'Lato', sans-serif"> 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 (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>
                <!-- This is the 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>
                    <td><button name="decision" value="stag" class="btn btn-primary btn-large">I will choose stag</button></td>
                    <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 the row 2, columns 1 and 2 -->
                <tr>
                    <td><button name="decision" value="hare" class="btn btn-primary btn-large">I will choose hare</button></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.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>


    {% include Constants.instructions_template %}


    {% next_button %}

{% endblock %}