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

{% block title %}
    Results
{% endblock %}

{% block content %}

<p>



{% if player.role == 'Hunter_1' %}

    <table class="table table-bordered text-center" style="width: auto; margin: auto">
    <tr>
        <th></th>
        <th><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">Your results</span></th>
        <th><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">Your results</span></th>
        <td rowspan="3">
            {% if player.decision == 'stag' and player.other_player.decision == 'stag' %}
                <img src="{% static "stag_hunt/happy.png" %}" alt="Smiley Emoji" height="200" width="200" class="center" />

            {% else %}
                <img src="{% static "stag_hunt/sad.png" %}" alt="Sad Emoji" height="200" width="200" class="center" />
            {% endif %}
        </td>
    </tr>
    <tr>
        <td><strong><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">Choice</span></i></strong</td>
        <td><strong><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{player.decision}}</b></span></strong></td>
        <td><strong><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{player.other_player.decision}}</span></i></strong></td>
    </tr>
    <tr>
        <td><strong><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">Payoffs:</span></i></strong</td>
        <td><strong><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{player.payoff}}</b></span></strong></td>
        <td><strong><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{player.other_player.payoff}}</span></i></strong</td>
    </tr>
    <tr>
        <th colspan="4">
            <span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">
            Your total payoff:
            </span>
            <strong><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">
                {{participant.payoff}}
            </span></strong>
        </th>
    </tr>
    </table>


{% else %}

        <table class="table table-bordered text-center" style="width: auto; margin: auto">
    <tr>
        <th></th>
        <th><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">Your results</span></th>
        <th><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">Your results</span></th>
        <td rowspan="3">
            {% if player.decision == 'stag' and player.other_player.decision == 'stag' %}
                <img src="{% static "stag_hunt/happy.png" %}" alt="Smiley Emoji" height="200" width="200" class="center" />

            {% else %}
                <img src="{% static "stag_hunt/sad.png" %}" alt="Sad Emoji" height="200" width="200" class="center" />
            {% endif %}
        </td>
    </tr>
    <tr>
        <td><strong><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">Choice</span></i></strong</td>
        <td><strong><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">{{player.decision}}</span></i></strong></td>
        <td><strong><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red"><b>{{player.other_player.decision}}</b></span></strong></td>
    </tr>
    <tr>
        <td><strong><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">Payoffs:</span></i></strong</td>
        <td><strong><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green"><b>{{player.payoff}}</b></span></strong></td>
        <td><strong><i><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: red">{{player.other_player.payoff}}</span></i></strong</td>
    </tr>
    <tr>
        <th colspan="4">
            <span style="font-size: 24pt; font-family:'Lato', sans-serif; color: black">
            Your total payoff:
            </span>
            <strong><span style="font-size: 24pt; font-family:'Lato', sans-serif; color: green">
                {{participant.payoff}}
            </span></strong>
        </th>
    </tr>
    </table>


{% endif %}


</p>


    {% next_button %}

    {% include Constants.instructions_template %}

{% endblock %}