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

{% block title %}
<div style="text-align: center;">
Endowment Assignment
</div>
{% endblock %}

{% block content %}
<style>

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

    .otree-timer {
        display: none;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        justify-items: center;
        margin: 20px;
    }

    .image-box {
        position: relative;
        border: 1px solid #ccc;
        padding: 0;
        text-align: center;
        width: 150px;
        height: 150px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

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

    .highlight-you {
        border: 8px solid grey;
        background-color: #ffffff;
    }

    .image-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5px 0;
        font-size: 14px;
    }

    .you-label {
        color: black;
        font-weight: bold;
    }

    .endowment-status {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        justify-items: center;
        margin: 20px;
        font-weight: bold;
    }

    .endowment-high {
        color: #28a745;
    }

    .endowment-low {
        color: #dc3545;
    }
</style>
<Br>
<br>
<div style="text-align: center; ">
    In your group of three members, the endowments for the 16 rounds are shown below:
</div>

<div class="grid-container">

    <div class="image-box {% if player.participant.my_order == 1 %}highlight-you{% endif %}">
        <img src="/static/f{{ player.participant.Ana_Mmb1_id }}.png">
        <div class="image-caption">
            <strong>{{ player.participant.Ana_fname_Mmb1 }}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% else %}III{% endif %}</strong>
            {% if player.participant.my_order == 1 %}
                    <span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
        </div>
    </div>

    <div class="image-box {% if player.participant.my_order == 2 %}highlight-you{% endif %}">
        <img src="/static/f{{ player.participant.Ana_Mmb2_id }}.png">
        <div class="image-caption">
            <strong>{{ player.participant.Ana_fname_Mmb2 }}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% else %}III{% endif %}</strong>
            {% if player.participant.my_order == 2 %}
                 <span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
        </div>
    </div>

    <div class="image-box {% if player.participant.my_order == 3 %}highlight-you{% endif %}">
        <img src="/static/f{{ player.participant.Ana_Mmb3_id }}.png">
        <div class="image-caption">
            <strong>{{ player.participant.Ana_fname_Mmb3 }}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% else %}III{% endif %}</strong>
            {% if player.participant.my_order == 3 %}
                 <span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
        </div>
    </div>

</div>

<div class="endowment-status">
    <div class="{% if player.participant.Ana_Edmt_Mmb1 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb1 }} ECUs ({% if player.participant.Ana_Edmt_Mmb1 == 30 %}High{% else %}Low{% endif %})
    </div>
    <div class="{% if player.participant.Ana_Edmt_Mmb2 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb2 }} ECUs ({% if player.participant.Ana_Edmt_Mmb2 == 30 %}High{% else %}Low{% endif %})
    </div>
    <div class="{% if player.participant.Ana_Edmt_Mmb3 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb3 }} ECUs ({% if player.participant.Ana_Edmt_Mmb3 == 30 %}High{% else %}Low{% endif %})
    </div>
</div>

<div style="margin: 30px auto; max-width: 700px; text-align: left;">
    You have received the <b>{% if player.participant.Ana_Endowment == 30 %}high{% else %}low{% endif %}</b> endowment. <br><br>

<div style="background-color: #f2f2f2; padding: 8px; border-radius: 6px;">
    The high endowment above was assigned to who
    {% if Ana_RankingType == 1 %}
       grabbed the <u>least</u> number of tokens in the Token Grabbing Task among your three group members.
    {% elif Ana_RankingType == 2 %}
       grabbed the <u>most</u> number of tokens in the Token Grabbing Task among your three group members.
    {% elif Ana_RankingType == 3 %}
       had the <u>most</u> heads flipped in the Coin Flipping Task among your three group members.
    {% elif Ana_RankingType == 4 %}
       had the <u>least</u> heads flipped in the Coin Flipping Task among your three group members.
    {% endif %}
    </div>
</div>
</div>
<Br>
<br>
<div style="text-align: center;"> Please read the information above carefully.<br> The button will appear shortly. </div>


<!--<div style = " display: flex; justify-content: right; align-items: right;  ">-->
<!--        <button class="btn btn-primary">Next</button>-->
<!--    </div>-->
{% endblock %}