<script type="text/x-handlebars-template" id="filePreviewTemplate">
    <div class="dz-preview bg-white dark:bg-surface-dark rounded-xl border border-gray-200 dark:border-gray-700 p-4 mb-3 transition-colors hover:border-gray-300 dark:hover:border-gray-600 group">
        <div class="flex items-center gap-4">
            <!-- Preview Image -->
            <div class="dz-preview-file shrink-0">
                <span class="preview block w-12 h-12 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 relative">
                    <img data-dz-thumbnail class="w-full h-full object-cover absolute inset-0"/>
                </span>
            </div>

            <!-- File Info -->
            <div class="dz-file-info flex-1 min-w-0">
                <p class="name text-sm font-medium text-text-main dark:text-white truncate" data-dz-name></p>
                <p class="size text-xs text-text-muted mt-0.5" data-dz-size></p>
                <strong class="error text-xs text-red-500 block mt-1" data-dz-errormessage></strong>
            </div>

            <!-- Actions -->
            <div class="dz-actions shrink-0 flex items-center gap-2">
                <a data-dz-remove class="cancel inline-flex items-center gap-1.5 px-3 py-1.5 bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 rounded-lg text-xs font-medium hover:bg-yellow-100 dark:hover:bg-yellow-900/40 transition-colors cursor-pointer">
                    <span class="material-symbols-outlined text-[16px]">cancel</span>
                    <span>{{ __('tickets.Cancel') }}</span>
                </a>
                <a data-dz-remove class="delete inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 rounded-lg text-xs font-medium hover:bg-red-100 dark:hover:bg-red-900/40 transition-colors cursor-pointer">
                    <span class="material-symbols-outlined text-[16px]">delete</span>
                    <span>{{ __('tickets.Delete') }}</span>
                </a>
            </div>
        </div>

        <!-- Progress Bar -->
        <div class="progress mt-3 w-full h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="progress-bar bg-primary h-full transition-all duration-300 rounded-full" style="width:0%;" data-dz-uploadprogress></div>
        </div>
    </div>
</script>
<div class="previews-ctn"></div>
