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

{% block title %}
    Your Choice
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

    <style>
        .highlight-row-on-hover:hover td {
            background-color: #fcf8e3;
        }

    </style>

{% endblock %}

{% block content %}

    {% if player.role == 'Possessor' %}
    <h4> You currently possess the resource.   </h4>

    {% else %}
    <h4> The other player currently possesses the resource.  </h4>
    {% endif %}
    <img src="{% static 'HawkDovePossessor/MugSm.jpg' %}"/>

    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th colspan="2">The Other Participant
                    {% if player.role != 'Possessor' %} <img src="{% static 'HawkDovePossessor/MugVrSm.jpg' %}"/>{% endif %}
                </th>
            </tr>
            <tr>
                <th>Fight</th>
                <th>Don't Fight</th>
            </tr>
            <tr class="highlight-row-on-hover">
                <th rowspan="2">You 
                    {% if player.role == 'Possessor' %} <img src="{% static 'HawkDovePossessor/MugVrSm.jpg' %}"/>{% endif %} </th>
                <td><button name="decision" value="Fight" class="btn btn-primary btn-large">I will fight to
                    {% if player.role == 'Possessor' %} keep {% else %} get  {% endif %} it
                </button></td>
                <td>Your payoff: {{ Constants.Fight_payoff }} <br> Other player's payoff: {{ Constants.Fight_payoff }}</td>
                <td>Your payoff: {{ Constants.Hawk_payoff }} <br> Other player's payoff: {{Constants.Dove_payoff}}</td>
            </tr>
            <tr class="highlight-row-on-hover">
                <td><button name="decision" value="Do NOT Fight" class="btn btn-primary btn-large">I will NOT fight to 
                    {% if player.role == 'Possessor' %} keep {% else %} get  {% endif %} it
                </button></td>
                <td>Your payoff: {{Constants.Dove_payoff}} <br> Other player's payoff: {{ Constants.Hawk_payoff }}</td>
                <td>Your payoff: {{ Constants.Split_payoff }} <br> Other player's payoff: {{ Constants.Split_payoff }}</td>
            </tr>
        </table>
    </div>

{% endblock %}