<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container my-5">
        {{#if @options.isProcessing}}
            <div
                class="min-h-56 dropzone w-full rounded px-4 py-8 min-h text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
            >
                <div class="flex items-center justify-center py-5">
                    <Spinner class="text-sm dark:text-gray-100" @loadingMessage={{t "storefront.component.modals.import-products.uploading-message"}} />
                </div>
            </div>
        {{else}}
            <FileDropzone
                @name="spreadsheets"
                @multiple={{true}}
                @onFileAdded={{@options.queueFile}}
                @accept={{join "," @options.acceptedFileTypes}}
                class="min-h-56 dropzone w-full rounded px-4 py-8 min-h text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
                as |dropzone queue|
            >
                {{#if dropzone.active}}
                    {{#if dropzone.valid}}
                        {{t "storefront.component.modals.import-products.drop-upload"}}
                    {{else}}
                        {{t "storefront.common.invalid"}}
                    {{/if}}
                {{else if queue.files.length}}
                    <div class="my-2">
                        <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" />
                        {{pluralize queue.files.length "spreadsheet"}}
                        {{t "storefront.component.modals.import-products.ready-upload"}}
                    </div>
                    <div class="my-2">({{queue.progress}}%)</div>
                {{else}}
                    <h4 class="font-semibold mb-8">
                        <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" />
                        {{t "storefront.component.modals.import-products.upload-spreadsheets"}}
                    </h4>
                    <div>
                        {{#if dropzone.supported}}
                            <p class="text-base font-semibold my-5">{{t "storefront.component.modals.import-products.drag-drop"}}</p>
                        {{/if}}

                        <FileUpload @name="spreadsheets" @for="spreadsheets" @accept={{join "," @options.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{@options.queueFile}}>
                            <a tabindex="0" class="btn btn-magic cursor-pointer ml-1 hover:text-white">{{t "storefront.component.modals.import-products.select-spreadsheets"}}</a>
                        </FileUpload>
                    </div>
                {{/if}}
            </FileDropzone>

            {{#if @options.uploadQueue}}
                <div class="my-6">
                    <div class="mb-2">
                        <span class="text-sm leading-5 text-gray-500 dark:text-white">{{t "storefront.component.modals.import-products.upload-queue"}}</span>
                    </div>

                    <div class="table-wrapper">
                        <table class="table">
                            <thead>
                                <tr>
                                    {{#each @options.fileQueueColumns as |column|}}
                                        <th>{{column.name}}</th>
                                    {{/each}}
                                </tr>
                            </thead>
                            <tbody>
                                {{#each @options.uploadQueue as |file|}}
                                    <tr>
                                        {{#each @options.fileQueueColumns as |column|}}
                                            <td>
                                                {{#if (eq column.key "delete")}}
                                                    <a href="javascript:;" {{on "click" (fn @options.removeFile file)}}>
                                                        <FaIcon @icon="trash" class="text-red-500" />
                                                    </a>
                                                {{else if (eq column.key "type")}}
                                                    <FileIcon @file={{file}} />
                                                {{else if (eq column.key "fileSize")}}
                                                    {{format-bytes (get file column.valuePath)}}
                                                {{else if (eq column.key "uploadDate")}}
                                                    {{moment-format (get file column.valuePath) "DD MMM YYYY"}}
                                                {{else}}
                                                    <span class="w-11/12 truncate d-block">{{get file column.valuePath}}</span>
                                                {{/if}}
                                            </td>
                                        {{/each}}
                                    </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="mt-6">
                    <div class="mb-2">
                        <p class="text-sm leading-5 text-gray-500 dark:text-white">
                            {{t "storefront.component.modals.import-products.optionally-select-category"}}
                        </p>
                    </div>
                    <InputGroup @wrapperClass="mb-0" @name={{t "storefront.component.modals.import-products.select-category"}}>
                        <ModelSelect
                            @modelName="category"
                            @query={{hash for="storefront_product" owner_uuid=@options.store.id}}
                            @selectedModel={{@options.selectedCategory}}
                            @placeholder={{t "storefront.component.modals.import-products.select-category"}}
                            @triggerClass="form-select form-input"
                            @infiniteScroll={{false}}
                            @renderInPlace={{true}}
                            @onChange={{fn (mut @options.selectedCategory)}}
                            as |model|
                        >
                            {{model.name}}
                        </ModelSelect>
                    </InputGroup>
                </div>
            {{/if}}
        {{/if}}
    </div>
</Modal::Default>