{{ extends "global/Page.html" }}
{{ block title }}Main Round {{ round_num }} of {{ total_main_rounds }} - Resume Screening{{ endblock }}

{{ block content }}

{% 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="gate-layout">
    <div class="gate-main-card">
        <div class="candidate-table-area">
            <div class="stage-instruction-box">
                <p>Resume scores are now available. Click any score cell you want to inspect, then select exactly {{ required_count }} candidates to advance to the Zoom 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-action">Select</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for candidate in candidates %}
                        <tr>
                            <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-placeholder">click to reveal</div>
                                <div class="score-bar-track" style="display:none;">
                                    <div class="score-bar-fill" style="width: {{ candidate.resume_bar_pct }}%;">
                                        <span class="score-bar-label">{{ candidate.resume }}</span>
                                    </div>
                                </div>
                            </td>
                            <td class="col-action select-cell">
                                {% if candidate.label in form_post_gate1_choices %}
                                    <input type="checkbox" id="gate1-{{ candidate.label }}" name="gate1_checkbox" value="{{ candidate.label }}" checked>
                                {% else %}
                                    <input type="checkbox" id="gate1-{{ candidate.label }}" name="gate1_checkbox" value="{{ candidate.label }}">
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </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="gate1" data-selection-status="gate1">Selected: 0 / {{ required_count }}</div>
        </div>
    </aside>
</div>

<input type="hidden" id="gate1-choices-json" name="gate1_choices" value="">
<input type="hidden" id="gate1-initial-checked-json" name="gate1_initial_checked" value="[]">
<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 }}

<script src="{{ static 'reveal-log.js' }}"></script>
<script>
function getGate1Checkboxes() {
    return Array.from(document.querySelectorAll('input[name="gate1_checkbox"]'));
}

function updateGate1Counter(requiredCount) {
    const boxes = getGate1Checkboxes();
    const selected = boxes.filter(cb => cb.checked && !cb.disabled).map(cb => cb.value);
    const count = selected.length;

    document.querySelectorAll('[data-selection-counter="gate1"]').forEach(el => {
        el.textContent = `Selected: ${count} / ${requiredCount}`;
    });

    const hiddenInput = document.getElementById('gate1-choices-json');
    if (hiddenInput) {
        hiddenInput.value = JSON.stringify(selected);
    }

    const statusBox = document.querySelector('[data-selection-status="gate1"]');
    if (statusBox) {
        statusBox.classList.toggle('selection-complete', count === requiredCount);
        statusBox.classList.toggle('selection-error', count > requiredCount);
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const requiredCount = {{ required_count }};
    const initialCheckedInput = document.getElementById('gate1-initial-checked-json');

    function captureInitialState() {
        const initialChecked = getGate1Checkboxes().filter(cb => cb.checked).map(cb => cb.value);
        if (initialCheckedInput) initialCheckedInput.value = JSON.stringify(initialChecked);
    }

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

    getGate1Checkboxes().forEach(cb => cb.addEventListener('change', function () { updateGate1Counter(requiredCount); }));

    captureInitialState();
    updateGate1Counter(requiredCount);
});
</script>

</form>

{{ endblock }}