{% extends 'base.html' %}
{% load static i18n %}

{% block title %}Candidate Tier Management - {{ job.title }} - ATS{% endblock %}

{% block customCSS %}
<style>
    /* Minimal Tier Management Styles */
    .tier-controls {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1.5rem;
    }
    .tier-controls .form-row {
        display: flex;
        align-items: end;
        gap: 0.75rem;
    }
    .tier-controls .form-group {
        flex: 1;
        margin-bottom: 0;
    }
    .bulk-update-controls {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1.5rem;
    }
    .stage-groups {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .stage-group {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        overflow: hidden;
    }
    .stage-group .stage-header {
        background-color: #495057;
        color: white;
        padding: 0.5rem 0.75rem;
        font-weight: 500;
        font-size: 0.95rem;
    }
    .stage-group .stage-body {
        padding: 0.75rem;
        min-height: 80px;
    }
    .stage-candidate {
        padding: 0.375rem;
        border-bottom: 1px solid #f1f3f4;
    }
    .stage-candidate:last-child {
        border-bottom: none;
    }
    .match-score {
        font-weight: 600;
        color: #0056b3;
    }
    .btn-sm {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }

    /* Tab Styles for Tiers */
    .nav-tabs {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 1rem;
    }
    .nav-tabs .nav-link {
        border: none;
        color: #495057;
        font-weight: 500;
        padding: 0.5rem 1rem;
        transition: all 0.2s;
    }
    .nav-tabs .nav-link:hover {
        border: none;
        background-color: #f8f9fa;
    }
    .nav-tabs .nav-link.active {
        color: #495057;
        background-color: #fff;
        border: none;
        border-bottom: 2px solid #007bff;
        font-weight: 600;
    }
    .tier-1 .nav-link {
        color: #155724;
    }
    .tier-1 .nav-link.active {
        border-bottom-color: #28a745;
    }
    .tier-2 .nav-link {
        color: #856404;
    }
    .tier-2 .nav-link.active {
        border-bottom-color: #ffc107;
    }
    .tier-3 .nav-link {
        color: #721c24;
    }
    .tier-3 .nav-link.active {
        border-bottom-color: #dc3545;
    }

    /* Candidate Table Styles */
    .candidate-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background-color: white;
        border-radius: 0.375rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .candidate-table thead {
        background-color: #f8f9fa;
    }
    .candidate-table th {
        padding: 0.75rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: #495057;
        border-bottom: 1px solid #dee2e6;
    }
    .candidate-table td {
        padding: 0.75rem;
        border-bottom: 1px solid #f1f3f4;
        vertical-align: middle;
    }
    .candidate-table tbody tr:hover {
        background-color: #f8f9fa;
    }
    .candidate-table tbody tr:last-child td {
        border-bottom: none;
    }
    .candidate-name {
        font-weight: 600;
        font-size: 0.95rem;
    }
    .candidate-details {
        font-size: 0.8rem;
        color: #6c757d;
    }
    .candidate-table-responsive {
        overflow-x: auto;
        margin-bottom: 1rem;
    }
    .stage-badge {
        padding: 0.125rem 0.5rem;
        border-radius: 0.5rem;
        font-size: 0.7rem;
        font-weight: 600;
        margin-left: 0.375rem;
    }
    .stage-Applied {
        background-color: #e9ecef;
        color: #495057;
    }
    .stage-Exam {
        background-color: #cce5ff;
        color: #004085;
    }
    .stage-Interview {
        background-color: #d1ecf1;
        color: #0c5460;
    }
    .stage-Offer {
        background-color: #d4edda;
        color: #155724;
    }
    .exam-controls {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.375rem;
    }
    .exam-controls select,
    .exam-controls input {
        font-size: 0.75rem;
        padding: 0.125rem 0.25rem;
    }
    .tier-badge {
        font-size: 0.7rem;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        background-color: rgba(0,0,0,0.1);
        color: #495057;
        margin-left: 0.375rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-layer-group me-2"></i>
                {% trans "Candidate Tier Management" %} - {{ job.title }}
            </h1>
            <p class="text-muted mb-0">
                Total Candidates: {{ total_candidates }}
            </p>
        </div>
        <a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
        </a>
    </div>

    <!-- Tier Controls -->
    <div class="tier-controls">
        <form method="post" class="mb-0">
            {% csrf_token %}
            <div class="form-row">
                <div class="form-group">
                    <label for="tier1_count">{% trans "Number of candidates in Tier 1 (Top N)" %}</label>
                    <input type="number" name="tier1_count" id="tier1_count" class="form-control"
                           value="{{ tier1_count }}" min="1" max="{{ total_candidates }}">
                </div>
                <div class="form-group">
                    <button type="submit" name="update_tiers" class="btn btn-primary">
                        <i class="fas fa-sync-alt me-1"></i> {% trans "Update Tiers" %}
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Bulk Stage Update Controls -->
    <div class="bulk-update-controls">
        <h4 class="h5 mb-3">{% trans "Bulk Stage Update" %}</h4>
        <form method="post">
            {% csrf_token %}
            <div class="form-row align-items-end">
                <div class="form-group">
                    <label for="bulk_new_stage">{% trans "Update Selected Candidates to" %}</label>
                    <select name="bulk_new_stage" id="bulk_new_stage" class="form-control" required>
                        <option value="">{% trans "Select Stage" %}</option>
                        <option value="Exam">{% trans "Exam" %}</option>
                        <option value="Interview">{% trans "Interview" %}</option>
                        <option value="Offer">{% trans "Offer" %}</option>
                    </select>
                </div>
                <div class="form-group">
                    <button type="submit" name="bulk_update_stage" class="btn btn-success">
                        <i class="fas fa-tasks me-1"></i> {% trans "Update Selected" %}
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Stage Groups -->
    {% comment %} <div class="stage-groups">
        {% for stage_name, stage_candidates in stage_groups.items %}
        <div class="stage-group">
            <div class="stage-header">
                {{ stage_name }}
                <span class="badge badge-light">{{ stage_candidates.count }}</span>
            </div>
            <div class="stage-body">
                {% for candidate in stage_candidates %}
                <div class="stage-candidate">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="selected_candidates"
                               value="{{ candidate.id }}" id="candidate_{{ candidate.id }}">
                        <label class="form-check-label d-flex justify-content-between align-items-start"
                               for="candidate_{{ candidate.id }}">
                            <div>
                                <div class="fw-medium">{{ candidate.name }}</div>
                                <div class="text-muted small">
                                    Score: <span class="match-score">{{ candidate.match_score|default:"0" }}</span>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                {% if candidate.stage == "Exam" and candidate.exam_status %}
                                <span class="badge bg-info">{{ candidate.get_exam_status_display }}</span>
                                {% endif %}
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle"
                                            type="button" data-bs-toggle="dropdown">
                                        {% trans "Actions" %}
                                    </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 btn-sm"
                                                    formaction="?candidate_id={{ candidate.id }}&new_stage={{ next_stage }}">
                                                Move to {{ next_stage }}
                                            </button>
                                        </li>
                                        {% endfor %}
                                        {% if candidate.stage == "Exam" %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <button type="button" class="dropdown-item btn-sm"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#examModal{{ candidate.id }}">
                                                {% trans "Update Exam Status" %}
                                            </button>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                {% empty %}
                <p class="text-muted text-center py-3">{% trans "No candidates in this stage" %}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div> {% endcomment %}

    <!-- Tier Display -->
    <h2 class="h4 mb-3 mt-5">{% trans "Candidate Tiers" %}</h2>

    <!-- Tabs for Candidate Tiers -->
    <ul class="nav nav-tabs tier-1" id="candidateTiersTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tier1-tab" data-bs-toggle="tab" data-bs-target="#tier1" type="button"
                    role="tab" aria-controls="tier1" aria-selected="true">
                {% trans "Tier 1 - Top Candidates" %}
                <span class="tier-badge ms-1">{{ tier1_candidates|length }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tier2-tab" data-bs-toggle="tab" data-bs-target="#tier2" type="button"
                    role="tab" aria-controls="tier2" aria-selected="false">
                {% trans "Tier 2 - Good Candidates" %}
                <span class="tier-badge ms-1">{{ tier2_candidates|length }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tier3-tab" data-bs-toggle="tab" data-bs-target="#tier3" type="button"
                    role="tab" aria-controls="tier3" aria-selected="false">
                {% trans "Tier 3 - Other Candidates" %}
                <span class="tier-badge ms-1">{{ tier3_candidates|length }}</span>
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="candidateTiersTabContent">
        <!-- Tier 1 Tab -->
        <div class="tab-pane fade show active" id="tier1" role="tabpanel" aria-labelledby="tier1-tab">
            {% if tier1_candidates %}
            <div class="mb-3 d-flex justify-content-end">
                <button type="submit" name="mark_as_candidates"
                        class="btn btn-sm btn-success"
                        onclick="return confirm('Are you sure you want to mark all Tier 1 candidates as official candidates?')">
                    <i class="fas fa-user-check me-1"></i> {% trans "Mark as Candidates" %}
                </button>
            </div>
            <div class="candidate-table-responsive">
                <table class="candidate-table">
                    <thead>
                        <tr>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Contact" %}</th>
                            <th>{% trans "AI Score" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% trans "Stage" %}</th>
                            <th>{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for candidate in tier1_candidates %}
                        <tr>
                            <td>
                                <div class="candidate-name">{{ candidate.name }}</div>
                            </td>
                            <td>
                                <div class="candidate-details">
                                    Email: {{ candidate.email }}<br>
                                    Phone: {{ candidate.phone }}<br>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-success">{{ candidate.match_score|default:"0" }}</span>
                            </td>
                            <td>
                                <span class="badge {% if candidate.applicant_status == 'Candidate' %}bg-success{% else %}bg-secondary{% 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="badge bg-info">{{ candidate.get_exam_status_display }}</span>
                                {% endif %}
                            </td>
                            <td>
                                <button class="btn btn-primary"
                                    data-bs-toggle="modal"
                                    data-bs-target="#candidateviewModal"
                                    hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
                                    hx-target="#candidateviewModalBody"
                                    >
                                    {% include "icons/view.html" %}
                                    {% trans "View" %}</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-center text-muted py-3">{% trans "No candidates in Tier 1" %}</p>
            {% endif %}
        </div>

        <!-- Tier 2 Tab -->
        <div class="tab-pane fade" id="tier2" role="tabpanel" aria-labelledby="tier2-tab">
            {% if tier2_candidates %}
            <div class="candidate-table-responsive">
                <table class="candidate-table">
                    <thead>
                        <tr>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Contact" %}</th>
                            <th>{% trans "AI Score" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% trans "Stage" %}</th>
                            <th>{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for candidate in tier2_candidates %}
                        <tr>
                            <td>
                                <div class="candidate-name">{{ candidate.name }}</div>
                            </td>
                            <td>
                                <div class="candidate-details">
                                    Email: {{ candidate.email }}<br>
                                    Phone: {{ candidate.phone }}<br>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-success">{{ candidate.match_score|default:"0" }}</span>
                            </td>
                            <td>
                                <span class="badge {% if candidate.applicant_status == 'Candidate' %}bg-success{% else %}bg-secondary{% 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="badge bg-info">{{ candidate.get_exam_status_display }}</span>
                                {% endif %}
                            </td>
                            <td>
                                <!-- Individual actions -->
                                <div class="d-flex flex-wrap gap-1 mb-1">
                                    {% if candidate.applicant_status == 'Applicant' %}
                                    <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 Candidate' %}">
                                        <i class="fas fa-user-check"></i>
                                    </button>
                                    {% endif %}
                                    {% for next_stage in candidate.get_available_stages %}
                                    <button type="submit" name="update_stage"
                                            class="btn btn-sm btn-outline-secondary"
                                            formaction="?candidate_id={{ candidate.id }}&new_stage={{ next_stage }}"
                                            title="{% trans 'Move to' %} {{ next_stage }}">
                                        {{ next_stage }}
                                    </button>
                                    {% endfor %}
                                    {% if candidate.stage == "Exam" %}
                                    <button type="button" class="btn btn-sm btn-outline-info"
                                            data-bs-toggle="modal"
                                            data-bs-target="#examModal{{ candidate.id }}"
                                            title="{% trans 'Update Exam Status' %}">
                                        <i class="fas fa-clipboard-check"></i>
                                    </button>
                                    {% endif %}
                                </div>
                                <!-- Dropdown for additional actions -->
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                                            data-bs-toggle="dropdown">
                                        <i class="fas fa-ellipsis-v"></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 btn-sm"
                                                    formaction="?candidate_id={{ candidate.id }}&new_stage={{ next_stage }}">
                                                Move to {{ next_stage }}
                                            </button>
                                        </li>
                                        {% endfor %}
                                        {% if candidate.stage == "Exam" %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <button type="button" class="dropdown-item btn-sm"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#examModal{{ candidate.id }}">
                                                {% trans "Update Exam Status" %}
                                            </button>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-center text-muted py-3">{% trans "No candidates in Tier 2" %}</p>
            {% endif %}
        </div>

        <!-- Tier 3 Tab -->
        <div class="tab-pane fade" id="tier3" role="tabpanel" aria-labelledby="tier3-tab">
            {% if tier3_candidates %}
            <div class="candidate-table-responsive">
                <table class="candidate-table">
                    <thead>
                        <tr>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Contact" %}</th>
                            <th>{% trans "AI Score" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% trans "Stage" %}</th>
                            <th>{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for candidate in tier3_candidates %}
                        <tr>
                            <td>
                                <div class="candidate-name">{{ candidate.name }}</div>
                            </td>
                            <td>
                                <div class="candidate-details">
                                    Email: {{ candidate.email }}<br>
                                    Phone: {{ candidate.phone }}<br>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-success">{{ candidate.match_score|default:"0" }}</span>
                            </td>
                            <td>
                                <span class="badge {% if candidate.applicant_status == 'Candidate' %}bg-success{% else %}bg-secondary{% 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="badge bg-info">{{ candidate.get_exam_status_display }}</span>
                                {% endif %}
                            </td>
                            <td>
                                <!-- Individual actions -->
                                <div class="d-flex flex-wrap gap-1 mb-1">
                                    {% if candidate.applicant_status == 'Applicant' %}
                                    <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 Candidate' %}">
                                        <i class="fas fa-user-check"></i>
                                    </button>
                                    {% endif %}
                                    {% for next_stage in candidate.get_available_stages %}
                                    <button type="submit" name="update_stage"
                                            class="btn btn-sm btn-outline-secondary"
                                            formaction="?candidate_id={{ candidate.id }}&new_stage={{ next_stage }}"
                                            title="{% trans 'Move to' %} {{ next_stage }}">
                                        {{ next_stage }}
                                    </button>
                                    {% endfor %}
                                    {% if candidate.stage == "Exam" %}
                                    <button type="button" class="btn btn-sm btn-outline-info"
                                            data-bs-toggle="modal"
                                            data-bs-target="#examModal{{ candidate.id }}"
                                            title="{% trans 'Update Exam Status' %}">
                                        <i class="fas fa-clipboard-check"></i>
                                    </button>
                                    {% endif %}
                                </div>
                                <!-- Dropdown for additional actions -->
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                                            data-bs-toggle="dropdown">
                                        <i class="fas fa-ellipsis-v"></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 btn-sm"
                                                    formaction="?candidate_id={{ candidate.id }}&new_stage={{ next_stage }}">
                                                Move to {{ next_stage }}
                                            </button>
                                        </li>
                                        {% endfor %}
                                        {% if candidate.stage == "Exam" %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <button type="button" class="dropdown-item btn-sm"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#examModal{{ candidate.id }}">
                                                {% trans "Update Exam Status" %}
                                            </button>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-center text-muted py-3">{% trans "No candidates in Tier 3" %}</p>
            {% endif %}
        </div>
    </div>
</div>

<!-- Exam Status Update Modals -->
{% for candidate in tier1_candidates|add:tier2_candidates|add:tier3_candidates %}
{% if candidate.stage == "Exam" %}
<div class="modal fade" id="examModal{{ candidate.id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Update Exam Status" %} - {{ candidate.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="candidate_id" value="{{ candidate.id }}">
                    <div class="mb-3">
                        <label class="form-label">{% trans "Exam Status" %}</label>
                        <select name="exam_status" class="form-select" required>
                            <option value="">{% trans "Select Status" %}</option>
                            <option value="Passed" {% if candidate.exam_status == "Passed" %}selected{% endif %}>
                                {% trans "Passed" %}
                            </option>
                            <option value="Failed" {% if candidate.exam_status == "Failed" %}selected{% endif %}>
                                {% trans "Failed" %}
                            </option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{% trans "Exam Date" %}</label>
                        <input type="date" name="exam_date" class="form-control"
                               value="{{ candidate.exam_date|date:"Y-m-d" }}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            {% trans "Cancel" %}
                        </button>
                        <button type="submit" name="update_exam_status" class="btn btn-primary">
                            {% trans "Update Status" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endfor %}

<div class="modal fade modal-lg" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="candidateviewModalLabel">Form Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="candidateviewModalBody" class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block customJS %}
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
    <script>
        document.getElementById('tier1_count').addEventListener('change', function() {
            const max = {{ total_candidates }};
            if (this.value > max) {
                this.value = max;
            }
        });
    </script>
{% endblock customJS %}