{{ extends "global/Page.html" }}
{{ block title }}Main Round {{ round_num }} of {{ total_main_rounds }} - Final Hiring Decision (Gate 3){{ endblock }}

{{ block content }}

{% if form_error %}
    <div class="alert alert-danger">{{ form_error }}</div>
{% endif %}

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

    <div class="gate-layout gate3-layout">
        <div class="gate-main-card">
            <h3>Final Hiring Decision (Gate 3)</h3>
            <div class="stage-instruction-box">
                <p>In-person scores are now newly available for the finalists. Click any score cell you want to inspect, then choose exactly 1 candidate to hire.</p>
            </div>

            <div class="vertical-table-scroll">
                <table class="gate-table candidate-table-vertical">
                    <thead>
                        <tr>
                            <th class="col-candidate">Candidate</th>
                            <th class="col-score">Resume</th>
                            <th class="col-score">Zoom</th>
                            <th class="col-score">In-person (new)</th>
                            <th class="col-action">Hire</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-score score-cell score-hidden score-clickable" data-candidate="{{ candidate.label }}" data-stage="inperson">
                                <div class="score-bar-track inperson-content" style="display:none;">
                                    <div class="score-bar-fill" style="width: {{ candidate.inperson_bar_pct }}%;">
                                        <span class="score-bar-label">{{ candidate.inperson }}</span>
                                    </div>
                                </div>
                                <div class="score-placeholder inperson-placeholder">click to reveal</div>
                            </td>
                            <td class="col-action select-cell">
                                <input type="radio" name="hired_candidate" value="{{ candidate.label }}" class="hire-radio" {% if form_post_hired_candidate == candidate.label %}checked{% endif %} required>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {{ next_button }}
        </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" id="selection-counter" data-selection-counter="gate3">Selected: 0 / 1</div>
                <p id="current-selection">Current selection: None</p>
            </div>
        </aside>
    </div>
</form>

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

    function updateSelection() {
        const selected = document.querySelector('.hire-radio:checked');
        if (selected) {
            if (currentSelection) currentSelection.textContent = `Current selection: ${selected.value}`;
            if (selectionCounter) selectionCounter.textContent = 'Selected: 1 / 1';
        } else {
            if (currentSelection) currentSelection.textContent = 'Current selection: None';
            if (selectionCounter) selectionCounter.textContent = 'Selected: 0 / 1';
        }
    }

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

    document.querySelectorAll('.hire-radio').forEach(function (radio) {
        radio.addEventListener('change', updateSelection);
    });

    updateSelection();
});
</script>

{{ endblock }}