{% extends 'pipeline/base.html' %}
{% load i18n %}

{% block page_title %}{% trans "Pipeline" %}{% endblock %}
{% block header_nav_brand %}{% trans "Pipeline" %}{% endblock %}

{% block pipeline_content %}
<div class="container-fluid py-3">

    {# ── Header ─────────────────────────────────────────────────────────── #}
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
        <div class="d-flex align-items-center gap-3">
            <span class="pipeline-page-icon"><i class="fas fa-route" aria-hidden="true"></i></span>
            <div>
                <h1 class="h3 mb-0">{% trans "Pipeline" %}</h1>
                <p class="text-body-secondary mb-0">{% trans "Your onboarding, training and certification flows." %}</p>
            </div>
        </div>
        {% if can_manage %}
            <a href="{% url 'pipeline:manage_index' %}" class="btn btn-quiet">
                <i class="fas fa-sliders fa-fw me-1" aria-hidden="true"></i>{% trans "Manage flows" %}
            </a>
        {% endif %}
    </div>

    {# ── In progress / not started ──────────────────────────────────────── #}
    {% if assigned_items %}
        <section class="mb-4" aria-labelledby="pipeline-assigned-title">
            <h2 class="pipeline-section-title text-body-secondary" id="pipeline-assigned-title">
                <i class="fas fa-list-check text-primary" aria-hidden="true"></i>{% trans "Assigned to you" %}
                <span class="badge rounded-pill text-bg-secondary">{{ assigned_items|length }}</span>
            </h2>
            <div class="row g-3">
                {% for item in assigned_items %}
                    {% include "pipeline/partials/flow_card.html" %}
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {# ── Available, not yet started ─────────────────────────────────────── #}
    {% if available_items %}
        <section class="mb-4" aria-labelledby="pipeline-available-title">
            <h2 class="pipeline-section-title text-body-secondary" id="pipeline-available-title">
                <i class="fas fa-compass" aria-hidden="true"></i>{% trans "Available" %}
                <span class="badge rounded-pill text-bg-secondary">{{ available_items|length }}</span>
            </h2>
            <div class="row g-3">
                {% for item in available_items %}
                    {% include "pipeline/partials/flow_card.html" %}
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {# ── Completed ──────────────────────────────────────────────────────── #}
    {% if completed_items %}
        <section class="mb-4" aria-labelledby="pipeline-completed-title">
            <h2 class="pipeline-section-title text-body-secondary" id="pipeline-completed-title">
                <i class="fas fa-circle-check text-success" aria-hidden="true"></i>{% trans "Completed" %}
                <span class="badge rounded-pill text-bg-secondary">{{ completed_items|length }}</span>
            </h2>
            <div class="row g-3">
                {% for item in completed_items %}
                    {% include "pipeline/partials/flow_card.html" %}
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {# ── Empty state ────────────────────────────────────────────────────── #}
    {% if not assigned_items and not available_items and not completed_items %}
        <div class="card">
            <div class="card-body text-center py-5">
                <span class="pipeline-page-icon mb-3"><i class="fas fa-route" aria-hidden="true"></i></span>
                <h2 class="h5">{% trans "No flows yet" %}</h2>
                <p class="text-body-secondary mb-0">
                    {% trans "You have no flows assigned or available right now. Check back later or ask your leadership." %}
                </p>
            </div>
        </div>
    {% endif %}

</div>
{% endblock pipeline_content %}