{% 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="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 %}
            <tr class="hover:bg-gray-50">
                <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">
                        <div class="w-24 bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-600 h-2 rounded-full" style="width: {{ run.progress_percent }}%">
                            </div>
                        </div>
                        <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-green-100 text-green-700
                        {% elif run.status.value == 'pending' %}bg-gray-100 text-gray-600
                        {% elif run.status.value == 'completed' %}bg-blue-100 text-blue-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 %}">
                        {% if run.status.value == 'running' %}
                        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                        {% elif run.status.value == 'pending' %}
                        <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                        {% elif run.status.value == 'completed' %}
                        <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                        {% elif run.status.value == 'failed' %}
                        <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                        {% elif run.status.value == 'cancelled' %}
                        <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                        {% endif %}
                        {{ 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 run.status.value in ('completed', 'failed', 'cancelled') %}
                    <button hx-delete="/runs/{{ run.id }}"
                            hx-confirm="Delete run {{ run.id }}?"
                            hx-target="closest tr"
                            hx-swap="outerHTML swap:200ms"
                            class="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 %}
    <a href="/runs/{{ run.id }}" class="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-green-100 text-green-700
                {% elif run.status.value == 'pending' %}bg-gray-100 text-gray-600
                {% elif run.status.value == 'completed' %}bg-blue-100 text-blue-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 %}">
                {% if run.status.value == 'running' %}
                <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                {% elif run.status.value == 'pending' %}
                <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                {% elif run.status.value == 'completed' %}
                <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                {% elif run.status.value == 'failed' %}
                <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                {% elif run.status.value == 'cancelled' %}
                <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                {% endif %}
                {{ 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">
                <div class="flex-1 bg-gray-200 rounded-full h-2">
                    <div class="bg-blue-600 h-2 rounded-full" style="width: {{ run.progress_percent }}%"></div>
                </div>
                <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>
    {% 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 %}