<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="ImportAction">
        <div t-ref="root" class="h-100 d-flex flex-column">
            <Layout className="'o_import_action d-flex h-100 overflow-auto'" display="display">
                <t t-set-slot="control-panel-create-button">
                    <t t-if="isPreviewing">
                        <t t-if="!state.isTested">
                            <button type="button" class="btn btn-primary" t-on-click="() => this.handleImport(true)">Test</button>
                            <button t-if="!state.isPaused" type="button" class="btn btn-secondary" t-on-click="() => this.handleImport(false)">Import</button>
                            <button t-else="" type="button" class="btn btn-secondary" t-on-click="() => this.handleImport(false)">Resume</button>
                        </t>
                        <t t-else="">
                            <button t-if="!state.isPaused" type="button" class="btn btn-primary" t-on-click="() => this.handleImport(false)">Import</button>
                            <button t-else="" type="button" class="btn btn-primary" t-on-click="() => this.handleImport(false)">Resume</button>
                            <button type="button" class="btn btn-secondary" t-on-click="() => this.handleImport(true)">Test</button>
                        </t>
                    </t>
                    <FileInput
                        acceptedFileExtensions="'.csv, .xls, .xlsx, .xlsm, .ods'"
                        onUpload.bind="(data, files) => this.handleFilesUpload(files)"
                        resId="model.id"
                        resModel="this.resModel"
                        route="this.uploadFilesRoute"
                    >
                        <button t-if="isPreviewing" type="button" class="btn btn-secondary">Load Data File</button>
                        <button t-else="" type="button" class="btn btn-primary o_import_file">Upload Data File</button>
                    </FileInput>
                    <button t-on-click="cancel" type="button" class="btn btn-secondary">Cancel</button>
                </t>
                <t t-if="isPreviewing">
                    <ImportDataSidepanel
                        filename="state.filename"
                        options="importOptions"
                        formattingOptions="formattingOptions"
                        importTemplates="importTemplates"
                        isBatched="isBatched"
                        onOptionChanged.bind="onOptionChanged"
                        onReload.bind="reload"
                        hasBinaryFields="hasBinaryFields"
                        binaryFilesParams="model.binaryFilesParams"
                        onBinaryFilesParamsChanged.bind="(name, value) => model.onBinaryFilesParamsChanged(name, value)"
                    />
                    <ImportDataContent
                        columns="model.columns"
                        onFieldChanged.bind="onFieldChanged"
                        onOptionChanged.bind="onOptionChanged"
                        options="importOptions"
                        isFieldSet.bind="isFieldSet"
                        previewError="state.previewError"
                        importMessages="model.importMessages"
                    />
                </t>
                <div t-else="" class="o_view_nocontent">
                    <div class="o_nocontent_help">
                        <p class="o_view_nocontent_smiling_face">
                            Drop or upload a file to import
                        </p>
                        <p>
                            Excel files are recommended as formatting is automatic.<br/>
                            But, you can also use .csv files
                        </p>
                        <div class="mt16 mb4">
                            Need Help? <DocumentationLink path="'/applications/general/export_import_data.html'" label.translate="Import FAQ"/>
                        </div>
                        <div t-foreach="importTemplates" t-as="template" t-key="template.template">
                            <a class="btn btn-outline-primary my8" t-att-href="template.template" aria-label="Download" data-tooltip="Download">
                                <i class="fa fa-download"/> <span><t t-esc="template.label"/></span>
                            </a>
                        </div>
                    </div>
                </div>
            </Layout>
        </div>
    </t>
</templates>
