{% if run %}
<div class="grid grid-cols-2 md:grid-cols-5 {% if cost_summary is defined and cost_summary and cost_summary.costed_tasks > 0 %}lg:grid-cols-6{% endif %} gap-4">
    <div>
        <p class="text-sm text-gray-500">Status</p>
        <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>
    </div>
    <div>
        <p class="text-sm text-gray-500">Progress</p>
        <p class="text-lg font-semibold text-gray-800">{{ run.progress[0] }} / {{ run.progress[1] }}</p>
    </div>
    <div>
        <p class="text-sm text-gray-500">CPU Hours</p>
        <p class="text-lg font-semibold text-gray-800 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 %}
        </p>
    </div>
    <div>
        <p class="text-sm text-gray-500">Created</p>
        <p class="text-lg font-semibold text-gray-800"><time class="local-time" datetime="{{ run.created_at.isoformat() }}" data-format="datetime-seconds"></time></p>
    </div>
    <div>
        <p class="text-sm text-gray-500">Max Concurrent</p>
        <p class="text-lg font-semibold text-gray-800">{{ run.max_concurrent }}</p>
    </div>
    {% if cost_summary is defined and cost_summary and cost_summary.costed_tasks > 0 %}
    <div>
        <p class="text-sm text-gray-500">Est. Cost</p>
        <p class="text-lg font-semibold text-gray-800">
            ${{ "%.2f"|format(cost_summary.total_cost) }}
        </p>
        {% if cost_summary.uncosted_tasks > 0 %}
        <p class="text-xs text-gray-400">{{ cost_summary.costed_tasks }}/{{ cost_summary.costed_tasks + cost_summary.uncosted_tasks }} tasks costed</p>
        {% endif %}
    </div>
    {% endif %}
</div>

<!-- Progress Bar -->
<div class="mt-4">
    <div class="w-full bg-gray-200 rounded-full h-3">
        <div class="bg-blue-600 h-3 rounded-full transition-all" style="width: {{ run.progress_percent }}%"></div>
    </div>
    <div class="flex justify-between text-sm text-gray-500 mt-1">
        <span>{{ run.completed_count }} completed</span>
        <span>{{ run.running_count }} running</span>
        <span>{{ run.pending_count }} pending</span>
        {% if run.failed_count > 0 %}
        <span class="text-red-600">{{ run.failed_count }} failed</span>
        {% endif %}
        {% if run.dep_failed_count > 0 %}
        <span class="text-orange-600">{{ run.dep_failed_count }} dep failed</span>
        {% endif %}
    </div>
</div>

<!-- Action Buttons -->
<div class="mt-4 flex gap-2">
    {% if run.status.value in ['pending', 'running'] %}
    <button
        hx-post="/runs/{{ run.id }}/cancel"
        hx-swap="none"
        hx-confirm="Cancel all pending and running tasks?"
        hx-on::after-request="if(event.detail.successful) window.location.reload()"
        class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium"
    >
        Cancel Run
    </button>
    {% endif %}
    {% if run.status.value in ['completed', 'failed', 'cancelled'] %}
    <div class="relative" id="rerun-dropdown">
        <button
            onclick="document.getElementById('rerun-menu').classList.toggle('hidden')"
            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium inline-flex items-center gap-1.5"
        >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
            Re-run
            <svg class="w-3 h-3 ml-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </button>
        <div id="rerun-menu" class="hidden absolute left-0 mt-1 w-48 bg-white rounded-lg shadow-lg border z-10">
            <button onclick="rerunRun('{{ run.id }}', 'new')"
                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-t-lg">
                Re-run as new
            </button>
            <button onclick="rerunRun('{{ run.id }}', 'in_place')"
                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-lg">
                Re-run in place
            </button>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}