{% 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;">
                            {#
                                Provide a link to download the candidate's interview report.  The
                                ``url_for`` call targets the API endpoint defined in
                                ``backend/routes/interview_api.py``.  It passes the application ID
                                (used as the interview identifier) so that the backend knows which
                                candidate to generate a report for.  Styling is handled via the
                                ``download-report-btn`` class defined below.
                            #}
                            <a href="{{ url_for('interview_api.download_report', application_id=item.application.id) }}"
                               class="download-report-btn"
                               title="Download interview report as PDF">
                                Download Report (PDF)
                            </a>
                        </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>
<style>
/*
 * Custom styling for the download report link.  The default button styles
 * blend into the table background, making the report action hard to see.  A
 * subtle border and hover effect improve visibility without altering the
 * overall aesthetic of the dashboard.
 */
.download-report-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary);
    border-radius: 4px;
    color: var(--primary);
    background-color: #fff;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.download-report-btn:hover {
    background-color: var(--primary);
    color: #fff;
}
</style>
{% endblock %}