{# ==========================================================================
   Workflow-Stepper — zeigt die Vertriebs-Pipeline-Position eines Belegs
   und einen prominenten "→ Nächster Schritt"-Button.

   Verwendung:
     {% include "_workflow_stepper.html" %}

   Erwartet im Context: workflow = db.compute_workflow_chain(...)
   ========================================================================== #}
{% if workflow and workflow.steps %}
<style>
  .wf-stepper {
    display: flex; align-items: center; gap: 0;
    background: linear-gradient(135deg, rgba(53,102,146,0.18), rgba(15,22,48,0.85));
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 0 0 18px 0;
    flex-wrap: wrap;
    row-gap: 10px;
    /* v1.12.0: Sticky — bleibt beim Scrollen oben sichtbar */
    position: sticky;
    top: 8px;
    z-index: 50;
    backdrop-filter: blur(8px) saturate(170%);
    -webkit-backdrop-filter: blur(8px) saturate(170%);
  }
  .wf-step {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255,255,255,0.55);
    font-size: 13px; font-weight: 500;
    transition: background 100ms;
    white-space: nowrap;
  }
  .wf-step .wf-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.10);
    font-size: 14px;
  }
  .wf-step .wf-no { font-size: 10px; color: rgba(255,255,255,0.40); }
  .wf-step.is-done   { color: #10b981; }
  .wf-step.is-done   .wf-icon { background: rgba(16,185,129,0.20); border-color:#10b981; color:#10b981; }
  .wf-step.is-current{ color: #fcd34d; font-weight: 700; }
  .wf-step.is-current .wf-icon {
    background: #fcd34d; border-color:#fcd34d; color:#0f1620;
    box-shadow: 0 0 0 4px rgba(252,211,77,0.20);
  }
  .wf-step.is-todo   { color: rgba(255,255,255,0.35); }
  .wf-step.is-todo   .wf-icon { background:transparent; border-style:dashed; }
  .wf-step.is-skip   { color: rgba(255,255,255,0.25); }
  .wf-step.is-skip   .wf-icon { background:transparent; border-style:dotted; }
  .wf-step a:hover, a.wf-step:hover { background: rgba(255,255,255,0.06); }
  .wf-arrow { color: rgba(255,255,255,0.20); padding: 0 4px; font-size: 16px; }
  .wf-spacer { flex: 1; }
  .wf-next-btn {
    background: linear-gradient(135deg,#fcd34d,#f59e0b);
    color: #0f1620;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    border: none; cursor: pointer;
    box-shadow: 0 4px 12px rgba(245,158,11,0.30);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .wf-next-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(245,158,11,0.40); }
  .wf-done-pill {
    background: rgba(16,185,129,0.20); color:#10b981;
    padding: 8px 14px; border-radius: 10px;
    font-size: 12px; font-weight: 700;
    border: 1px solid rgba(16,185,129,0.40);
  }
</style>
<div class="wf-stepper">
  {% for s in workflow.steps %}
    {% if not loop.first %}<span class="wf-arrow">›</span>{% endif %}
    {% if s.url %}
      <a class="wf-step is-{{ s.status }}" href="{{ s.url }}" title="{{ s.label }}{% if s.no %} {{ s.no }}{% endif %}">
        <span class="wf-icon">{% if s.status == 'done' %}✓{% else %}{{ s.icon }}{% endif %}</span>
        <span>
          {{ s.label }}
          {% if s.no %}<span class="wf-no">· {{ s.no }}</span>{% endif %}
        </span>
      </a>
    {% else %}
      <span class="wf-step is-{{ s.status }}" title="{{ s.label }} (noch nicht angelegt)">
        <span class="wf-icon">{{ s.icon }}</span>
        <span>{{ s.label }}</span>
      </span>
    {% endif %}
  {% endfor %}
  <span class="wf-spacer"></span>
  {% if workflow.next_url %}
    {% if workflow.next_method == "post" %}
      <form method="post" action="{{ workflow.next_url }}" style="margin:0;display:inline;"
            onsubmit="return confirm({{ workflow.next_label|tojson }} + ' — fortfahren?');">
        <input type="hidden" name="csrf_token"
               value="{{ csrf_token if csrf_token is defined and csrf_token else '' }}">
        <button class="wf-next-btn" type="submit">{{ workflow.next_label }}</button>
      </form>
      <script>
        // Fallback: CSRF aus Cookie injecten falls Server-Render leer
        (function(){
          var f = document.currentScript.previousElementSibling;
          var inp = f && f.querySelector('input[name="csrf_token"]');
          if (inp && !inp.value) {
            inp.value = (document.cookie.split('; ').find(function(r){return r.startsWith('csrf_token=');}) || '=').split('=')[1] || '';
          }
        })();
      </script>
    {% else %}
      <a class="wf-next-btn" href="{{ workflow.next_url }}">{{ workflow.next_label }}</a>
    {% endif %}
  {% else %}
    <span class="wf-done-pill">✓ Pipeline komplett</span>
  {% endif %}
</div>
{% endif %}