{{ block title }}Trial {{ player.round_number }}{{ endblock }}
{{ block content }}

<style>
    .pixel-grid {
        display: grid;
        grid-template-columns: repeat({{ grid_width }}, 1fr);
        grid-template-rows: repeat({{ grid_height }}, 1fr);
        gap: 1px;
        width: 500px;
        height: 250px;
        margin: 0 auto;
        background-color: #333;
    }
    .pixel {
        min-width: 0;
        min-height: 0;
    }
</style>

<div class="text-center">
    <h4>Which color is the majority?</h4>
    <div id="grid-container" class="pixel-grid mb-3"></div>
    <p id="timer-msg">Image will disappear in 2 seconds...</p>
</div>

<script>
    let trueColor = "{{ true_color }}";
    let totalPixels = {{ total_pixels }};
    let majorityCount = Math.floor(totalPixels * 0.51);
    let minorityCount = totalPixels - majorityCount;
    let redCount = (trueColor === "Red") ? majorityCount : minorityCount;
    let blueCount = totalPixels - redCount;

    let pixels = [];
    for (let i = 0; i < redCount; i++) pixels.push("red");
    for (let i = 0; i < blueCount; i++) pixels.push("blue");

    // Shuffle
    for (let i = pixels.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [pixels[i], pixels[j]] = [pixels[j], pixels[i]];
    }

    let container = document.getElementById('grid-container');
    pixels.forEach(color => {
        let div = document.createElement('div');
        div.className = 'pixel';
        div.style.backgroundColor = (color === 'red') ? '#ff4136' : '#0074d9';
        container.appendChild(div);
    });

    // Auto-submit after 2 seconds (matches timeout_seconds in pages.py)
    setTimeout(function() {
        document.getElementById("form").submit();
    }, 2000);
</script>

{{ endblock }}