<div class="!mb-4 file-uploader-container">
    <label ng-show="labelText" class="!block !mb-1 !text-sm !font-medium !text-[#333E48]">{{ labelText }}</label>

    <div ng-show="description" class="!p-3 !border !rounded-md !bg-white !mb-2">
        <div class="!flex !items-start">
            <i class="dku-icon-info-circle-outline-16   !pr-2 !text-zinc-900 !font-normal !cursor-move"></i>
            <div>
                <p class=" !pt-0.5 !text-sm !text-zinc-900 !font-normal" style="white-space: pre-line">{{description}}</p>
            </div>
        </div>
    </div>

    <!-- Messages -->
    <div ng-show="clientErrorMessage" class="!mt-2 !text-sm !text-red-500">
        {{ clientErrorMessage }}
    </div>
    <div class="!flex !items-center !gap-4 !mb-1">
        <!-- Main Upload Area -->
        <div class="!flex-1 !p-4 !border-2 !rounded-lg !text-center drag-drop-area"
             ng-class="{
                 '!border-dashed': !clientErrorMessage,
                 '!border-gray-300': !isDragOver && !isUploading && !clientErrorMessage,
                 '!border-blue-500 !bg-blue-50': isDragOver && !isUploading,
                 '!cursor-not-allowed !opacity-75': isUploading,
                 '!border-red-500 !ring-1 !ring-red-500': clientErrorMessage
     }">

            <!-- File Input -->
            <input type="file"
                   style="display: none;"
                   accept="{{ acceptedMimeTypes || '*/*' }}"
                   ng-disabled="isUploading"
                   ng-attr-multiple="{{ uploadType === 'multiple-files' ? 'true' : undefined }}"
                   onchange="angular.element(this).scope().handleFileSelect(this.files)">

            <!-- Content Area -->
            <div ng-show="!isUploading">
                <button type="button"
                        class="!mr-2 !px-4 !py-2 !bg-gray-800 !text-white !rounded hover:!bg-gray-700"
                        ng-click="triggerFileInput()"
                        ng-disabled="isUploading">
                    <span ng-show="uploadType === 'multiple-files'">Select Multiple Files</span>
                    <span ng-show="uploadType !== 'multiple-files'">{{ buttonText }}</span>
                </button>
                <span class="!text-zinc-900 !font-normal">
                    <span ng-show="uploadType === 'multiple-files'">Drag multiple files here or</span>
                    <span ng-show="uploadType !== 'multiple-files'">or drag and drop</span>
                </span>
            </div>

            <!-- Upload Status -->
            <div ng-show="isUploading" class="!mt-2 !text-blue-600">
                <svg class="!animate-spin !h-5 !w-5 !inline-block" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                {{ uploadStatusMessage }}
            </div>

            <div ng-show="uploadStatusMessage && !isUploading"
                 class="!mt-2 !text-sm"
                 ng-class="{
                     '!text-red-500': !uploadSuccess,
                     '!text-green-600': uploadSuccess
                 }">
                {{ uploadStatusMessage }}
            </div>
        </div>
    </div>

    <div ng-show="uploadedFiles.length > 0" class="!mt-4 !p-2 !mb-5 !bg-white">
        <div ng-repeat="file in uploadedFiles track by $index"
             class="flex items-center justify-between border-b border-gray-200 last:border-b-0">
            <div class="flex items-center">
                <!-- File Icon (e.g., document icon) -->
                <div ng-show="shouldShowPreview"
                     class="!w-16 !h-16 !flex !pr-2 !items-center !justify-center !rounded !overflow-hidden">
                    <img ng-src="{{ previewSrc || defaultIconSrc }}"
                         alt="Preview"
                         class="!max-w-full !max-h-full">
                </div>
                <i ng-show="!shouldShowPreview"
                   class="dku-icon-file-16 !pr-2 !text-zinc-900 !font-normal !cursor-move"></i>
                <span class="text-sm text-zinc-900 !font-normal">{{ file.name }}</span>
            </div>

            <!-- Delete Icon -->
            <div class="!flex !items-center !py-3 !pr-3 !pl-2 !ml-auto">
                <!-- Tooltip wrapper -->
                <div class="!relative !inline-block">
                    <!-- Tooltip content - positioned to the right to avoid overflow -->
                    <div class="!absolute !bottom-full !right-0 !mb-2 !px-3 !py-2 !text-sm !font-medium !text-white !bg-gray-900 !rounded-md !whitespace-nowrap !z-50 !opacity-0 !pointer-events-none !transition-opacity !duration-200"
                         ng-class="{
                '!opacity-100': showDeleteTooltip,
                '!opacity-0': !showDeleteTooltip
             }">
                        <span ng-show="isUploading">Cannot delete file while uploading</span>
                        <span ng-show="!isUploading && config.custom_theme_name === 'Default_customization'">Cannot delete files from default theme</span>
                        <span ng-show="!isUploading && config.custom_theme_name !== 'Default_customization'">Delete file</span>
                        <!-- Tooltip arrow - positioned for right alignment -->
                        <div class="!absolute !top-full !right-4 !w-0 !h-0 !border-l-4 !border-r-4 !border-t-4 !border-transparent !border-t-gray-900"></div>
                    </div>

                    <!-- Button -->
                    <button type="button"
                            class="!font-normal focus:!outline-none"
                            ng-class="{
                    '!text-gray-400 !opacity-50 !cursor-not-allowed hover:!text-gray-400': isUploading || config.custom_theme_name === 'Default_customization',
                    '!text-zinc-900 hover:!text-red-600': !(isUploading || config.custom_theme_name === 'Default_customization')
                }"
                            ng-click="removeFile(file.name)"
                            ng-disabled="isUploading || config.custom_theme_name === 'Default_customization'"
                            ng-mouseenter="showDeleteTooltip = true"
                            ng-mouseleave="showDeleteTooltip = false">
                        <i class="dku-icon-trash-16 !h-5 !w-5"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>