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

{{ block content }}

<div class="gate-layout">
    <div class="gate-main-card">
        <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-action">Status</th>
                </tr>
            </thead>
            <tbody>
                {% for candidate in candidates %}
                <tr class="candidate-row {% if candidate.dropped %}candidate-row-dropped{% endif %}">
                    <td class="col-candidate candidate-label">{{ candidate.label }}</td>
                    <td class="col-score score-cell" data-stage="resume">
                        {% if candidate.resume_revealed %}
                        <div class="score-bar-track">
                            <div class="score-bar-fill" style="width: {{ candidate.resume_bar_pct }}%;">
                                <span class="score-bar-label">{{ candidate.resume }}</span>
                            </div>
                        </div>
                        {% else %}
                        <div class="score-placeholder">click to reveal</div>
                        {% endif %}
                    </td>
                    <td class="col-score score-cell" data-stage="zoom">
                        {% if candidate.zoom_revealed %}
                        <div class="score-bar-track">
                            <div class="score-bar-fill" style="width: {{ candidate.zoom_bar_pct }}%;">
                                <span class="score-bar-label">{{ candidate.zoom }}</span>
                            </div>
                        </div>
                        {% else %}
                        <div class="score-placeholder">click to reveal</div>
                        {% endif %}
                    </td>
                    <td class="col-action status-cell">
                        {% if candidate.advanced %}
                        <span class="status-advanced">Advanced</span>
                        {% else %}
                        <span class="status-eliminated">Eliminated</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="gate-status-panel">
        <div class="gate-status-box">
            <div class="gate-status-title">Gate 2 Results</div>
            <div class="gate-status-count" style="font-size: 24px; margin-bottom: 12px;">{{ advanced_count }} Advanced</div>
            <div class="gate-status-item">Screened: {{ dropped_count }}</div>
            <div class="gate-status-item">Remaining: {{ advanced_count }}</div>
        </div>
        {{ next_button }}
    </div>
</div>

{{ endblock }}