{# Run card partial - expects 'run' variable #}
{% set status_colors = {
    'completed': 'green',
    'running': 'blue',
    'pending': 'yellow',
    'failed': 'red',
    'cached': 'purple'
} %}
{% set color = status_colors.get(run.status, 'gray') %}

<a href="/run/{{ run.run_id }}"
   class="block bg-gray-800 border border-gray-700 rounded-lg p-4 hover:border-gray-600 transition-colors">
    <div class="flex items-center justify-between mb-2">
        <div class="flex items-center space-x-3">
            <span class="font-mono text-sm text-gray-400">{{ run.run_id[:12] }}...</span>
            <span class="bg-{{ color }}-900 text-{{ color }}-300 px-2 py-0.5 rounded text-xs uppercase">
                {{ run.status }}
            </span>
            {% if run.cached %}
            <span class="bg-purple-900 text-purple-300 px-2 py-0.5 rounded text-xs">cached</span>
            {% endif %}
        </div>
        <span class="text-gray-500 text-sm">{{ run.created_at }}</span>
    </div>

    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4 text-sm">
            <span class="text-gray-400">
                Recipe: <span class="text-white">{{ run.recipe or 'Unknown' }}</span>
            </span>
            {% if run.total_steps %}
            <span class="text-gray-400">
                Steps: <span class="text-white">{{ run.executed or 0 }}/{{ run.total_steps }}</span>
            </span>
            {% endif %}
        </div>

        {% if run.output_hash %}
        <span class="font-mono text-xs text-gray-500">{{ run.output_hash[:16] }}...</span>
        {% endif %}
    </div>

    {% if run.inputs %}
    <div class="mt-2 text-xs text-gray-500">
        Inputs: {{ run.inputs | length }} file(s)
    </div>
    {% endif %}
</a>