{% load ui_props %}

<c-vars id=""
        session=""
        step=""
        revision="0"
        busy="False"
        progress_steps=""
        restart_url=""
        show_restart="False"
        submit_value="next"
        submit_label="Continue"
        class="" />
<section id="{{ id }}"
         data-ui-import-flow
         data-session="{{ session }}"
         data-step="{{ step }}"
         data-revision="{{ revision }}"
         aria-busy="{% if busy|ui_bool %}true{% else %}false{% endif %}"
         class="size-full min-h-0 min-w-0 {{ class }}" {{ attrs }}>
    <c-ui.action class="size-full min-h-0">
        {% csrf_token %}
        <input type="hidden" name="session" value="{{ session }}">
        <input type="hidden" name="revision" value="{{ revision }}">
        <c-ui.frame height="full">
            <c-ui.frame.header padding_x="4" padding_y="3" data-ui-import-flow-progress>
                <c-ui.flex gap="3" align="center" wrap="wrap" aria-label="Import progress">
                    {% for progress_step in progress_steps %}
                        {% if progress_step.href %}
                            <c-ui.button href="{{ progress_step.href }}" x-ui-request variant="ghost" color="neutral" size="sm">
                                <c-ui.flex as="span" gap="3" align="center">
                                    <c-ui.badge size="xs" radius="full" variant="soft" color="neutral">{{ forloop.counter }}</c-ui.badge>
                                    <span>{{ progress_step.label }}</span>
                                </c-ui.flex>
                            </c-ui.button>
                        {% elif progress_step.current %}
                            <c-ui.box padding_x="3" padding_y="2" aria-current="step">
                                <c-ui.flex as="span" gap="3" align="center">
                                    <c-ui.badge size="xs" radius="full" variant="soft" color="accent">{{ forloop.counter }}</c-ui.badge>
                                    <c-ui.heading as="h2" size="2" id="{{ id }}-heading" tabindex="-1">{{ progress_step.label }}</c-ui.heading>
                                </c-ui.flex>
                            </c-ui.box>
                        {% else %}
                            <c-ui.button type="button" :disabled="True" variant="ghost" color="neutral" size="sm">
                                <c-ui.flex as="span" gap="3" align="center">
                                    <c-ui.badge size="xs" radius="full" variant="soft" color="neutral">{{ forloop.counter }}</c-ui.badge>
                                    <span>{{ progress_step.label }}</span>
                                </c-ui.flex>
                            </c-ui.button>
                        {% endif %}
                        {% if not forloop.last %}<c-icons.chevron__right class="size-icon-xs shrink-0 text-surface-ink-muted" aria-hidden="true" />{% endif %}
                    {% endfor %}
                </c-ui.flex>
            </c-ui.frame.header>
            <c-ui.separator />
            <c-ui.frame.body padding="0" class="flex min-h-0 flex-1 overflow-hidden">
                <c-ui.box data-ui-import-flow-content layout="stack" gap="0" width="full" height="full" class="min-h-0 min-w-0 overflow-hidden">{{ slot }}</c-ui.box>
            </c-ui.frame.body>
            <c-ui.separator variant="subtle" />
            <c-ui.frame.footer padding_x="4" padding_y="3" gap="3" data-ui-import-flow-footer layout="row" align="center" justify="between">
                {% if show_restart|ui_bool %}<c-ui.button href="{{ restart_url }}" x-ui-request variant="ghost" color="neutral">Start over</c-ui.button>{% else %}<span></span>{% endif %}
                <c-ui.button type="submit" name="action" value="{{ submit_value }}" variant="solid" color="accent">{{ submit_label }}</c-ui.button>
            </c-ui.frame.footer>
        </c-ui.frame>
    </c-ui.action>
</section>