{% from '_status.html' import status_dot %}
{% 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-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>
    <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'] %}
    <button
        onclick="rerunRun('{{ run.id }}', 'in_place')"
        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
    </button>
    {% endif %}
</div>
{% endif %}