{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Zoom Interview Screening - Round {{ round_num }}: Gate {{ gate_num }}
{% endblock %}

{% block content %}

<div class="gate-layout">
    <div class="gate-main-card">
        <h3>Zoom Interview Screening (Gate 2)</h3>
        <p>You are reviewing {{ available_candidates|length }} candidates who advanced from the Resume screening.</p>
        <p>Select exactly <strong>{{ required_count }}</strong> candidates to advance to the final decision stage.</p>

        <form method="POST">
            <input type="hidden" name="gate2_reveal_log" id="gate2_reveal_log" value='{{ initial_reveal_state_json }}'>

            <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</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 }}"
                                   {% if candidate.label in form_post_gate2_choices %}checked{% endif %}
                                   class="gate2-choice-checkbox">
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <input type="hidden" id="gate2-choices-json" name="gate2_choices" value="[]">

            <div class="form-group">
            <div class="gate-status-item"><strong>You do NOT need to click open every score before making a selection.</strong></div>
                <label>Selected: <span id="selected-count">0</span> / {{ required_count }}</label>
            </div>

            <button type="submit" class="btn btn-primary">Next</button>
        </form>
    </div>

    <div class="gate-status-panel">
        <h5>Selection Status</h5>
        <p>Resume Screening: Advanced <strong>{{ available_candidates|length }}</strong> candidates</p>
        <p>Zoom Interview: Selecting <strong>{{ required_count }}</strong> to advance</p>
        <div id="selection-counter" data-selection-counter="gate2">Selected: 0 / {{ required_count }}</div>
    </div>
</div>

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

    function updateCheckboxCount() {
        const checkboxes = document.querySelectorAll('input[name="gate2_choice_checkbox"]');
        const checked = Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
        const count = checked.length;
        if (selectionCountSpan) selectionCountSpan.textContent = count;
        if (selectionCounter) selectionCounter.textContent = `Selected: ${count} / {{ required_count }}`;
        if (gate2ChoicesInput) gate2ChoicesInput.value = JSON.stringify(checked);
        if (selectionCounter) {
            selectionCounter.classList.toggle('selection-complete', count === {{ required_count }});
            selectionCounter.classList.toggle('selection-error', count > {{ required_count }});
        }
    }

    window.initRevealLogging({
        initialState: {{ initial_reveal_state_json }},
        hiddenInputIds: ['gate2_reveal_log'],
        roundNumber: {{ round_num }},
        displayRound: {{ round_num }},
        condition: 'standard',
        gate: 'gate2',
        allowedStages: ['resume', 'zoom'],
    });

    document.querySelectorAll('input[name="gate2_choice_checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', updateCheckboxCount);
    });

    updateCheckboxCount();
});
</script>

{% endblock %}