{{ extends "global/Page.html" }}
{{ block title }}Main Round {{ round_num }} of {{ total_main_rounds }} - Zoom Interview Screening (Gate 2){{ endblock }}

{{ block content }}

<form method="post">
<div class="gate-layout">
    <div class="gate-main-card">
        <div class="stage-instruction-box">
            <p>Zoom scores are now newly available for the candidates who advanced from Resume screening. Click any score cell you want to inspect, then select exactly {{ required_count }} candidates to advance to the final stage.</p>
        </div>

        <div style="max-height: 680px; overflow-y: auto; overflow-x: hidden;">
            <table class="gate-table candidate-table-vertical">
                <thead>
                    <tr>
                        <th class="col-candidate">Candidate</th>
                        <th class="col-score">Resume score</th>
                        <th class="col-score">Zoom score (new)</th>
                        <th class="col-action">Select</th>
                    </tr>
                </thead>
                <tbody>
                    {% for candidate in candidates %}
                    <tr class="candidate-row" data-label="{{ candidate.label }}">
                        <td class="col-candidate candidate-label">{{ candidate.label }}</td>
                        <td class="col-score score-cell score-hidden score-clickable" data-candidate="{{ candidate.label }}" data-stage="resume">
                            <div class="score-bar-track resume-content" style="display:none;">
                                <div class="score-bar-fill" style="width: {{ candidate.resume_bar_pct }}%;">
                                    <span class="score-bar-label">{{ candidate.resume }}</span>
                                </div>
                            </div>
                            <div class="score-placeholder resume-placeholder">click to reveal</div>
                        </td>
                        <td class="col-score score-cell score-hidden score-clickable" data-candidate="{{ candidate.label }}" data-stage="zoom">
                            <div class="score-bar-track zoom-content" style="display:none;">
                                <div class="score-bar-fill" style="width: {{ candidate.zoom_bar_pct }}%;">
                                    <span class="score-bar-label">{{ candidate.zoom }}</span>
                                </div>
                            </div>
                            <div class="score-placeholder zoom-placeholder">click to reveal</div>
                        </td>
                        <td class="col-action select-cell">
                            <input type="checkbox" name="gate2_choice_checkbox" value="{{ candidate.label }}" class="gate2-choice-checkbox" {% if candidate.label in form_post_gate2_choices %}checked{% endif %}>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <aside class="gate-status-panel">
        <div class="gate-status-box selection-status-box">
            <div class="gate-status-title">Selection Status</div>
            <div class="gate-status-item">You do NOT need to click open every score before making a selection.</div>
            <div class="gate-status-item" id="selection-counter" data-selection-counter="gate2">Selected: 0 / {{ required_count }}</div>
        </div>
    </aside>
</div>

<input type="hidden" id="gate2-choices-json" name="gate2_choices" value="[]">
<input type="hidden" id="gate2-reveal-log" name="gate2_reveal_log" value='{{ initial_reveal_state_json }}'>
<input type="hidden" id="revealed-stages-json" name="revealed_stages_json" value='{{ initial_revealed_stages_json }}'>

{{ next_button }}

<script src="{{ static 'reveal-log.js' }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectionCounter = document.getElementById('selection-counter');
    const gate2ChoicesInput = document.getElementById('gate2-choices-json');

    function updateSelectionCounter() {
        const boxes = Array.from(document.querySelectorAll('input[name="gate2_choice_checkbox"]'));
        const checked = boxes.filter(b => b.checked).map(b => b.value);
        const count = checked.length;
        if (selectionCounter) selectionCounter.textContent = `Selected: ${count} / {{ required_count }}`;
        if (gate2ChoicesInput) gate2ChoicesInput.value = JSON.stringify(checked);
    }

    window.initRevealLogging({
        initialState: {{ initial_reveal_state_json }},
        hiddenInputIds: ['gate2-reveal-log'],
        stageInputIds: ['revealed-stages-json'],
        roundNumber: {{ round_num }},
        displayRound: {{ round_num }},
        condition: 'standard',
        gate: 'gate2',
        allowedStages: ['resume', 'zoom'],
    });

    document.querySelectorAll('input[name="gate2_choice_checkbox"]').forEach(cb => cb.addEventListener('change', updateSelectionCounter));

    updateSelectionCounter();
});
</script>

</form>

{{ endblock }}