{% 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: 0.9rem;
    }

    .identity-box {
        border: 1px solid #aaa;
        border-radius: 10px;
        padding: 0.5rem 0.6rem 0.4rem 0.6rem;
        display: inline-block;
        text-align: left;
        font-size: 0.95rem;
    }

    .identity-box-title {
        font-weight: 600;
        margin-bottom: 0.3rem;
        text-align: center;
    }

    /* make the radio buttons sit nicely */
    .identity-box .otree-form-errors {
        margin-bottom: 0.3rem;
    }
</style>

<div class="identity-header">
Recall Check: Opponent Labels
</div>

<table border="0" width="100%">
    <tr>
        <!-- LEFT QUIZ: choose Human / AI -->
        <td width="15%" class="participant-left">
            <div class="identity-box">
                <div class="identity-box-title">Left opponent</div>
                {{ formfield 'quiz_left_identity' label="" }}
            </div>
        </td>

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

                <div class="identity-overlay">
                    <br>Based on the icons shown at the start as well as during the game, what were the labels for your opponents.<br>
                </div>
            </div>
        </td>

        <!-- RIGHT QUIZ: choose Human / AI -->
        <td width="15%" class="participant-right">
            <div class="identity-box">
                <div class="identity-box-title">Right opponent</div>
                {{ formfield 'quiz_right_identity' label="" }}
            </div>
        </td>
    </tr>

    <!-- YOUR ICON AT THE BOTTOM (same as preview) -->
    <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">
    Please click "Next" and answer some questions.
</div>

{{ next_button }}

<script>
    // Static preview of the triangle board (same as preview page):
    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 %}