{#
/**
 * @file
 * FlowDrop Dependency Navigator Component
 *
 * A 3-column visual component showing job dependency relationships.
 * - Left column: Parent jobs (dependencies)
 * - Center column: Current job (representational)
 * - Right column: Child jobs (dependents)
 *
 * Available variables:
 * - current_job: The current job object
 *   - id, label, url, status, node_type, node_type_url, duration
 * - parent_jobs: Array of parent job objects
 * - child_jobs: Array of child job objects
 *   Each job has: id, label, url, status, node_type, node_type_url, duration, error_message
 */
#}

{% 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>', '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'}
} %}

{% set has_parents = parent_jobs is defined and parent_jobs|length > 0 %}
{% set has_children = child_jobs is defined and child_jobs|length > 0 %}

{# Only render if there are dependencies #}
{% if has_parents or has_children %}
<div class="fd-dep-nav" role="navigation" aria-label="Job dependency navigation" data-flowdrop-dependency-navigator>
  {# SVG Canvas for curved connectors - positioned absolutely over the grid #}
  <svg class="fd-dep-nav__canvas" aria-hidden="true">
    <defs>
      <marker id="fd-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L8,4 L0,8 L2,4 Z" fill="currentColor"/>
      </marker>
    </defs>
    {# Paths will be drawn by JavaScript #}
  </svg>

  {# ===== LEFT COLUMN: Parent Jobs ===== #}
  <div class="fd-dep-nav__column fd-dep-nav__column--parents" data-column="parents">
    <div class="fd-dep-nav__column-header">
      <span class="fd-dep-nav__column-icon fd-dep-nav__column-icon--parent">
        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M9.47 6.47a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 01-1.06-1.06l4.25-4.25z" clip-rule="evenodd"/>
        </svg>
      </span>
      <span class="fd-dep-nav__column-title">Parents</span>
      <span class="fd-dep-nav__column-count">{{ parent_jobs|length|default(0) }}</span>
    </div>
    <div class="fd-dep-nav__items" data-items="parents">
      {% if has_parents %}
        {% for job in parent_jobs %}
          {% set config = status_map[job.status]|default({'variant': 'neutral', 'icon': '', 'label': 'Unknown'}) %}
          <a href="{{ job.url }}" class="fd-dep-nav__item fd-dep-nav__item--{{ config.variant }}" data-job-id="{{ job.id }}" data-connector-source>
            <span class="fd-dep-nav__item-status" aria-label="{{ config.label }}">
              {{ config.icon|raw }}
            </span>
            <span class="fd-dep-nav__item-content">
              <span class="fd-dep-nav__item-label">{{ job.label }}</span>
              {% if job.node_type %}
                <span class="fd-dep-nav__item-type">{{ job.node_type }}</span>
              {% endif %}
              <span class="fd-dep-nav__item-meta">
                {% if job.duration %}
                  <span class="fd-dep-nav__item-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-dep-nav__item-badge fd-dep-nav__item-badge--{{ config.variant }}">{{ config.label }}</span>
              </span>
              {% if job.error_message %}
                <span class="fd-dep-nav__item-error" title="{{ job.error_message }}">
                  <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>
                  {{ job.error_message|length > 50 ? job.error_message|slice(0, 50) ~ '...' : job.error_message }}
                </span>
              {% endif %}
            </span>
          </a>
        {% endfor %}
      {% else %}
        <div class="fd-dep-nav__empty">
          <span class="fd-dep-nav__empty-text">No parent jobs</span>
        </div>
      {% endif %}
    </div>
  </div>

  {# ===== CENTER COLUMN: Current Job ===== #}
  <div class="fd-dep-nav__column fd-dep-nav__column--current" data-column="current">
    <div class="fd-dep-nav__column-header">
      <span class="fd-dep-nav__column-icon fd-dep-nav__column-icon--current">
        <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-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z" clip-rule="evenodd"/>
        </svg>
      </span>
      <span class="fd-dep-nav__column-title">Current</span>
    </div>
    <div class="fd-dep-nav__items" data-items="current">
      {% if current_job is defined and current_job %}
        {% set config = status_map[current_job.status]|default({'variant': 'neutral', 'icon': '', 'label': 'Unknown'}) %}
        <div class="fd-dep-nav__item fd-dep-nav__item--current fd-dep-nav__item--{{ config.variant }}" data-connector-target="left" data-connector-source-right>
          <span class="fd-dep-nav__item-status" aria-label="{{ config.label }}">
            {{ config.icon|raw }}
          </span>
          <span class="fd-dep-nav__item-content">
            <span class="fd-dep-nav__item-label">{{ current_job.label }}</span>
            {% if current_job.node_type %}
              <span class="fd-dep-nav__item-type">{{ current_job.node_type }}</span>
            {% endif %}
            <span class="fd-dep-nav__item-meta">
              {% if current_job.duration %}
                <span class="fd-dep-nav__item-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>
                  {{ current_job.duration }}
                </span>
              {% endif %}
              <span class="fd-dep-nav__item-badge fd-dep-nav__item-badge--{{ config.variant }}">{{ config.label }}</span>
            </span>
          </span>
        </div>
      {% endif %}
    </div>
  </div>

  {# ===== RIGHT COLUMN: Child Jobs ===== #}
  <div class="fd-dep-nav__column fd-dep-nav__column--children" data-column="children">
    <div class="fd-dep-nav__column-header">
      <span class="fd-dep-nav__column-icon fd-dep-nav__column-icon--child">
        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.53 13.53a.75.75 0 01-1.06 0l-4.25-4.25a.75.75 0 011.06-1.06L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25z" clip-rule="evenodd"/>
        </svg>
      </span>
      <span class="fd-dep-nav__column-title">Children</span>
      <span class="fd-dep-nav__column-count">{{ child_jobs|length|default(0) }}</span>
    </div>
    <div class="fd-dep-nav__items" data-items="children">
      {% if has_children %}
        {% for job in child_jobs %}
          {% set config = status_map[job.status]|default({'variant': 'neutral', 'icon': '', 'label': 'Unknown'}) %}
          <a href="{{ job.url }}" class="fd-dep-nav__item fd-dep-nav__item--{{ config.variant }}" data-job-id="{{ job.id }}" data-connector-target="right">
            <span class="fd-dep-nav__item-status" aria-label="{{ config.label }}">
              {{ config.icon|raw }}
            </span>
            <span class="fd-dep-nav__item-content">
              <span class="fd-dep-nav__item-label">{{ job.label }}</span>
              {% if job.node_type %}
                <span class="fd-dep-nav__item-type">{{ job.node_type }}</span>
              {% endif %}
              <span class="fd-dep-nav__item-meta">
                {% if job.duration %}
                  <span class="fd-dep-nav__item-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-dep-nav__item-badge fd-dep-nav__item-badge--{{ config.variant }}">{{ config.label }}</span>
              </span>
              {% if job.error_message %}
                <span class="fd-dep-nav__item-error" title="{{ job.error_message }}">
                  <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>
                  {{ job.error_message|length > 50 ? job.error_message|slice(0, 50) ~ '...' : job.error_message }}
                </span>
              {% endif %}
            </span>
          </a>
        {% endfor %}
      {% else %}
        <div class="fd-dep-nav__empty">
          <span class="fd-dep-nav__empty-text">No child jobs</span>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endif %}
