{% extends "base.html" %}

{% block title %}Recruiter Dashboard - Codingo{% endblock %}

{#
   This dashboard lists all candidates who have applied to jobs posted by the
   currently logged in recruiter.  Candidates are sorted from highest to
   lowest matching score.  The score is calculated on the fly by comparing
   the candidate's self‑reported skills to the job's required skills.  A
   placeholder button is provided for downloading a PDF report; the
   functionality will be implemented in a future iteration.
#}

{% block content %}
<section class="content-section">
    <ul class="breadcrumbs">
        <li><a href="{{ url_for('index') }}">Home</a></li>
        <li>Dashboard</li>
    </ul>

    <div class="section-title">
        <h2>Interviewed Candidates</h2>
        <p>Review candidates who have applied to your job postings</p>
    </div>

    {% if candidates %}
    <div class="card">
        <div class="card-body" style="overflow-x: auto;">
            <table class="dashboard-table" style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background-color: var(--primary); color: white; text-align: left;">
                        <th style="padding: 0.75rem;">Name</th>
                        <th style="padding: 0.75rem;">Email</th>
                        <th style="padding: 0.75rem;">Job Applied</th>
                        <th style="padding: 0.75rem;">Interview Score</th>
                        <th style="padding: 0.75rem;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in candidates %}
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 0.75rem;">{{ item.application.name }}</td>
                        <td style="padding: 0.75rem;">{{ item.application.email }}</td>
                        <td style="padding: 0.75rem;">{{ item.application.job.role }}</td>
                        <td style="padding: 0.75rem; font-weight: 600; color: var(--secondary);">{{ item.score_label }}</td>
                        <td style="padding: 0.75rem;">
                            <button class="btn btn-outline" disabled style="cursor: not-allowed;">Download Report (PDF)</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="card">
        <div class="card-body">
            <p>No candidate applications found for your job postings.</p>
        </div>
    </div>
    {% endif %}
</section>

<style>
.dashboard-table th, .dashboard-table td {
    text-align: left;
}

.dashboard-table th {
    font-weight: 600;
}

.dashboard-table tr:nth-child(even) {
    background-color: #f5f5f5;
}

.dashboard-table tr:hover {
    background-color: #eef5ff;
}
</style>
{% endblock %}