{% from '_status.html' import status_dot, status_bar %}
{#
  ``deleted_count`` / ``skipped_count`` are only set when this partial is
  rendered as the response to a bulk delete; the SSE stream re-renders it
  without them, which clears the notice on the next poll.
#}
{% if deleted_count or skipped_count %}
<div class="px-6 py-2 bg-blue-50 border-b border-blue-100 text-sm text-blue-800">
    Deleted {{ deleted_count }} run{{ '' if deleted_count == 1 else 's' }}.
    {% if skipped_count %}
    <span class="text-blue-600">{{ skipped_count }} skipped — still running or already gone.</span>
    {% endif %}
</div>
{% endif %}
{% if runs %}
<!-- Runs Table (desktop) -->
<div class="hidden md:block overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="run-select-cell px-4 py-3 w-10"><span class="sr-only">Select</span></th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Workflow</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Backend</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPU Hours</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            {% for run in runs %}
            {% set deletable = run.status.value in ('completed', 'failed', 'cancelled') %}
            <tr class="hover:bg-gray-50" data-run-id="{{ run.id }}">
                <td class="run-select-cell px-4 py-4">
                    {% if deletable %}
                    <input type="checkbox" name="run_ids" value="{{ run.id }}"
                        class="run-checkbox h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
                        aria-label="Select run {{ run.id }}">
                    {% else %}
                    {# Active runs can't be deleted — no box rather than a dead one. #}
                    <span class="block w-4" title="Still running — cancel it first"></span>
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <a href="/runs/{{ run.id }}" class="text-blue-600 hover:text-blue-800 font-mono">
                        {{ run.id }}
                    </a>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ run.workflow_name }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ run.backend_name }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <time class="local-time" datetime="{{ run.created_at.isoformat() }}" data-format="datetime"></time>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center gap-2">
                        {{ status_bar(run.status_counts, 'w-24 h-2 flex-shrink-0') }}
                        <span class="text-sm text-gray-600">
                            {{ run.progress[0] }}/{{ run.progress[1] }}
                        </span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 font-mono">
                    {% if run.total_cpu_hours >= 1 %}
                        {{ "%.1f"|format(run.total_cpu_hours) }}h
                    {% elif run.total_cpu_hours > 0 %}
                        {{ "%.1f"|format(run.total_cpu_hours * 60) }}m
                    {% else %}
                        —
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full
                        {% if run.status.value == 'running' %}bg-indigo-100 text-indigo-700
                        {% elif run.status.value == 'pending' %}bg-gray-100 text-gray-600
                        {% elif run.status.value == 'completed' %}bg-green-100 text-green-700
                        {% elif run.status.value == 'failed' %}bg-red-100 text-red-700
                        {% elif run.status.value == 'cancelled' %}bg-gray-100 text-gray-600
                        {% else %}bg-gray-100 text-gray-600{% endif %}">
                        {{ status_dot(run.status.value) }}
                        {{ run.status.value }}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap flex items-center gap-3">
                    <a href="/runs/{{ run.id }}" class="text-blue-600 hover:text-blue-800 text-sm">
                        View
                    </a>
                    {% if deletable %}
                    <button hx-delete="/runs/{{ run.id }}"
                            hx-confirm="Delete run {{ run.id }}?"
                            hx-target="closest tr"
                            hx-swap="outerHTML swap:200ms"
                            class="run-delete-btn text-gray-400 hover:text-red-600 text-sm"
                            title="Delete run">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Runs Cards (mobile) -->
<div class="md:hidden divide-y divide-gray-200">
    {% for run in runs %}
    {% set deletable = run.status.value in ('completed', 'failed', 'cancelled') %}
    <div class="flex items-center" data-run-id="{{ run.id }}">
    <span class="run-select-cell pl-4 flex-shrink-0">
        {% if deletable %}
        <input type="checkbox" name="run_ids" value="{{ run.id }}"
            class="run-checkbox h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
            aria-label="Select run {{ run.id }}">
        {% else %}
        <span class="block w-4" title="Still running — cancel it first"></span>
        {% endif %}
    </span>
    <a href="/runs/{{ run.id }}" class="flex-1 min-w-0 block px-4 py-3 hover:bg-gray-50 active:bg-gray-100">
        <!-- Row 1: Workflow name + Status badge -->
        <div class="flex items-start justify-between gap-2">
            <span class="text-sm font-medium text-gray-900 truncate">{{ run.workflow_name }}</span>
            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-full flex-shrink-0
                {% if run.status.value == 'running' %}bg-indigo-100 text-indigo-700
                {% elif run.status.value == 'pending' %}bg-gray-100 text-gray-600
                {% elif run.status.value == 'completed' %}bg-green-100 text-green-700
                {% elif run.status.value == 'failed' %}bg-red-100 text-red-700
                {% elif run.status.value == 'cancelled' %}bg-gray-100 text-gray-600
                {% else %}bg-gray-100 text-gray-600{% endif %}">
                {{ status_dot(run.status.value) }}
                {{ run.status.value }}
            </span>
        </div>
        <!-- Row 2: ID, backend, created -->
        <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-gray-500">
            <span class="font-mono">{{ run.id }}</span>
            <span>{{ run.backend_name }}</span>
            <time class="local-time" datetime="{{ run.created_at.isoformat() }}" data-format="datetime"></time>
        </div>
        <!-- Row 3: Progress bar + CPU hours -->
        <div class="mt-2 flex items-center gap-3">
            <div class="flex-1 flex items-center gap-2">
                {{ status_bar(run.status_counts, 'flex-1 h-2') }}
                <span class="text-xs text-gray-600 flex-shrink-0">
                    {{ run.progress[0] }}/{{ run.progress[1] }}
                </span>
            </div>
            <span class="text-xs text-gray-600 font-mono flex-shrink-0">
                {% if run.total_cpu_hours >= 1 %}{{ "%.1f"|format(run.total_cpu_hours) }}h
                {% elif run.total_cpu_hours > 0 %}{{ "%.1f"|format(run.total_cpu_hours * 60) }}m
                {% else %}—{% endif %}
            </span>
        </div>
    </a>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="px-6 py-12 text-center">
    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
    </svg>
    <h3 class="mt-2 text-sm font-medium text-gray-900">No runs yet</h3>
    <p class="mt-1 text-sm text-gray-500">
        Run a workflow above to create a run.
    </p>
</div>
{% endif %}