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

{% block title %}

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

{% block content %}
<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 per row */
        gap: 30px;
        justify-items: center;
        margin: 20px;
    }

    .image-box {
        position: relative; /* Needed for absolute positioning */
        border: 1px solid #ccc;
        padding: 0;
        text-align: center;
        width: 150px;
        height: 150px; /* Fixed height for consistency */
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden; /* Keeps everything contained */
    }

    .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;
    }

    .space {
        color: white;
        font-weight: bold;
    }
</style>

<div style="display: flex; flex-direction: column; align-items: center; text-align: center; width:105%;">
<Br>
<br>
You will now be playing the exact same decision task as your predecessor with the successors of the families he/she was matched with. <Br>
You have been assigned to the following group of three to play the 16 rounds of the decision task.<br>
<br>
</div>

<div class="grid-container">
    {% for i in display_order %}
        <div class="image-box {% if i == MyOrder %}highlight-you{% endif %}">
                 {{ if i == 1}}<img src="/static/f{{ player.participant.Ana_Mmb1_id }}.png">
                {{ elif i == 2 }}<img src="/static/f{{ player.participant.Ana_Mmb2_id }}.png">
                {{ elif i == 3 }}<img src="/static/f{{ player.participant.Ana_Mmb3_id }}.png">
                {{endif}}
            <div class="image-caption">
                <strong>
                {{ if i == 1}} {{player.participant.Ana_fname_Mmb1}}{{ elif i == 2 }} {{player.participant.Ana_fname_Mmb2}}{{ elif i == 3 }} {{player.participant.Ana_fname_Mmb3}}{{endif}}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% elif Ana_generation == 3 %}III{% endif %}
                </strong>
                {% if i == MyOrder %}
                    <span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
            </div>
        </div>
    {% endfor %}
</div>

<br>
<br>

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