{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Pipelines{% endblock %}
{% block page_title %}Pipelines{% endblock %}
{% block page_subtitle %}Stages, promotions, and flow channels (Layer 9){% endblock %}
{% block layer_indicator %}L9 Flow{% endblock %}

{% block content %}
<div class="mb-6">
  <span class="text-sm text-slate-500">{{ pipelines|length }} pipeline{{ pipelines|length|pluralize }}</span>
</div>

{% if pipelines %}
<div class="space-y-6">
  {% for pipeline in pipelines %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
    <div class="flex items-center justify-between mb-4">
      <div>
        <h3 class="text-sm font-semibold text-slate-900">{{ pipeline.name }}</h3>
        <p class="text-xs text-slate-400 mt-0.5">
          ID: <span class="font-mono">{{ pipeline.id|truncate_id:12 }}</span>
          &middot; Created: {{ pipeline.created_at|format_dt }}
        </p>
      </div>
      {% include "components/_state_badge.html" with state=pipeline.lifecycle %}
    </div>

    {# Stage visualization — horizontal connected cards #}
    {% with stages=stages_by_pipeline|get_item:pipeline.id %}
    {% if stages %}
    <div class="flex items-center gap-0 overflow-x-auto py-2">
      {% for stage in stages %}
      <div class="flex items-center">
        {% if not forloop.first %}
        {# Arrow connector #}
        <div class="flex items-center px-2">
          <svg class="w-5 h-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </div>
        {% endif %}
        {# Stage card #}
        <div class="flex-shrink-0 border border-slate-200 rounded-lg px-4 py-3 bg-slate-50 hover:bg-slate-100 transition-colors min-w-[140px]">
          <div class="text-sm font-medium text-slate-800">{{ stage.name }}</div>
          <div class="text-xs text-slate-400 mt-1">
            Ordinal {{ stage.ordinal }}
          </div>
          {% with count=promo_counts|get_item:stage.id %}
          {% if count %}
          <div class="mt-2">
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-50 text-brand-700 ring-1 ring-brand-600/20">
              {{ count }} promotion{{ count|pluralize }}
            </span>
          </div>
          {% endif %}
          {% endwith %}
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-slate-400">No stages defined for this pipeline.</p>
    {% endif %}
    {% endwith %}
  </div>
  {% endfor %}
</div>
{% else %}
{% include "components/_empty_state.html" with title="No pipelines" message="No flow pipelines have been configured yet." %}
{% endif %}
{% endblock %}