{% load insight_tags %}

<ol class="divide-y divide-insight-border-surface flex flex-col w-full bg-insight-surface border border-insight-surface rounded-insight-surface md:flex-row md:divide-y-0">
    {% for item in items %}
        <li class="flex gap-4 items-center px-6 w-full h-20"{% if item.current %} aria-current="step"{% endif %}>
            {% if item.success %}
                <div class="flex justify-center items-center size-12 text-white bg-insight-primary-action rounded-insight-full">
                    {% icon name="check" size="xl" %}
                </div>
            {% elif item.failed %}
                <div class="flex justify-center items-center size-12 text-white bg-insight-danger-action rounded-insight-full">
                    {% icon name="x-mark" size="xl" %}
                </div>
            {% else %}
                <div class="flex justify-center items-center size-12 border-2 rounded-insight-full {% if not item.current %}text-insight-muted border-insight-surface{% elif item.current %}animate-pulse text-insight-primary-foreground{% else %}border-insight-primary-foreground{% endif %}">
                    {% if item.icon %}
                        {% icon item.icon %}
                    {% else %}
                        <span>0{{ forloop.counter }}</span>
                    {% endif %}
                </div>
            {% endif %}
            <div class="flex-1">
                <a {% if item.request_url %}href="{{ item.request_url }}"{% endif %}>
                    {% if item.failed %}
                        <span class="block font-semibold text-insight-danger-foreground">{{ item.title }}</span>
                        <span class="block text-sm text-insight-danger-foreground">{{ item.description }}</span>
                    {% else %}
                        <span class="block font-semibold {% if not item.success and not item.current %}text-insight-muted{% elif item.current %}text-insight-primary-foreground{% else %}text-insight-headline{% endif %}">{{ item.title }}</span>
                        <span class="block text-sm {% if not item.success and not item.current %}text-insight-muted{% else %}text-insight-body{% endif %}">{{ item.description }}</span>
                    {% endif %}
                </a>
            </div>
        </li>
        {% if not forloop.last %}
            <li aria-hidden="true" class="hidden text-insight-muted md:block">
                <svg viewBox="0 0 22 80" fill="none" preserveAspectRatio="none" aria-hidden="true" class="rtl:rotate-180 w-6 h-20">
                    <path d="M0 -2L20 40L0 82" stroke="currentcolor" vector-effect="non-scaling-stroke" stroke-linejoin="round"></path>
                </svg>
            </li>
        {% endif %}
    {% endfor %}
</ol>