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

{% block title %}
<div style="text-align: center;">
Generation and Families
</div>
{% endblock %}

{% block content %}
<style>
    .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 150px);
        grid-auto-flow: column;
        justify-content: center;
        align-items: center;
        margin: 30px auto;
        gap: 30px 60px;
    }

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

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

<div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
    <br><br>
    You have been assigned the following family name: <br>
    <b>{{ Ana_family_assignment }}</b>
    <br>
    You will have the below ID:<br>
    <b>{{ Ana_family_assignment }}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% elif Ana_generation == 3 %}III{% endif %}</b>
    <br>
</div>

<div class="grid-container">
    {% for name in assigned_families %}
        <div class="image-box {% if name == Ana_family_assignment %}highlight-you{% endif %}">
            {% if name == Ana_family_assignment %}
                <img src="/static/{{ name }}.png">
            {% else %}
                <img src="/static/{{ name }}.png" style="filter: grayscale(50%); opacity: 0.5;">
            {% endif %}

            {% if name == Ana_family_assignment %}
                <div class="image-caption">
            {% else %}
                <div class="image-caption" style="filter: grayscale(50%); opacity: 0.5;">
            {% endif %}
                <strong>
                    {{ name }}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% elif Ana_generation == 3 %}III{% endif %}
                </strong>
                {% if name == Ana_family_assignment %}
                    <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 %}