{% load i18n %}
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mb-6">
    <div class="flex items-center justify-between">
        {% for step in workflow_steps %}
        <div class="flex flex-col items-center flex-shrink-0">
            {% if step.done %}
            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-green-500 text-white">
                <i data-lucide="check" class="w-5 h-5"></i>
            </div>
            {% elif step.current %}
            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-navy text-white ring-4 ring-navy/20">
                <i data-lucide="{{ step.icon }}" class="w-5 h-5"></i>
            </div>
            {% else %}
            <div class="w-10 h-10 rounded-full flex items-center justify-center border-2 border-slate-200 text-slate-300">
                <i data-lucide="{{ step.icon }}" class="w-5 h-5"></i>
            </div>
            {% endif %}
            <span class="text-xs font-bold mt-2 {% if step.done %}text-slate{% elif step.current %}text-navy{% else %}text-slate-300{% endif %}">{{ step.label }}</span>
        </div>
        {% if not forloop.last %}
        <div class="flex-1 h-1 mx-2 rounded-full {% if step.done %}bg-green-500{% else %}bg-slate-200{% endif %}"></div>
        {% endif %}
        {% endfor %}
    </div>
</div>