{#
/**
 * @file
 * Enhanced theme implementation to present a flowdrop job entity.
 *
 * This template provides a modern, well-organized display of job 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.
 * - job: The job entity (if passed from preprocess)
 * - dependent_jobs: Array of jobs this job depends on (if passed from preprocess)
 *
 * @see template_preprocess_flowdrop_job()
 */
#}

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

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

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

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

        {% if node_type_label is defined and node_type_label %}
          <span class="fd-job-detail__node-type">
            Node Type:
            <a href="{{ node_type_url }}">{{ node_type_label }}</a>
          </span>
        {% endif %}

        {% if pipeline_label is defined and pipeline_label %}
          <span class="fd-job-detail__pipeline-link">
            Pipeline:
            <a href="{{ pipeline_url }}">{{ pipeline_label }}</a>
          </span>
        {% endif %}
      </div>

      {# Retry Info (if applicable) #}
      {% set retry_count = job.retry_count.value|default(0) %}
      {% set max_retries = job.max_retries.value|default(3) %}
      {% if retry_count > 0 or current_status == 'failed' %}
        <div class="fd-job-detail__retry-info">
          {% if current_status == 'failed' and retry_count >= max_retries %}
            {% include 'flowdrop_ui_components:pill' with {
              label: 'Max retries reached (' ~ retry_count ~ '/' ~ max_retries ~ ')',
              variant: 'error',
              style: 'soft',
              size: 'sm'
            } only %}
          {% elseif retry_count > 0 %}
            {% include 'flowdrop_ui_components:pill' with {
              label: 'Retry attempt ' ~ retry_count ~ ' of ' ~ max_retries,
              variant: 'warning',
              style: 'soft',
              size: 'sm'
            } only %}
          {% endif %}
        </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: 'Priority', value: job.priority.value|default(0) },
            { label: 'Created', value: created_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>

    {# ===== EXECUTION DETAILS SECTION ===== #}
    <section class="fd-detail-section fd-detail-section--collapsible">
      <button type="button" class="fd-detail-section__header" aria-expanded="true" aria-controls="exec-section" data-fd-collapse-toggle>
        <span class="fd-detail-section__icon" aria-hidden="true">
          <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z" clip-rule="evenodd"/></svg>
        </span>
        <h2 class="fd-detail-section__title">Execution Details</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="exec-section" class="fd-detail-section__content">
        {# Build items array conditionally to avoid null variant #}
        {% set exec_items = [] %}
        {% if retry_count is defined and retry_count > 0 %}
          {% set exec_items = exec_items|merge([{ label: 'Retry Count', value: retry_count ~ ' / ' ~ max_retries, variant: 'warning' }]) %}
        {% else %}
          {% set exec_items = exec_items|merge([{ label: 'Retry Count', value: (retry_count|default(0)) ~ ' / ' ~ (max_retries|default(3)) }]) %}
        {% endif %}
        {% set exec_items = exec_items|merge([
          { label: 'Node ID', value: node_id|default('N/A'), mono: true },
          { label: 'Changed', value: changed_date|default('N/A') }
        ]) %}
        {% include 'flowdrop_ui_components:detail-grid' with {
          columns: '3',
          items: exec_items
        } only %}
      </div>
    </section>

    {# ===== PARENT NODES SECTION (Jobs this job depends on) ===== #}
    {% if parent_jobs is defined and parent_jobs|length > 0 %}
      <section class="fd-detail-section fd-detail-section--collapsible">
        <button type="button" class="fd-detail-section__header" aria-expanded="true" aria-controls="parents-section" data-fd-collapse-toggle>
          <span class="fd-detail-section__icon fd-detail-section__icon--parent" aria-hidden="true">
            <svg viewBox="0 0 20 20" fill="currentColor"><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>
          </span>
          <h2 class="fd-detail-section__title">Parent Nodes ({{ parent_jobs|length }})</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="parents-section" class="fd-detail-section__content">
          <p class="fd-job-detail__section-hint">Jobs that must complete before this job can run.</p>
          {% include 'flowdrop_ui_components:job-list' with {
            jobs: parent_jobs
          } only %}
        </div>
      </section>
    {% endif %}

    {# ===== CHILD NODES SECTION (Jobs that depend on this job) ===== #}
    {% if child_jobs is defined and child_jobs|length > 0 %}
      <section class="fd-detail-section fd-detail-section--collapsible">
        <button type="button" class="fd-detail-section__header" aria-expanded="true" aria-controls="children-section" data-fd-collapse-toggle>
          <span class="fd-detail-section__icon fd-detail-section__icon--child" aria-hidden="true">
            <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832l-3.71 3.938a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd"/></svg>
          </span>
          <h2 class="fd-detail-section__title">Child Nodes ({{ child_jobs|length }})</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="children-section" class="fd-detail-section__content">
          <p class="fd-job-detail__section-hint">Jobs that wait for this job to complete before they can run.</p>
          {% include 'flowdrop_ui_components:job-list' with {
            jobs: child_jobs
          } only %}
        </div>
      </section>
    {% endif %}

    {# ===== ERROR MESSAGE SECTION (if failed) ===== #}
    {% if job.error_message.value %}
      <section class="fd-detail-section">
        <div class="fd-detail-section__header fd-detail-section__header--static">
          <span class="fd-detail-section__icon fd-detail-section__icon--error" aria-hidden="true">
            <svg viewBox="0 0 20 20" fill="currentColor"><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>
          <h2 class="fd-detail-section__title">Error Details</h2>
        </div>
        <div class="fd-detail-section__content">
          <div class="fd-job-detail__error-message">
            {{ job.error_message.value }}
          </div>
        </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-fd-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-job-detail__data-viewers">
          {% include 'flowdrop_ui_components:data-viewer' with {
            label: 'Input Data',
            data: job.input_data.value|default('{}'),
            collapsed: true,
            variant: 'default'
          } only %}

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

          {% include 'flowdrop_ui_components:data-viewer' with {
            label: 'Metadata',
            data: job.metadata.value|default('{}'),
            collapsed: true,
            variant: 'info'
          } only %}
        </div>
      </div>
    </section>

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