{# Streaming job details for running jobs using HTMX SSE #}
<div class="border-t dark:border-gray-600 bg-gray-50 dark:bg-gray-700 p-4"
     hx-ext="sse"
     sse-connect="/api/jobs/{{ job.id }}/stream">
    <div class="space-y-3">
        <div class="flex justify-end items-start">
            {# Stop button for running jobs #}
            {% if job.status|string == 'running' %}
                <div class="flex-shrink-0">
                    <button class="inline-flex items-center px-3 py-2 border border-red-300 dark:border-red-600 text-sm leading-4 font-medium rounded-md text-red-700 dark:text-red-300 bg-white dark:bg-gray-800 hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
                            hx-post="/api/jobs/{{ job.id }}/stop"
                            hx-target="#job-stop-result-{{ job.id }}"
                            hx-swap="innerHTML"
                            hx-confirm="Are you sure you want to stop this job? This will kill the current task and skip all remaining tasks."
                            title="Stop job and skip remaining tasks">
                        <svg class="w-4 h-4 mr-1.5"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                            </path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9h6v6H9z">
                            </path>
                        </svg>
                        Stop Job
                    </button>
                </div>
            {% endif %}
        </div>
        {# Container for stop job result messages #}
        <div id="job-stop-result-{{ job.id }}"></div>
        {# Composite job with streaming tasks #}
        <div class="space-y-2" id="tasks-container-{{ job.id }}" sse-swap="tasks">
            {% for task in sorted_tasks %}
                {% set task_expanded = false %}
                {% include "partials/jobs/task_item_streaming.html" %}
            {% endfor %}
        </div>
    </div>
    {# Auto-refresh to static view when job completes #}
    <div style="display: none"
         hx-get="/api/jobs/{{ job.id }}/details-static"
         hx-target="#job-details-{{ job.id }}"
         hx-swap="innerHTML"
         hx-trigger="sse:complete"
         sse-swap="complete"></div>
</div>