{# Success response for job stop operation #}
<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-4">
    <div class="flex items-center">
        <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-3"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
        </svg>
        <div>
            <h3 class="text-sm font-medium text-green-800 dark:text-green-200">
                Job Stopped Successfully
            </h3>
            <p class="text-sm text-green-700 dark:text-green-300 mt-1">{{ message }}</p>
            {% if tasks_skipped > 0 %}
                <p class="text-xs text-green-600 dark:text-green-400 mt-1">
                    {{ tasks_skipped }} remaining tasks were skipped
                </p>
            {% endif %}
            {% if current_task_killed %}
                <p class="text-xs text-green-600 dark:text-green-400 mt-1">
                    Current running task was terminated
                </p>
            {% endif %}
        </div>
    </div>
</div>
{# Auto-refresh the job details after stopping #}
<div style="display: none"
     hx-get="/api/jobs/{{ job_id }}/toggle-details?expanded=true"
     hx-target="#job-item-{{ job_id }}"
     hx-swap="outerHTML"
     hx-trigger="load delay:1s"></div>