{{ block title }}
{{ if treatment == 'T1' }}Task 1{{ else }}Task 2{{ endif }}:
Trial {{ block_trial }} of {{ block_total }}
{{ endblock }}

{{ block content }}
<style>
    body { background: #f5f5f5; }
    .trial-page {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: center;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        color: #2c3e50;
    }
    .trial-page p {
        font-size: 16px;
        line-height: 1.6;
        max-width: 700px;
        margin: 0.5em auto;
        font-family: Georgia, serif;
    }
    #trial-canvas {
        display: block;
        margin: 0.8em auto;
        border-radius: 6px;
        border: 2px solid #2c3e50;
    }
    .step-btn {
        display: inline-block;
        padding: 14px 36px;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        color: white;
        margin-top: 0.8em;
        transition: background 0.15s;
    }
    .step-btn.blue { background: #3498db; }
    .step-btn.blue:hover { background: #2980b9; }
    .step-btn.orange { background: #e67e22; }
    .step-btn.orange:hover { background: #d35400; }

    .signal-panel {
        display: flex;
        gap: 2em;
        justify-content: center;
        margin: 0.8em 0;
    }
    .signal-card {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 0.8em 1.5em;
        width: 300px;
        flex: 0 0 300px;
        border: 2px solid #e0e0e0;
        text-align: left;
    }
    .signal-card.signal-i { border-color: #3498db; }
    .signal-card.signal-j { border-color: #e67e22; }
    .signal-card h3 {
        margin: 0 0 0.3em 0;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .signal-card.signal-i h3 { color: #3498db; }
    .signal-card.signal-j h3 { color: #e67e22; }
    .signal-value {
        font-size: 28px;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0.1em 0;
    }
    .signal-detail {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
    }

    .estimate-section {
        text-align: center;
        margin: 0.8em auto;
        padding: 1em;
        max-width: 500px;
        background: #fafafa;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
    }
    .estimate-section label {
        font-size: 16px;
        font-weight: 600;
        display: block;
        margin-bottom: 0.5em;
    }
    .estimate-section input[type="number"] {
        font-size: 24px;
        width: 160px;
        padding: 8px 12px;
        border: 2px solid #3498db;
        border-radius: 6px;
        text-align: center;
    }
    .estimate-hint {
        font-size: 12px;
        color: #888;
        margin-top: 0.5em;
    }

    .hidden { display: none; }
</style>

<div class="trial-page">

    <!-- Board is always visible -->
    <canvas id="trial-canvas" height="300"></canvas></canvas>

    <!-- STEP 1: Show first signal -->
    <div id="step-drop">
        <p>
            <strong>{{ n_i }}</strong> ball{{ if n_i > 1 }}s have{{ else }} has{{ endif }}
            been dropped from an unknown position on a {{ R }}-row board.
        </p>
        <button type="button" class="step-btn blue" onclick="doDrop()">
            Show first signal
        </button>
    </div>

    <!-- STEP 2: Signal card + reveal button (hidden until drop) -->
    <div id="step-signal" class="hidden">
        <div class="signal-panel" id="signal-panel">
            <div class="signal-card signal-i">
                <h3>First Signal</h3>
                <div class="signal-value">{{ x_i }}</div>
                <div class="signal-detail">
                    Average landing position of <strong>{{ n_i }}</strong> ball{{ if n_i > 1 }}s{{ endif }}
                    dropped on a {{ R }}-row board.
                </div>
            </div>
        </div>

        <div id="below-board">
            <p>A second signal was also generated from the same drop position.</p>
            <button type="button" class="step-btn orange" onclick="doReveal()">
                Reveal second signal
            </button>
        </div>
    </div>

    <!-- STEP 3: Estimate (hidden until reveal) -->
    <div id="estimate-area" class="hidden">
        <div class="estimate-section">
            <label for="id_theta_hat">What is your best estimate of the drop position?</label>
            <input type="number" name="theta_hat" id="id_theta_hat"
                   min="0" max="1000" step="0.01" required>
        </div>
    </div>

</div>

<div id="submit-wrap" class="hidden" style="text-align:center; margin-top:0.5em;">
    {{ next_button }}
</div>

<script>
(function() {

    var x_i = {{ x_i }};
    var x_j = {{ x_j }};
    var NUM_ROWS = {{ R }};
    var treatment = '{{ treatment }}';
    var n_j = {{ n_j }};
    var N_J_LO = {{ N_J_LO }};
    var N_J_HI = {{ N_J_HI }};

    var canvas = document.getElementById('trial-canvas');
    canvas.width = canvas.parentElement.clientWidth;
    var ctx = canvas.getContext('2d');
    var W = canvas.width;
    var H = canvas.height;

    // ================================================================
    //  Same coordinate system as demo, but only draw last 10 rows
    // ================================================================

    var PEG_RADIUS = 4;
    var VISIBLE_ROWS = 10; // only show bottom of board

    // Center on the midpoint of the two signals (not individual landings)
    var DISPLAY_OFFSET = Math.round((x_i + x_j) / 2);

    function toInternal(displayPos) {
        return (displayPos - DISPLAY_OFFSET) * 2;
    }
    function slotDisplayLabel(s) {
        return s / 2 + DISPLAY_OFFSET;
    }

    var neededHalf = Math.max(
        Math.abs(toInternal(x_i)),
        Math.abs(toInternal(x_j))
    ) + 14;
    var SLOT_RANGE = Math.max(40, neededHalf);
    if (SLOT_RANGE % 2 !== 0) SLOT_RANGE++;

    var BOARD_TOP = 15;
    var BOARD_BOTTOM = 130;
    var BOARD_LEFT = 60;
    var BOARD_RIGHT = W - 60;
    var BOARD_H = BOARD_BOTTOM - BOARD_TOP;
    var BOARD_W = BOARD_RIGHT - BOARD_LEFT;

    function slotToX(slot) {
        return BOARD_LEFT + (slot + SLOT_RANGE) / (2 * SLOT_RANGE) * BOARD_W;
    }
    // Map only the visible rows (last VISIBLE_ROWS) into the board area
    function visibleRowToY(row) {
        var firstVisible = NUM_ROWS - VISIBLE_ROWS;
        var localRow = row - firstVisible;
        return BOARD_TOP + (localRow / VISIBLE_ROWS) * BOARD_H;
    }

    // Convert signal positions to internal coordinates
    var internal_x_i = toInternal(x_i);
    var internal_x_j = toInternal(x_j);

    // State
    var showSignals = false;
    var showJ = false;

    function drawBoard() {
        ctx.fillStyle = '#1a1a2e';
        ctx.fillRect(0, 0, W, H);

        // Draw pegs for last VISIBLE_ROWS rows only
        ctx.fillStyle = '#5a6070';
        var firstVisible = NUM_ROWS - VISIBLE_ROWS;
        for (var r = firstVisible; r < NUM_ROWS; r++) {
            for (var s = -SLOT_RANGE; s <= SLOT_RANGE; s++) {
                if ((s + r) % 2 !== 0) continue;
                var px = slotToX(s);
                if (px < BOARD_LEFT - 5 || px > BOARD_RIGHT + 5) continue;
                var py = visibleRowToY(r);
                ctx.beginPath();
                ctx.arc(px, py, PEG_RADIUS, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        // Fade-out at top edge to suggest board continues upward
        var grad = ctx.createLinearGradient(0, BOARD_TOP - 5, 0, BOARD_TOP + 25);
        grad.addColorStop(0, 'rgba(26, 26, 46, 1)');
        grad.addColorStop(1, 'rgba(26, 26, 46, 0)');
        ctx.fillStyle = grad;
        ctx.fillRect(0, BOARD_TOP - 5, W, 30);

        // Landing zone number line
        var landingY = BOARD_BOTTOM + 15;
        ctx.strokeStyle = '#8090a0';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(BOARD_LEFT, landingY);
        ctx.lineTo(BOARD_RIGHT, landingY);
        ctx.stroke();

        // Tick marks: every slot gets a tick, labels every 10
        for (var s = -SLOT_RANGE; s <= SLOT_RANGE; s += 2) {
            var sx = slotToX(s);
            if (sx < BOARD_LEFT - 2 || sx > BOARD_RIGHT + 2) continue;
            var displayVal = slotDisplayLabel(s);
            if (displayVal % 10 === 0) {
                ctx.strokeStyle = '#8090a0';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(sx, landingY - 4);
                ctx.lineTo(sx, landingY + 8);
                ctx.stroke();
                ctx.fillStyle = '#9aa8b8';
                ctx.font = 'bold 14px Helvetica Neue, sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText(displayVal.toString(), sx, landingY + 24);
            } else {
                ctx.strokeStyle = '#6a7a8a';
                ctx.lineWidth = 1.5;
                ctx.beginPath();
                ctx.moveTo(sx, landingY - 3);
                ctx.lineTo(sx, landingY + 5);
                ctx.stroke();
            }
        }

        if (showSignals) {
        // Signal lines (no individual ball positions shown)
        var meanLabelY = landingY + 40;

        // First signal line (blue)
        var mx_i = slotToX(internal_x_i);
        ctx.strokeStyle = '#3498db';
        ctx.lineWidth = 2.5;
        ctx.setLineDash([6, 4]);
        ctx.beginPath();
        ctx.moveTo(mx_i, BOARD_BOTTOM);
        ctx.lineTo(mx_i, meanLabelY - 8);
        ctx.stroke();
        ctx.setLineDash([]);

        if (showJ) {
            // Second signal line (orange)
            var mx_j = slotToX(internal_x_j);
            ctx.strokeStyle = '#e67e22';
            ctx.lineWidth = 2.5;
            ctx.setLineDash([6, 4]);
            ctx.beginPath();
            ctx.moveTo(mx_j, BOARD_BOTTOM);
            ctx.lineTo(mx_j, meanLabelY - 8);
            ctx.stroke();
            ctx.setLineDash([]);

            // Position labels so they don't overlap
            var pxGap = Math.abs(mx_j - mx_i);
            ctx.font = 'bold 15px Helvetica Neue, sans-serif';

            if (pxGap < 140) {
                var iLeft = mx_i <= mx_j;
                ctx.textAlign = iLeft ? 'right' : 'left';
                ctx.fillStyle = '#3498db';
                ctx.fillText('First signal: ' + x_i, mx_i + (iLeft ? -10 : 10), meanLabelY);
                ctx.textAlign = iLeft ? 'left' : 'right';
                ctx.fillStyle = '#e67e22';
                ctx.fillText('Second signal: ' + x_j, mx_j + (iLeft ? 10 : -10), meanLabelY);
            } else {
                ctx.textAlign = 'center';
                ctx.fillStyle = '#3498db';
                ctx.fillText('First signal: ' + x_i, mx_i, meanLabelY);
                ctx.fillStyle = '#e67e22';
                ctx.fillText('Second signal: ' + x_j, mx_j, meanLabelY);
            }
        } else {
            ctx.font = 'bold 15px Helvetica Neue, sans-serif';
            ctx.textAlign = 'center';
            ctx.fillStyle = '#3498db';
            ctx.fillText('First signal: ' + x_i, mx_i, meanLabelY);
        }
        } // end showSignals
    }

    // ---- Step transitions ----

    window.doDrop = function() {
        document.getElementById('step-drop').classList.add('hidden');
        document.getElementById('step-signal').classList.remove('hidden');
        showSignals = true;
        drawBoard();
    };

    window.doReveal = function() {
        // Inject signal j card
        var jCardHTML =
            '<div class="signal-card signal-j">' +
            '<h3>Second Signal</h3>' +
            '<div class="signal-value">' + x_j + '</div>' +
            '<div class="signal-detail">';
        if (treatment === 'T1') {
            jCardHTML += 'Average landing position of <strong>' + n_j + '</strong> ball' +
                (n_j > 1 ? 's' : '') + ' dropped from the same position on a ' + NUM_ROWS + '-row board.';
        } else {
            jCardHTML += 'Average landing position of either <strong>' + N_J_LO + '</strong> or <strong>' +
                N_J_HI + '</strong> balls (chosen by 50/50 coin flip) dropped from the same position on a ' + NUM_ROWS + '-row board.';
        }
        jCardHTML += '</div></div>';
        document.getElementById('signal-panel').insertAdjacentHTML('beforeend', jCardHTML);

        // Hide reveal button, show estimate
        document.getElementById('below-board').classList.add('hidden');
        document.getElementById('estimate-area').classList.remove('hidden');
        document.getElementById('submit-wrap').classList.remove('hidden');

        showJ = true;
        drawBoard();

        setTimeout(function() {
            document.getElementById('id_theta_hat').focus();
        }, 100);
    };

    // Draw empty board on page load
    drawBoard();

})();
</script>
{{ endblock }}