{% block content %}

<style>
    @import "{% static 'negotiate.css' %}";

    .identity-board-wrapper {
        position: relative;
        display: inline-block;
        margin-top: 0.5rem;
    }

    .identity-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8px;
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
        line-height: 1.3;
        text-align: center;
        max-width: 16rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        pointer-events: none;
    }

    .identity-overlay strong {
        display: inline-block;
        margin: 0 0.12rem;
    }

    .identity-header {
        text-align: center;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }

    .identity-note {
        text-align: center;
        margin-top: 0.75rem;
        font-size: 1.2rem;
    }

    /* RESET: no scaling of boxes here, keep them normal */
    .participant-left .identity-box,
    .participant-right .identity-box {
        transform: none !important;
        transform-origin: center top;
        margin-bottom: 0;           /* no lift */
        display: inline-block;
        padding: 0.3rem 0.4rem 0.15rem 0.4rem;
        border: 1px solid #aaa;
        border-radius: 10px;
/* ---- ENLARGED BOX ---- */
.participant-left .identity-box,
.participant-right .identity-box {
    padding: 0.8rem 1rem;
    border: 2px solid #aaa;
    border-radius: 14px;
    transform: scale(2);
    transform-origin: top center;
    margin-bottom: -1.5rem;
    background: white;  /* helps visually separate content */
}

/* ---- SILHOUETTE ---- */
.participant-left .identity-box img,
.participant-right .identity-box img {
    width: 40px;
    transform: scale(2);
    transform-origin: top center;
    display: block;
    margin: 0 auto;

    /* CRUCIAL: create the gap below the silhouette */
    margin-bottom: 0.8rem;     /* adjust this for more/less space */
}

/* ---- ID TEXT: Human / AI ---- */
.participant-left .identity-box p,
.participant-right .identity-box p {
    font-size: 1.2rem;
    font-weight: 600;

    transform: scale(1.1);
    transform-origin: top center;

    display: block;
    margin-top: 0.6rem;        /* extra separation from silhouette */
    margin-bottom: 0;
}


    .player-info img {
        width: 40px;
    }
</style>

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

<table border="0" width="100%">
    <tr>
        <!-- LEFT OPPONENT ICON -->
        <td width="15%" class="participant-left">
            <div class="identity-box">
                {% if left_role == 'Human' %}
                    <img src="{% static 'images/human_silhouette.svg' %}"
                         alt="Human silhouette" width="40">
                    <p>Human</p>
                {% else %}
                    <img src="{% static 'images/ai_silhouette.svg' %}"
                         alt="AI silhouette" width="40">
                    <p>AI</p>
                {% endif %}
            </div>
        </td>

        <!-- BOARD + CENTRAL TEXT BOX -->
        <td style="text-align: center">
            <div class="identity-board-wrapper">
                <div class="board" id="triangle-board"></div>

                <div class="identity-overlay">
                    You are playing with
                    <strong>
                        {% if left_role == 'Human' %}a Human{% else %}an AI{% endif %}
                    </strong>
                    on your left and
                    <strong>
                        {% if right_role == 'Human' %}a Human{% else %}an AI{% endif %}
                    </strong>
                    on your right.
                </div>
            </div>
        </td>

        <!-- RIGHT OPPONENT ICON -->
        <td width="15%" class="participant-right">
            <div class="identity-box">
                {% if right_role == 'Human' %}
                    <img src="{% static 'images/human_silhouette.svg' %}"
                         alt="Human silhouette" width="40">
                    <p>Human</p>
                {% else %}
                    <img src="{% static 'images/ai_silhouette.svg' %}"
                         alt="AI silhouette" width="40">
                    <p>AI</p>
                {% endif %}
            </div>
        </td>
    </tr>

    <!-- YOUR ICON AT THE BOTTOM -->
    <tr>
        <td></td>
        <td style="text-align: center" class="player-info">
            <img src="{% static 'images/human_silhouette.svg' %}"
                 alt="Your Icon" width="40">
            <p>You</p>
        </td>
        <td></td>
    </tr>
</table>

<div class="identity-note">
    <br>Note the assigned identities of your opponents (Human or AI) below.<br>
    You will be asked to recall these labels later.
</div>

{{ next_button }}

<script>
    // Static preview of the triangle board:
    function createCell(row, col) {
        const cellDiv = document.createElement("div");
        cellDiv.classList.add("cell");
        cellDiv.dataset.row = row;
        cellDiv.dataset.col = col;

        for (let i = 1; i <= 4; i++) {
            const ring = document.createElement("div");
            ring.classList.add("ring", `ring-${i}`);
            ring.id = `ring_${row}_${col}_${i}`;
            cellDiv.appendChild(ring);
        }
        return cellDiv;
    }

    function createPreviewBoard() {
        const counts = [13,12,11,10,9,8,7,6,5,4,3,2,1];
        const board = document.getElementById("triangle-board");
        counts.forEach((cnt, idx) => {
            const rowDiv = document.createElement("div");
            rowDiv.classList.add("row");
            const row = idx + 1;
            for (let col = 1; col <= cnt; col++) {
                rowDiv.appendChild(createCell(row, col));
            }
            board.appendChild(rowDiv);
        });
    }

    document.addEventListener("DOMContentLoaded", createPreviewBoard);
</script>

{% endblock %}