{#
/**
 * @file
 * Enhanced theme implementation to present a flowdrop pipeline entity.
 *
 * This template provides a modern, well-organized display of pipeline information
 * using FlowDrop UI components.
 *
 * Available variables:
 * - content: A list of content items. Use 'content' to print all content, or
 *   print a subset such as 'content.label'.
 * - attributes: HTML attributes for the container element.
 * - pipeline: The pipeline entity (if passed from preprocess)
 * - job_counts: Array of job counts by status (if passed from preprocess)
 * - jobs_data: Array of job data for display (if passed from preprocess)
 *
 * @see template_preprocess_flowdrop_pipeline()
 */
#}

{# Define status mapping for badges #}
{% set status_config = {
  'pending': {'variant': 'warning', 'label': 'Pending'},
  'running': {'variant': 'info', 'label': 'Running'},
  'completed': {'variant': 'success', 'label': 'Completed'},
  'failed': {'variant': 'error', 'label': 'Failed'},
  'cancelled': {'variant': 'neutral', 'label': 'Cancelled'},
  'paused': {'variant': 'warning', 'label': 'Paused'},
  'skipped': {'variant': 'neutral', 'label': 'Skipped'}
} %}

<article{{ attributes.addClass('fd-pipeline-detail') }}>
  {% if view_mode != 'full' %}
    {{ title_prefix }}
    {{ title_suffix }}
  {% endif %}

  {# Check if we have the enhanced data, otherwise fall back to default #}
  {% if pipeline is defined and pipeline %}
    {% set current_status = pipeline.status.value|default('pending') %}
    {% set status = status_config[current_status]|default({'variant': 'neutral', 'label': current_status|capitalize}) %}

    {# ===== STATUS HEADER ===== #}
    <div class="fd-pipeline-detail__header">
      <div class="fd-pipeline-detail__status-row">
        {% include 'flowdrop_ui_components:status-badge' with {
          label: status.label,
          variant: status.variant,
          size: 'md',
          dot: current_status == 'running'
        } only %}

        {% if workflow_label is defined and workflow_label %}
          <span class="fd-pipeline-detail__workflow-link">
            from workflow:
            <a href="{{ workflow_url }}">{{ workflow_label }}</a>
          </span>
        {% endif %}
      </div>

      {# Job Progress Bar (for pipelines with jobs) #}
      {% if job_counts is defined and job_counts.total > 0 %}
        <div class="fd-pipeline-detail__progress">
          {% include 'flowdrop_ui_components:progress-bar' with {
            segments: [
              { count: job_counts.completed|default(0), status: 'completed', label: 'Completed' },
              { count: job_counts.running|default(0), status: 'running', label: 'Running' },
              { count: job_counts.pending|default(0), status: 'pending', label: 'Pending' },
              { count: job_counts.failed|default(0), status: 'failed', label: 'Failed' },
              { count: job_counts.cancelled|default(0), status: 'cancelled', label: 'Cancelled' }
            ],
            total: job_counts.total,
            size: 'md',
            show_labels: true,
            animated: current_status == 'running'
          } only %}
        </div>
      {% endif %}
    </div>

    {# ===== OVERVIEW SECTION ===== #}
    <section class="fd-detail-section">
      <div class="fd-detail-section__header fd-detail-section__header--static">
        <span class="fd-detail-section__icon" aria-hidden="true">
          <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>
        </span>
        <h2 class="fd-detail-section__title">Overview</h2>
      </div>
      <div class="fd-detail-section__content">
        {% include 'flowdrop_ui_components:detail-grid' with {
          columns: '3',
          items: [
            { label: 'Author', value: author_name|default('Unknown'), url: author_url|default(null) },
            { label: 'Created', value: created_date|default('N/A') },
            { label: 'Changed', value: changed_date|default('N/A') },
            { label: 'Started', value: started_date|default('Not started') },
            { label: 'Completed', value: completed_date|default('Not completed') },
            { label: 'Duration', value: duration|default('N/A') }
          ]
        } only %}
      </div>
    </section>

    {# ===== CONFIGURATION SECTION ===== #}
    <section class="fd-detail-section fd-detail-section--collapsible">
      <button type="button" class="fd-detail-section__header" aria-expanded="true" aria-controls="config-section" data-flowdrop-collapse-toggle>
        <span class="fd-detail-section__icon" aria-hidden="true">
          <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/></svg>
        </span>
        <h2 class="fd-detail-section__title">Configuration</h2>
        <svg class="fd-detail-section__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
        </svg>
      </button>
      <div id="config-section" class="fd-detail-section__content">
        {% include 'flowdrop_ui_components:detail-grid' with {
          columns: '3',
          items: [
            { label: 'Max Concurrent Jobs', value: pipeline.max_concurrent_jobs.value|default(5) },
            { label: 'Priority Strategy', value: pipeline.job_priority_strategy.value|default('dependency_order')|replace({'_': ' '})|title },
            { label: 'Retry Strategy', value: pipeline.retry_strategy.value|default('individual')|title }
          ]
        } only %}
      </div>
    </section>

    {# ===== JOBS TIMELINE SECTION ===== #}
    {% if jobs_data is defined and jobs_data|length > 0 %}
      <section class="fd-detail-section">
        <div class="fd-detail-section__header fd-detail-section__header--static">
          <span class="fd-detail-section__icon" aria-hidden="true">
            {# Timeline icon - vertical flow indicator #}
            <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>
          </span>
          <h2 class="fd-detail-section__title">Execution Timeline ({{ jobs_data|length }} jobs)</h2>
        </div>
        <div class="fd-detail-section__content">
          {% include 'flowdrop_ui_components:job-timeline' with {
            jobs: jobs_data
          } only %}
        </div>
      </section>
    {% endif %}

    {# ===== DATA SECTION ===== #}
    <section class="fd-detail-section fd-detail-section--collapsible">
      <button type="button" class="fd-detail-section__header" aria-expanded="false" aria-controls="data-section" data-flowdrop-collapse-toggle>
        <span class="fd-detail-section__icon" aria-hidden="true">
          <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd"/></svg>
        </span>
        <h2 class="fd-detail-section__title">Data</h2>
        <svg class="fd-detail-section__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
        </svg>
      </button>
      <div id="data-section" class="fd-detail-section__content fd-detail-section__content--collapsed">
        <div class="fd-pipeline-detail__data-viewers">
          {% include 'flowdrop_ui_components:data-viewer' with {
            label: 'Input Data',
            data: pipeline.input_data.value|default('{}'),
            collapsed: true,
            variant: 'default'
          } only %}

          {% include 'flowdrop_ui_components:data-viewer' with {
            label: 'Output Data',
            data: pipeline.output_data.value|default('{}'),
            collapsed: true,
            variant: current_status == 'completed' ? 'success' : 'default'
          } only %}

          {% include 'flowdrop_ui_components:data-viewer' with {
            label: 'Execution Context',
            data: pipeline.execution_context.value|default('{}'),
            collapsed: true,
            variant: 'info'
          } only %}

          {% if pipeline.error_message.value %}
            {% include 'flowdrop_ui_components:data-viewer' with {
              label: 'Error Message',
              data: pipeline.error_message.value,
              collapsed: false,
              variant: 'error'
            } only %}
          {% endif %}
        </div>
      </div>
    </section>

  {% else %}
    {# Fallback to original content display #}
    {% if content %}
      {{- content -}}
    {% endif %}
  {% endif %}
</article>
