{% partialdef import-flow inline %}
<c-ui.import-flow id="{{ outlet_id }}" session="{{ capability }}" step="{{ step }}"
                  revision="{{ import_session.revision }}" :progress_steps="progress_steps"
                  restart_url="{{ restart_url }}" submit_value="{{ step_actions.submit_value }}"
                  submit_label="{{ step_actions.submit_label }}"
                  :show_restart="step_actions.show_restart">
    <input type="hidden" name="selected_field" value="{{ selected_field }}">
    <c-ui.panels id="{{ outlet_id }}-review" :divider="True" data-ui-import-review-panels>
        <c-ui.panel id="{{ outlet_id }}-review-fields" size="3">
            <c-ui.frame height="full">
                <c-ui.frame.header padding_x="3" layout="row" align="center" class="h-10">
                    <c-ui.text size="1" weight="medium" color="muted">Columns</c-ui.text>
                </c-ui.frame.header>
                <c-ui.separator variant="subtle"/>
                <c-ui.frame.body padding="0" scroll>
                    <c-ui.stack gap="1" padding="3">
                        {% for item in review_fields %}
                            <c-component is="{{ review_field_component|default:'ui.import-review.field' }}"
                                         :item="item"
                                         selected_field="{{ selected_field }}"
                                         restart_url="{{ restart_url }}"
                                         capability="{{ capability }}" />
                        {% endfor %}
                    </c-ui.stack>
                </c-ui.frame.body>
            </c-ui.frame>
        </c-ui.panel>
        <c-ui.panel id="{{ outlet_id }}-review-values" size="fill">
            <c-ui.frame height="full">
                <c-ui.frame.header padding_x="4" layout="row" align="center" class="h-10">
                    <c-ui.grid data-ui-import-review-columns gap="3" align="center" width="full">
                        <c-ui.text size="1" weight="medium" color="muted">Raw value</c-ui.text>
                        <span></span>
                        <c-ui.text size="1" weight="medium" color="muted">Mapped value</c-ui.text>
                    </c-ui.grid>
                </c-ui.frame.header>
                <c-ui.separator variant="subtle"/>
                <c-ui.frame.body padding="0" class="flex min-h-0 flex-1 overflow-hidden">
                    {% if selected_field %}
                    <c-ui.virtualizer fetch_url="{{ review_url }}&field={{ selected_field|urlencode }}"
                                      cursor total_items="0" item_size="65"/>
                    {% else %}
                    <c-ui.box layout="stack" gap="2" padding="4">
                        <c-ui.text color="muted">There are no mapped columns to review.</c-ui.text>
                    </c-ui.box>
                    {% endif %}
                    {% if review_error %}
                    <c-ui.box padding="4"><c-ui.text color="danger">{{ review_error }}</c-ui.text></c-ui.box>
                    {% endif %}
                </c-ui.frame.body>
            </c-ui.frame>
        </c-ui.panel>
    </c-ui.panels>
</c-ui.import-flow>
{% endpartialdef %}