{{ extends "global/Page.html" }}
{{ block title }}Main Round {{ round_num }} of {{ total_main_rounds }} - Gate 2 After{{ endblock }}

{{ block content }}

<link rel="stylesheet" href="{{ static 'hiring-funnel.css' }}">

<div class="table-scroll">
    <table class="candidate-scores-table">
        <thead>
            <tr>
                <th class="score-type-header" rowspan="2">Score Type</th>
                <th colspan="10" style="text-align: center; border-bottom: 1px solid #999; padding: 4px; font-weight: bold;">Candidates</th>
            </tr>
            <tr>
                {% for candidate in candidates %}
                    <th class="candidate-header{% if candidate.eliminated %} eliminated{% endif %}">{% if not candidate.eliminated %}{{ candidate.label }}{% endif %}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="row-label">Stage 1: Resume</td>
                {% for candidate in candidates %}
                    <td class="score-cell{% if candidate.eliminated %} eliminated{% endif %}">{% if not candidate.eliminated %}{{ candidate.resume }}{% endif %}</td>
                {% endfor %}
            </tr>
            <tr>
                <td class="row-label">Stage 2: Zoom</td>
                {% for candidate in candidates %}
                    <td class="score-cell{% if candidate.eliminated %} eliminated{% endif %}">{% if not candidate.eliminated %}{{ candidate.zoom }}{% endif %}</td>
                {% endfor %}
            </tr>
        </tbody>
    </table>
</div>

<div class="instruction-text" style="margin-top: 20px;">
    <p>Now {{ advanced_count }} candidates remain. Eliminated candidates are shaded grey. Click next to see In-person intervew scores and make your final decision.</p>
</div>

{{ next_button }}

{{ endblock }}