<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 "component.import-modal.loading-message"}} />
                </div>
            </div>
        {{else}}
            {{#let (file-queue name="spreadsheets" onFileAdded=this.queueFile accept=(join "," @options.acceptedFileTypes)) as |queue|}}
                <FileDropzone
                    @queue={{queue}}
                    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|
                >
                    {{#if dropzone.active}}
                        {{#if dropzone.valid}}
                            {{t "component.import-modal.drop-upload"}}
                        {{else}}
                            {{t "component.import-modal.invalid"}}
                        {{/if}}
                    {{else if queue.files.length}}
                        <div class="my-2">
                            <FaIcon @icon="file-import" class="text-indigo-500 mr-2" />
                            {{pluralize queue.files.length "spreadsheet"}}
                            {{t "component.import-modal.ready-upload"}}
                        </div>
                        <div class="my-2">({{queue.progress}}%)</div>
                    {{else}}
                        <h4 class="font-semibold mb-8">
                            <FaIcon @icon="file-import" class="text-indigo-500 mr-2" />
                            {{t "component.import-modal.upload-spreadsheets"}}
                        </h4>
                        <div>
                            {{#if dropzone.supported}}
                                <p class="text-base font-semibold my-5">{{t "component.import-modal.drag-drop"}}</p>
                            {{/if}}

                            <UploadButton
                                @buttonText={{t "component.import-modal.button-text"}}
                                @type="magic"
                                @icon="file-import"
                                @name={{t "component.import-modal.spreadsheets"}}
                                @for="spreadsheets"
                                @accept={{join "," @options.acceptedFileTypes}}
                                @multiple={{true}}
                                @onFileAdded={{@options.queueFile}}
                                class="w-72 justify-center"
                            />
                        </div>
                    {{/if}}
                </FileDropzone>
            {{/let}}

            {{#if @options.uploadQueue}}
                <div class="mx-0 my-6">
                    <div class="flex items-center justify-between mb-4">
                        <span class="leading-6 dark:text-gray-100">{{t "component.import-modal.upload-queue"}}</span>
                    </div>

                    <div class="table-wrapper table-fluid">
                        <table class="table table-fixed">
                            <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")}}
                                                    {{format-date (get file column.valuePath) "d MMM yyyy"}}
                                                {{else}}
                                                    <div class="min-w-225px max-w-225px truncate">{{get file column.valuePath}}</div>
                                                {{/if}}
                                            </td>
                                        {{/each}}
                                    </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            {{/if}}
        {{/if}}

    </div>
</Modal::Default>