{% 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>
    /* Add this to your existing styles */
    .image-box {
        position: relative;
        display: inline-block;
        width: 150px; /* Match image width */
        margin: 0 auto; /* Center the box */
    }

    .image-box img {
        width: 150px;
        height: 150px;
        display: block; /* Remove extra space below image */
    }

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

    /* Keep your existing table and other styles */
    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}}-II</strong>
            {% if player.participant.parent_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}}-II</strong>
            {% if player.participant.parent_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}}-II</strong>
            {% if player.participant.parent_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 {{ player.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 %}