<ContentPanel @title="Documents" @open={{true}} @wrapperClass="bordered-top">
    <div class="space-y-3">
        {{#if this.queueFile.isRunning}}
            <div
                class="dropzone w-full rounded-lg px-4 py-8 bg-gray-50 dark:bg-gray-900 bg-opacity-25 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="Uploading..." />
                </div>
            </div>
        {{else}}
            {{#let (file-queue name="customer-portal-order-detail-files" onFileAdded=(perform this.queueFile) accept=(join "," this.acceptedFileTypes)) as |queue|}}
                <FileDropzone @queue={{queue}} class="dropzone file-dropzone" as |dropzone|>
                    {{#if dropzone.active}}
                        {{#if dropzone.valid}}
                            Drop files to attach them.
                        {{else}}
                            This file type is not supported.
                        {{/if}}
                    {{else if queue.files.length}}
                        <div class="my-2">
                            <FaIcon @icon="folder-open" class="text-indigo-500 mr-2" />
                            {{pluralize queue.files.length "file"}}
                            ready to upload
                        </div>
                        <div class="my-2">({{queue.progress}}%)</div>
                    {{else}}
                        <h4 class="font-semibold">
                            <FaIcon @icon="folder-open" @size="lg" class="text-indigo-500 mr-2" />
                            Upload documents
                        </h4>
                        <div>
                            {{#if dropzone.supported}}
                                <p class="text-sm my-5">Drop files here to add labels, receipts, delivery documents, or supporting files to this order.</p>
                            {{/if}}
                            <FileUpload
                                @name="customer-portal-order-detail-files"
                                @for="customer-portal-order-detail-files"
                                @accept={{join "," this.acceptedFileTypes}}
                                @multiple={{true}}
                                @onFileAdded={{perform this.queueFile}}
                            >
                                <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">Select files</a>
                            </FileUpload>
                        </div>
                    {{/if}}
                </FileDropzone>
            {{/let}}
        {{/if}}

        {{#if this.uploadQueue}}
            <div class="mx-0.5">
                <div class="flex items-center justify-between">
                    <span class="leading-6 text-sm font-semibold dark:text-gray-100">Upload queue</span>
                </div>
                <div class="space-y-2 mb-2">
                    {{#each this.uploadQueue as |file|}}
                        <div class="flex items-center justify-between bg-blue-100 border border-blue-800 dark:border-blue-800 py-1.5 shadow-sm rounded-lg px-4">
                            <div class="text-xs text-blue-900 truncate">{{truncate-filename file.name 50}}</div>
                            <div class="flex items-center text-sm">
                                <Spinner class="text-blue-900 mr-2" />
                                <span class="font-bold text-blue-900">{{round file.progress}}%</span>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/if}}

        {{#if this.files.length}}
            <div class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
                {{#each this.files as |file|}}
                    <File @file={{file}} @onDownload={{this.downloadFile}} @onDelete={{perform this.deleteFile}} />
                {{/each}}
            </div>
        {{else}}
            <div class="min-h-24">
                <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
                    <div class="text-center">
                        <FaIcon @icon="folder-open" @size="2x" class="text-gray-400 mb-2" />
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">No documents yet</div>
                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">Labels, receipts, and order files will show up here when available.</div>
                    </div>
                </div>
            </div>
        {{/if}}
    </div>
</ContentPanel>
