{% load i18n %}

{% if candidates %}
<div class="candidate-table-responsive">
    <form method="post" id="candidate-action-form">
        {% csrf_token %}
        <table class="candidate-table">
            <thead>
                <tr>
                    <th scope="col">{% trans "Name / Contact" %}</th>
                    <th scope="col">{% trans "AI Score" %}</th>
                    <th scope="col">{% trans "Status" %}</th>
                    <th scope="col">{% trans "Stage" %}</th>
                    <th scope="col" class="text-end">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for candidate in candidates %}
                <tr>
                    <td>
                        <div class="candidate-name">{{ candidate.name }}</div>
                        <div class="candidate-details">
                            <i class="fas fa-envelope me-1"></i> {{ candidate.email|default:"N/A" }}<br>
                            <i class="fas fa-phone me-1"></i> {{ candidate.phone|default:"N/A" }}
                        </div>
                        {% if is_potential_view %}
                            {# Show candidate ID in this view to help with bulk update ID entry #}
                            <div class="candidate-details mt-1">
                                ID: **{{ candidate.id }}**
                            </div>
                        {% endif %}
                    </td>
                    <td>
                        <span class="status-badge bg-score">
                            {{ candidate.match_score|default:"0" }}
                        </span>
                    </td>
                    <td>
                        <span class="status-badge 
                            {% if candidate.applicant_status == 'Candidate' %}bg-candidate{% else %}bg-applicant{% endif %}">
                            {{ candidate.get_applicant_status_display }}
                        </span>
                    </td>
                    <td>
                        <span class="stage-badge stage-{{ candidate.stage }}">
                            {{ candidate.get_stage_display }}
                        </span>
                        {% if candidate.stage == "Exam" and candidate.exam_status %}
                            <br>
                            <span class="status-badge bg-exam-status mt-1">
                                {{ candidate.get_exam_status_display }}
                            </span>
                        {% endif %}
                    </td>
                    <td class="text-end">
                        <div class="btn-group btn-group-sm" role="group">

                            {# View Candidate Criteria/Details (Uses HTMX target #}
                            <button type="button" class="btn btn-main-action"
                                data-bs-toggle="modal"
                                data-bs-target="#candidateviewModal"
                                hx-get="{% url 'application_criteria_view_htmx' candidate.pk %}"
                                hx-target="#candidateviewModalBody"
                                title="{% trans 'View Details and Score Breakdown' %}">
                                <i class="fas fa-eye"></i>
                            </button>

                            {# Individual actions (Shown if it's the filtered view OR if the applicant needs to be promoted) #}
                            {% if is_potential_view or candidate.applicant_status == 'Applicant' %}
                                {% if candidate.applicant_status == 'Applicant' %}
                                    {# Mark as Candidate Button (Manual Selection/Promotion) #}
                                    <button type="submit" name="mark_as_candidate"
                                            class="btn btn-sm btn-success"
                                            formaction="?candidate_id={{ candidate.id }}&action=mark_as_candidate"
                                            title="{% trans 'Mark as Potential Candidate' %}">
                                        <i class="fas fa-user-check"></i>
                                    </button>
                                {% endif %}

                                {# Stage Progression Dropdown #}
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                                            data-bs-toggle="dropdown" title="{% trans 'Move to Next Stage' %}">
                                        <i class="fas fa-tasks"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        {% for next_stage in candidate.get_available_stages %}
                                        <li>
                                            <button type="submit" name="update_stage"
                                                    class="dropdown-item"
                                                    formaction="?candidate_id={{ candidate.id }}&new_stage={{ next_stage }}">
                                                {% trans "Move to" %} {{ next_stage }}
                                            </button>
                                        </li>
                                        {% endfor %}
                                        {% if candidate.stage == "Exam" %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <button type="button" class="dropdown-item"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#examModal{{ candidate.id }}">
                                                <i class="fas fa-clipboard-check me-1"></i> {% trans "Update Exam Status" %}
                                            </button>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </form>
</div>
{% else %}
    <div class="text-center py-4 text-muted kaauh-card p-4">
        <i class="fas fa-inbox fa-2x mb-2" style="color: var(--kaauh-teal);"></i>
        <p class="mb-0">{% trans "No candidates found in this list." %}</p>
        {% if is_potential_view %}
        <p class="small">{% trans "Adjust your 'Top N' filter in the controls above or check the All Applicants list." %}</p>
        {% endif %}
    </div>
{% endif %}