{% load static i18n %}             
<style>

    /* ==================================== */
    /* MULTI-COLORED CANDIDATE STAGE TRACKER */
    /* ==================================== */

    .progress-stages {
        position: relative;
        padding: 1.5rem 0;
    }

    .progress-stages a {
        text-decoration: none;
        color: inherit;
    }

    .stage-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 60px;
        transition: all 0.3s ease;
        color: var(--stage-inactive);
    }

    .stage-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #e9ecef;
        color: var(--stage-inactive);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        z-index: 10;
        border: 2px solid white;
        box-shadow: 0 0 0 2px #e9ecef;
        transition: all 0.3s ease;
    }

    /* ---------------- STAGE SPECIFIC COLORS ---------------- */

    /* APPLIED STAGE (Teal) */
    .stage-item[data-stage="Applied"].completed .stage-icon,
    .stage-item[data-stage="Applied"].active .stage-icon {
        background-color: var(--stage-applied);
        color: white;
    }
    .stage-item[data-stage="Applied"].active { color: var(--stage-applied); }

    /* EXAM STAGE (Cyan/Info) */
    .stage-item[data-stage="Exam"].completed .stage-icon,
    .stage-item[data-stage="Exam"].active .stage-icon {
        background-color: var(--stage-exam);
        color: white;
    }
    .stage-item[data-stage="Exam"].active { color: var(--stage-exam); }

    /* INTERVIEW STAGE (Yellow/Warning) */
    .stage-item[data-stage="Interview"].completed .stage-icon,
    .stage-item[data-stage="Interview"].active .stage-icon {
        background-color: var(--stage-interview);
        color: var(--kaauh-primary-text); /* Dark text for light background */
    }
    .stage-item[data-stage="Interview"].active { color: var(--stage-interview); }

    /* OFFER STAGE (Green/Success) */
    .stage-item[data-stage="Offer"].completed .stage-icon,
    .stage-item[data-stage="Offer"].active .stage-icon {
        background-color: var(--stage-offer);
        color: white;
    }
    .stage-item[data-stage="Offer"].active { color: var(--stage-offer); }

    /* ---------------- GENERIC ACTIVE/COMPLETED STYLING ---------------- */

    /* Active State (Applies glow/scale to current stage) */
    .stage-item.active .stage-icon {
        box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.4);
        transform: scale(1.1);
    }
    .stage-item.active .stage-count {
        font-weight: 700;
    }

    /* Completed State (Applies dark text color to completed stages) */
    .stage-item.completed {
        color: var(--kaauh-primary-text);
    }

    /* Connector Line */
    .stage-connector {
        flex-grow: 1;
        height: 3px;
        background-color: #e9ecef;
        margin: 0 0.5rem;
        position: relative;
        top: -18px;
        z-index: 1;
        transition: background-color 0.3s ease;
    }

    /* Line in completed state (Kept the line teal/primary for consistency) */
    .stage-connector.completed {
        background-color: var(--kaauh-teal);
    }

    /* Labels and counts */
    .stage-label {
        font-size: 0.75rem;
        margin-top: 0.4rem;
        font-weight: 500;
        white-space: nowrap;
    }
    .stage-count {
        font-size: 0.9rem;
        font-weight: 600;
        margin-top: 0.1rem;
        color: #6c757d;
    }
</style>       


<div class="progress-stages">
            <div class="d-flex justify-content-between align-items-center">

                {% comment %} STAGE 1: Applied {% endcomment %}
                <a href="{% url 'candidate_screening_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Applied' %}active{% endif %} {% if current_stage != 'Applied' and candidate.stage_history_has.Applied %}completed{% endif %}"
                   data-stage="Applied">
                    <div class="stage-icon ">
                        <i class="fas fa-file-signature  cd_screening"></i>
                    </div>
                    <div class="stage-label cd_screening">{% trans "Screened" %}</div>
                    <div class="stage-count">{{ applied_count|default:"0" }}</div>
                </a>

                {% comment %} CONNECTOR 1 -> 2 {% endcomment %}
                <div class="stage-connector {% if current_stage != 'Applied' and candidate.stage_history_has.Exam %}completed{% endif %}"></div>

                {% comment %} STAGE 2: Exam {% endcomment %}
                <a href="{% url 'candidate_exam_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Exam' %}active{% endif %} {% if current_stage != 'Exam' and candidate.stage_history_has.Exam %}completed{% endif %}"
                   data-stage="Exam">
                    <div class="stage-icon">
                        <i class="fas fa-clipboard-check cd_exam"></i>
                    </div>
                    <div class="stage-label cd_exam">{% trans "Exam" %}</div>
                    <div class="stage-count ">{{ exam_count|default:"0" }}</div>
                </a>

                {% comment %} CONNECTOR 2 -> 3 {% endcomment %}
                <div class="stage-connector {% if current_stage != 'Exam' and candidate.stage_history_has.Interview %}completed{% endif %}"></div>

                {% comment %} STAGE 3: Interview {% endcomment %}
                <a href="{% url 'candidate_interview_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Interview' %}active{% endif %} {% if current_stage != 'Interview' and candidate.stage_history_has.Interview %}completed{% endif %}"
                   data-stage="Interview">
                    <div class="stage-icon">
                        <i class="fas fa-comments cd_interview"></i>
                    </div>
                    <div class="stage-label cd_interview">{% trans "Interview" %}</div>
                    <div class="stage-count">{{ interview_count|default:"0" }}</div>
                </a>

                {% comment %} CONNECTOR 3 -> 4 {% endcomment %}
                <div class="stage-connector {% if current_stage != 'Interview' and candidate.stage_history_has.Offer %}completed{% endif %}"></div>

                {% comment %} STAGE 4: Offer {% endcomment %}
                <a href="{% url 'job_candidates_list' job.slug %}?stage=Offer"
                   class="stage-item {% if current_stage == 'Offer' %}active{% endif %} {% if current_stage != 'Offer' and candidate.stage_history_has.Offer %}completed{% endif %}"
                   data-stage="Offer">
                    <div class="stage-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <div class="stage-label">{% trans "Offer" %}</div>
                    <div class="stage-count">{{ offer_count|default:"0" }}</div>
                </a>
            </div>
        </div>