{# Pipeline steps region — v0.61.56 (#890).

   Sequential-stage workflow visualisation: a row of stage cards with
   arrow connectors between them. Each card carries a kicker (label),
   a headline number (aggregate value), and optional caption.

   Mobile: stacks vertically, connectors become vertical chevrons.

   Stage values resolved server-side (one count per stage). Stages
   without a value (or with unsupported aggregates like median, or
   under denied scope) render `—`.

   v0.61.78 (#911) added per-stage `progress:` (0-100). When set, a
   thin progress track + percent label sit beneath the headline value
   so the operator sees how complete the stage is, not just how many
   rows are in it. `data-dz-progress="74"` carries the bound value
   for theming; `data-dz-progress-overshoot="true"` flags clamped
   values >100 so themes can surface "over capacity" visually.

   Card safety: region emits zero chrome + zero title. The dashboard
   slot owns both via region_card. #}
{# v0.62 CSS refactor: inline Tailwind on every .dz-pipeline-* element
   moved to its CSS rule in components/fragments.css. The class-name
   markers were already in place; only the parallel utility list was
   removed. Responsive behaviour (stack <md, row >=md) now keyed off
   a 48rem @media breakpoint inside each rule. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
<div class="dz-pipeline-steps-region">
  {% if pipeline_stage_data and pipeline_stage_data | length > 0 %}
    <ol class="dz-pipeline-stages">
      {% for stage in pipeline_stage_data %}
        <li class="dz-pipeline-stage">
          <span class="dz-pipeline-stage-label">
            {{ stage.label }}
          </span>
          <span class="dz-pipeline-stage-value">
            {% if stage.value is not none %}{{ stage.value }}{% else %}—{% endif %}
          </span>
          {% if stage.caption %}
            <span class="dz-pipeline-stage-caption">
              {{ stage.caption }}
            </span>
          {% endif %}

          {# Progress bar (#911) — track + fill + percent label.
             Renders only when `progress:` resolved to a number (None
             means the field was omitted, unparseable, or under denied
             scope for an aggregate). The fill width is set inline so
             themes don't need to touch the rule; tone styling can key
             off `data-dz-progress` thresholds (e.g. >=100 = success).
             `data-dz-progress-overshoot` flags values that were
             clamped from >100 so themes can surface "over capacity". #}
          {% if stage.progress is not none %}
            <div class="dz-pipeline-stage-progress"
                 data-dz-progress="{{ stage.progress }}"
                 {% if stage.progress_overshoot %}data-dz-progress-overshoot="true"{% endif %}
                 role="progressbar"
                 aria-valuemin="0"
                 aria-valuemax="100"
                 aria-valuenow="{{ stage.progress }}"
                 aria-label="{{ stage.label }} progress">
              <div class="dz-pipeline-stage-progress-track">
                <div class="dz-pipeline-stage-progress-fill"
                     style="width: {{ stage.progress }}%;"></div>
              </div>
              <span class="dz-pipeline-stage-progress-label">{{ stage.progress }}%</span>
            </div>
          {% endif %}

          {# Connector — sits to the right (desktop) or below (mobile) of
             every stage except the last. Pure CSS / SVG triangle, design
             token colour. Hidden on the last stage via :last-child. #}
          {% if not loop.last %}
            <span class="dz-pipeline-connector" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
                   xmlns="http://www.w3.org/2000/svg">
                <path d="M3 1.5L9 7l-6 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <span class="dz-pipeline-connector-mobile" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
                   xmlns="http://www.w3.org/2000/svg">
                <path d="M1.5 3L7 9l5.5-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          {% endif %}
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="dz-empty-dense" role="status">{{ empty_message | default("No pipeline data available.") }}</p>
  {% endif %}
</div>
{% endcall %}