{#
/**
 * @file
 * FlowDrop Job List Component
 *
 * Displays a list of jobs within a pipeline.
 *
 * 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 = {
  '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>'},
  '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>'},
  '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>'},
  '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>'},
  '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>'}
} %}

<div class="fd-job-list">
  {% for job in jobs %}
    {% set config = status_map[job.status]|default({'variant': 'neutral', 'icon': ''}) %}
    
    <div class="fd-job-list__item fd-job-list__item--{{ config.variant }}">
      <div class="fd-job-list__status-icon" aria-label="{{ job.status|capitalize }}">
        {{ config.icon|raw }}
      </div>
      
      <div class="fd-job-list__content">
        <div class="fd-job-list__header">
          <a href="{{ job.url }}" class="fd-job-list__title">{{ job.label }}</a>
          {% if job.node_type %}
            <span class="fd-job-list__node-type">
              {% if job.node_type_url %}
                <a href="{{ job.node_type_url }}">{{ job.node_type }}</a>
              {% else %}
                {{ job.node_type }}
              {% endif %}
            </span>
          {% endif %}
        </div>
        
        {% if job.error_message %}
          <div class="fd-job-list__error">{{ job.error_message }}</div>
        {% endif %}
      </div>
      
      <div class="fd-job-list__meta">
        {% if job.duration %}
          <span class="fd-job-list__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-list__badge fd-job-list__badge--{{ config.variant }}">
          {{ job.status|capitalize }}
        </span>
      </div>
      
      <a href="{{ job.url }}" class="fd-job-list__arrow" aria-label="View job details">
        <svg viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
        </svg>
      </a>
    </div>
  {% endfor %}
</div>
