{% 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 ---------------- */



    .stage-item.completed .stage-icon,
    .stage-item.active .stage-icon {
        background-color: var(--stage-interview);
        color: var(--kaauh-primary-text); /* Dark text for light background */
    }
    .stage-item.active { color: var(--stage-interview); }

    /* 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 'applications_screening_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Applied' %}active{% 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">{{ job.screening_applications.count|default:"0" }}</div>
                </a>

                {% comment %} CONNECTOR 1 -> 2 {% endcomment %}
                <div class="stage-connector {% if current_stage == 'Exam' or current_stage == 'Interview' or current_stage == 'Document Review' or current_stage == 'Offer' or current_stage == 'Hired' %}completed{% endif %}"></div>

                {% comment %} STAGE 2: Exam {% endcomment %}
                <a href="{% url 'applications_exam_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Exam' %}active{% 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 ">{{ job.exam_applications.count|default:"0" }}</div>
                </a>

                {% comment %} CONNECTOR 2 -> 3 {% endcomment %}
                <div class="stage-connector {% if current_stage == 'Interview' or current_stage == 'Document Review' or current_stage == 'Offer' or current_stage == 'Hired' %}completed{% endif %}"></div>

                {% comment %} STAGE 3: Interview {% endcomment %}
                <a href="{% url 'applications_interview_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Interview' %}active{% 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">{{ job.interview_applications.count|default:"0" }}</div>
                </a>

                {% comment %} CONNECTOR 3 -> 4 {% endcomment %}
                <div class="stage-connector {% if current_stage == 'Document Review' or current_stage == 'Offer' or current_stage == 'Hired' %}completed{% endif %}"></div>

                {% comment %} STAGE 4: Document Review {% endcomment %}
                <a href="{% url 'applications_document_review_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Document Review' %}active{% endif %} {% if current_stage == 'Offer' or current_stage == 'Hired' %}completed{% endif %}"
                   data-stage="Document Review">
                    <div class="stage-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div class="stage-label">{% trans "Document Review" %}</div>
                    <div class="stage-count">{{ job.document_review_applications.count|default:"0" }}</div>
                </a>

                {% comment %} CONNECTOR 4 -> 5 {% endcomment %}
                <div class="stage-connector {% if current_stage == 'Offer' or current_stage == 'Hired' %}completed{% endif %}"></div>

                {% comment %} STAGE 5: Offer {% endcomment %}
                <a href="{% url 'applications_offer_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Offer' %}active{% endif %} {% if current_stage == 'Hired' %}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">{{ job.offer_applications.count|default:"0" }}</div>
                </a>

                {% comment %} CONNECTOR 5 -> 6 {% endcomment %}
                <div class="stage-connector {% if current_stage == 'Hired' %}completed{% endif %}"></div>

                {% comment %} STAGE 6: Hired {% endcomment %}
                <a href="{% url 'applications_hired_view' job.slug %}"
                   class="stage-item {% if current_stage == 'Hired' %}active{% endif %}"
                   data-stage="Hired">
                    <div class="stage-icon">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div class="stage-label">{% trans "Hired" %}</div>
                    <div class="stage-count">{{ job.hired_applications.count|default:"0" }}</div>
                </a>
            </div>
</div>