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

{% block title %}
<div style="text-align: center;">
    <h1>Decision Result</h1>
    <h2>Round {{ round_number }}</h2>
</div>
{% endblock %}

{% block content %}
<style>
    .image-box {
        position: relative;
        display: inline-block;
        width: 150px;
        margin: 0 auto;
    }

    .image-box img {
        width: 150px;
        height: 150px;
        display: block;
    }

    .image-caption {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        font-size: 14px;
        background-color: rgba(255, 255, 255, 0.9);
        margin-top: -50px;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
        vertical-align: middle;
    }

    th {
        background-color: #f8f8f8;
        font-weight: bold;
    }

    .space {
        color: white;
        font-weight: bold;
    }

    .you-label {
        color: black;
        font-weight: bold;
    }
</style>
<br><br>
<table>
    <tr>
        <th>Member</th>
        <td>
            <div class="image-box">
                <img src="/static/f{{ player.participant.Ana_Mmb1_id }}.png" class="member-img">
                <div class="image-caption">
                    <strong>{{ player.participant.Ana_fname_Mmb1 }}-I</strong>
                    {% if Ana_own_id == player.participant.Ana_Mmb1_id %}
                        <span class="you-label"><br>(You)</span>
                    {% else %}
                        <span class="space"><br>(Not You)</span>
                    {% endif %}
                </div>
            </div>
        </td>
        <td>
            <div class="image-box">
                <img src="/static/f{{ player.participant.Ana_Mmb2_id }}.png" class="member-img">
                <div class="image-caption">
                    <strong>{{ player.participant.Ana_fname_Mmb2 }}-I</strong>
                    {% if Ana_own_id == player.participant.Ana_Mmb2_id %}
                        <span class="you-label"><br>(You)</span>
                    {% else %}
                        <span class="space"><br>(Not You)</span>
                    {% endif %}
                </div>
            </div>
        </td>
        <td>
            <div class="image-box">
                <img src="/static/f{{ player.participant.Ana_Mmb3_id }}.png" class="member-img">
                <div class="image-caption">
                    <strong>{{ player.participant.Ana_fname_Mmb3 }}-I</strong>
                    {% if Ana_own_id == player.participant.Ana_Mmb3_id %}
                        <span class="you-label"><br>(You)</span>
                    {% else %}
                        <span class="space"><br>(Not You)</span>
                    {% endif %}
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <th>Endowment</th>
        <td>{{ player.participant.Ana_Edmt_Mmb1 }} ECUs {% if player.participant.Ana_Edmt_Mmb1 == 30 %}(H){% else %}(L){% endif %}</td>
        <td>{{ player.participant.Ana_Edmt_Mmb2 }} ECUs {% if player.participant.Ana_Edmt_Mmb2 == 30 %}(H){% else %}(L){% endif %}</td>
        <td>{{ player.participant.Ana_Edmt_Mmb3 }} ECUs {% if player.participant.Ana_Edmt_Mmb3 == 30 %}(H){% else %}(L){% endif %}</td>
    </tr>
    <tr>
        <th>Contribution</th>
        <td>{{ Ana_Ctbt_Mmb1 }} ECUs</td>
        <td>{{ Ana_Ctbt_Mmb2 }} ECUs</td>
        <td>{{ Ana_Ctbt_Mmb3 }} ECUs</td>
    </tr>
</table>
<br><br>
<div style="text-align: center;">
    <b>You were assigned a total of {{ player.participant.Ana_punishpoints_received }} point(s) by other group members in this round.</b><br>
    (20 indicates the most disapproval, 0 indicates the least disapproval)<br>
    Your earning in this round is {{ payoff }} ECU(s).
</div>

<br><br>

<div style="display: flex; align-items: center; justify-content: flex-end;">
    <button id="submit-btn" class="btn btn-primary btn-lg">{% trans 'Proceed' %}</button>
</div>
{% endblock %}