{% 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">
    <c-ui.import-mapper>
        {{ mapping_formset.non_form_errors }}
        {% if mapping_error %}{{ mapping_error }}{% endif %}
        {% if action_error %}<c-ui.text color="danger">This action is not available for the current step.</c-ui.text>{% endif %}
        <c-ui.panels id="{{ outlet_id }}-mapping" :divider="True">
            <c-ui.panel id="{{ outlet_id }}-columns" size="fill">
                <c-ui.scroll-area fill>
                    <c-ui.container size="5xl" width="full">
                    <c-ui.formset :formset="mapping_formset" focus="[data-ui-import-mapping-source]"
                                  class="flex min-h-0 flex-col gap-3">
                        <c-slot name="empty">
                            <c-ui.formset.item as="tr" interactive :form="mapping_formset.empty_form"
                                               x-bind:data-current="activeSource === ($el.querySelector('[data-ui-import-mapping-source]')?.dataset.value ?? '')"
                                               x-on:pointerenter="selectSource($el.querySelector('[data-ui-import-mapping-source]')?.dataset.value ?? '')"
                                               x-on:focusin="selectSource($el.querySelector('[data-ui-import-mapping-source]')?.dataset.value ?? '')">
                                <c-component is="{{ mapping_row_component|default:'ui.import-mapper.row' }}"
                                             :form="mapping_formset.empty_form"
                                             :source_schema="source_schema"
                                             :target_schema="target_schema"
                                             source_component="{{ mapping_source_component|default:'ui.import-mapper.source' }}"
                                             target_component="{{ mapping_target_component|default:'ui.import-mapper.target' }}" />
                            </c-ui.formset.item>
                        </c-slot>
                        <c-slot name="container">
                            <c-ui.table layout="fixed" density="comfortable" border="row" sticky_header>
                                <c-ui.table.header>
                                    <c-ui.table.row>
                                        <c-ui.table.column>Source column</c-ui.table.column>
                                        <c-ui.table.column width="3rem"><span class="sr-only">Direction</span></c-ui.table.column>
                                        <c-ui.table.column>Target field</c-ui.table.column>
                                        <c-ui.table.column width="3rem"><span class="sr-only">Actions</span></c-ui.table.column>
                                    </c-ui.table.row>
                                </c-ui.table.header>
                                <c-ui.table.body data-ui-formset-container>
                                    {% for form in mapping_formset %}
                                        <c-ui.formset.item as="tr" interactive :form="form"
                                                           x-bind:data-current="activeSource === ($el.querySelector('[data-ui-import-mapping-source]')?.dataset.value ?? '')"
                                                           x-on:pointerenter="selectSource($el.querySelector('[data-ui-import-mapping-source]')?.dataset.value ?? '')"
                                                           x-on:focusin="selectSource($el.querySelector('[data-ui-import-mapping-source]')?.dataset.value ?? '')">
                                            <c-component is="{{ mapping_row_component|default:'ui.import-mapper.row' }}"
                                                         :form="form"
                                                         :source_schema="source_schema"
                                                         :target_schema="target_schema"
                                                         source_component="{{ mapping_source_component|default:'ui.import-mapper.source' }}"
                                                         target_component="{{ mapping_target_component|default:'ui.import-mapper.target' }}" />
                                        </c-ui.formset.item>
                                    {% endfor %}
                                </c-ui.table.body>
                            </c-ui.table>
                        </c-slot>
                        <c-slot name="add">
                            <c-ui.box padding_x="4" padding_y="3">
                                <c-ui.button size="sm" type="button" x-show="canAdd" icon="add" x-on:click="add()">Add column</c-ui.button>
                            </c-ui.box>
                        </c-slot>
                    </c-ui.formset>
                    </c-ui.container>
                </c-ui.scroll-area>
            </c-ui.panel>
            <c-ui.panel id="{{ outlet_id }}-sample" size="5">
                {% for preview in source_previews %}
                    <c-ui.box data-ui-import-mapping-preview="{{ preview.field.key }}"
                              width="full" height="full"
                              x-show="activeSource === '{{ preview.field.key|escapejs }}'">
                        <c-component is="{{ mapping_preview_component|default:'ui.import-mapper.preview' }}"
                                     :field="preview.field"
                                     :samples="preview.samples" />
                    </c-ui.box>
                {% empty %}
                    <c-ui.box layout="stack" gap="2" padding="4" surface="+1" width="full" height="full">
                        <c-ui.text color="muted">No sample values supplied.</c-ui.text>
                    </c-ui.box>
                {% endfor %}
            </c-ui.panel>
        </c-ui.panels>
    </c-ui.import-mapper>
</c-ui.import-flow>
{% endpartialdef %}