{#
/**
 * @file
 * FlowDrop Job Timeline Component
 *
 * Displays jobs as a vertical timeline showing execution progression.
 *
 * Available variables:
 * - jobs: Array of job items
 *   - id: Job ID
 *   - label: Job name
 *   - url: Link to job detail
 *   - status: Job status
 *   - node_type: Node type name
 *   - node_type_url: Link to node type
 *   - duration: Execution duration
 *   - error_message: Error if failed
 */
#}

{% set status_map = {
  'idle': {'variant': 'neutral', 'icon': '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd"/></svg>', 'label': 'Idle'},
  'pending': {'variant': 'warning', 'icon': '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd"/></svg>', 'label': 'Pending'},
  'running': {'variant': 'info', 'icon': '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0v2.43l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd"/></svg>', 'label': 'Running'},
  'completed': {'variant': 'success', 'icon': '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>', 'label': 'Completed'},
  'failed': {'variant': 'error', 'icon': '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>', 'label': 'Failed'},
  'cancelled': {'variant': 'neutral', 'icon': '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM6.75 9.25a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd"/></svg>', 'label': 'Cancelled'},
  'skipped': {'variant': 'neutral', 'icon': '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM6.75 6.75a.75.75 0 000 1.5h2.69l-3.22 3.22a.75.75 0 101.06 1.06l3.22-3.22v2.69a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5z" clip-rule="evenodd"/></svg>', 'label': 'Skipped'}
} %}

<div class="fd-job-timeline">
  {% for job in jobs %}
    {% set config = status_map[job.status]|default({'variant': 'neutral', 'icon': '', 'label': job.status|capitalize}) %}
    {% set is_last = loop.last %}
    {% set is_first = loop.first %}
    
    <div class="fd-job-timeline__item fd-job-timeline__item--{{ config.variant }}{% if is_first %} fd-job-timeline__item--first{% endif %}{% if is_last %} fd-job-timeline__item--last{% endif %}">
      {# Timeline Track (left side with continuous line via CSS) #}
      <div class="fd-job-timeline__track">
        <div class="fd-job-timeline__node fd-job-timeline__node--{{ config.variant }}" aria-label="{{ config.label }}">
          {{ config.icon|raw }}
        </div>
      </div>
      
      {# Job Content Card #}
      <a href="{{ job.url }}" class="fd-job-timeline__card fd-job-timeline__card--{{ config.variant }}">
        <div class="fd-job-timeline__card-content">
          <div class="fd-job-timeline__card-main">
            <span class="fd-job-timeline__title">{{ job.label }}</span>
            {% if job.node_type %}
              <span class="fd-job-timeline__type">{{ job.node_type }}</span>
            {% endif %}
          </div>
          
          <div class="fd-job-timeline__card-meta">
            {% if job.duration %}
              <span class="fd-job-timeline__duration" title="Duration">
                <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd"/>
                </svg>
                {{ job.duration }}
              </span>
            {% endif %}
            <span class="fd-job-timeline__badge fd-job-timeline__badge--{{ config.variant }}">
              {{ config.label }}
            </span>
          </div>
        </div>
        
        {% if job.error_message %}
          <div class="fd-job-timeline__error">
            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
            </svg>
            <span>{{ job.error_message }}</span>
          </div>
        {% endif %}
      </a>
    </div>
  {% endfor %}
</div>
