{{ extends "global/Page.html" }}
{{ block title }}Practice Round - Resume Screening{{ endblock }}

{{ block content }}

<link rel="stylesheet" href="{{ static 'hiring-funnel.css' }}">

{{ if form_error }}
<div style="background-color: #ffcccc; border: 2px solid #ff0000; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
    <p style="color: #cc0000; font-weight: bold;">{{ form_error }}</p>
</div>
{{ endif }}

<form method="post">

<div class="table-scroll">
    <table class="candidate-scores-table">
        <thead>
            <tr>
                <th class="score-type-header" rowspan="2">Score Type</th>
                <th colspan="{{ candidates|length }}" style="text-align: center; border-bottom: 1px solid #999; padding: 4px; font-weight: bold;">Candidates</th>
            </tr>
            <tr>
                {% for candidate in candidates %}
                    <th class="candidate-header">{{ candidate.label }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            <tr id="resume-row" class="score-row">
                <td class="row-label">Resume</td>
                {% for candidate in candidates %}
                    <td class="score-cell score-hidden score-clickable" data-candidate="{{ candidate.label }}" data-stage="resume">
                        <div class="hidden-placeholder score-placeholder">click to reveal</div>
                        <div class="score-content score-bar-track" style="display:none;">
                            <div class="score-bar-wrap">
                                <div class="score-bar" style="height: {{ candidate.resume_bar_pct }}%;"></div>
                            </div>
                            <div class="score-number">{{ candidate.resume }}</div>
                        </div>
                    </td>
                {% endfor %}
            </tr>
            <tr class="checkbox-row">
                <td class="row-label">Select</td>
                {% for candidate in candidates %}
                    <td class="checkbox-cell">
                        {% if candidate.label in form_post_gate1_choices %}
                            <input type="checkbox" id="practice-gate1-{{ candidate.label }}" name="gate1_choices" value="{{ candidate.label }}" checked>
                        {% else %}
                            <input type="checkbox" id="practice-gate1-{{ candidate.label }}" name="gate1_choices" value="{{ candidate.label }}">
                        {% endif %}
                    </td>
                {% endfor %}
            </tr>
        </tbody>
    </table>
</div>

<div class="instruction-text" style="margin-top: 20px;">
    <p><strong>Practice Round - Resume Screening:</strong> Each Resume score is hidden initially. Click an individual score cell to reveal that candidate's Resume score. Revealing one candidate's score does not reveal other candidates' scores. Select exactly <strong>{{ required_count }} candidates</strong> to advance to the Zoom interview screening.</p>
</div>

                <div class="gate-instruction"><strong>You do NOT need to click open every score before making a selection.</strong></div>
<div class="gate-instruction" id="selection-counter">Selected: 0 / {{ required_count }}</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('input[name="gate1_choices"]');
    const required = {{ required_count }};
    const counter = document.getElementById('selection-counter');
    const revealLogInput = document.getElementById('gate1-reveal-log');
    const revealedStagesInput = document.getElementById('revealed-stages-json');
    const revealLogJsonInput = document.getElementById('reveal-log-json');
    const initialRevealState = {{ initial_reveal_state_json }};
    const revealedCells = new Set(initialRevealState.revealed_cells || []);
    const revealLog = Array.isArray(initialRevealState.reveal_log) ? initialRevealState.reveal_log.slice() : [];
    let startTime = Date.now();

    function cellKey(candidate, stage) {
        return `${candidate}:${stage}`;
    }

    function revealedStages() {
        return Array.from(revealedCells).some(key => key.endsWith(':resume')) ? ['resume'] : [];
    }

    function updateCounter() {
        const selected = document.querySelectorAll('input[name="gate1_choices"]:checked').length;
        counter.textContent = `Selected: ${selected} / ${required}`;
        counter.className = 'gate-instruction';
        if (selected < required) counter.classList.add('warning');
        else if (selected > required) counter.classList.add('error');
    }

    function applyRevealState() {
        document.querySelectorAll('.score-cell[data-candidate][data-stage]').forEach(cell => {
            const visible = revealedCells.has(cellKey(cell.dataset.candidate, cell.dataset.stage));
            const hidden = cell.querySelector('.score-placeholder');
            const content = cell.querySelector('.score-bar-track');
            if (hidden) hidden.style.display = visible ? 'none' : 'block';
            if (content) content.style.display = visible ? 'flex' : 'none';
            cell.classList.toggle('score-hidden', !visible);
            cell.classList.toggle('score-revealed', visible);
        });
    }

    function updateRevealLog() {
        const serialized = JSON.stringify({
            revealed_stages: revealedStages(),
            revealed_cells: Array.from(revealedCells),
            reveal_log: revealLog
        });
        if (revealedStagesInput) revealedStagesInput.value = JSON.stringify(revealedStages());
        if (revealLogJsonInput) revealLogJsonInput.value = serialized;
        if (revealLogInput) revealLogInput.value = serialized;
    }

    function revealCell(cell) {
        const key = cellKey(cell.dataset.candidate, cell.dataset.stage);
        if (revealedCells.has(key)) return;
        revealedCells.add(key);
        revealLog.push({
            candidate: cell.dataset.candidate,
            stage: cell.dataset.stage,
            cell_key: key,
            t_ms: Date.now() - startTime,
            order: revealLog.length + 1
        });
        applyRevealState();
        updateRevealLog();
    }

    document.querySelectorAll('.score-cell[data-candidate][data-stage]').forEach(cell => {
        cell.addEventListener('click', function() { revealCell(cell); });
    });
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateCounter);
    });
    applyRevealState();
    updateRevealLog();
    updateCounter();
});
</script>

<input type="hidden" id="gate1-reveal-log" name="gate1_reveal_log" value='{{ initial_reveal_state_json }}'>
<input type="hidden" id="revealed-stages-json" name="revealed_stages_json" value='{{ initial_revealed_stages_json }}'>
<input type="hidden" id="reveal-log-json" name="reveal_log_json" value='{{ initial_reveal_state_json }}'>

{{ next_button }}

</form>

{{ endblock }}