<!-- single item -->
                                <div>
                                    <p class="form-label">Upload Input</p>
                                    <label for="file-1" class="file-container md:p-6 p-4 cursor-pointer rounded-lg border border-input-border dark:border-dark-border block">
                                        <div class="flex-center-between">
                                            <div class="flex items-center md:gap-4 gap-3">
                                                <span class="shrink-0"><img src="assets/images/icons/zip-file.svg" alt=""></span>
                                                <div>
                                                    <input type="file" id="file-1" hidden class="file-src">
                                                    <span class="file-name mb-3 font-semibold text-gray-500 dark:text-dark-text">Design-UI-Kit.zip</span>
                                                    <p class="flex gap-2 items-center text-sm text-gray-900 dark:text-dark-text-two"><span>23.7 mb</span> | <span>67%</span> <span class="size-1 rounded-full bg-[#7D7D7D]"></span> <span>8 sec left</span></p>
                                                </div>
                                            </div>
                                            <button class="text-gray-900 dark:text-dark-text hover:text-danger duration-200"><i class="ri-delete-bin-6-line text-inherit text-2xl"></i></button>
                                        </div>
                                        <div class="w-full h-1.5 rounded-full bg-[#E2E2E2] dark:bg-progress-bar-bg-dark md:mt-8 mt-6">
                                            <span class="w-[67%] h-full bg-primary-500 rounded-full block"></span>
                                        </div>
                                    </label>
                                </div>
                                <!-- single item -->
                                <div>
                                    <p class="form-label">Upload Input</p>
                                    <label for="file-2" class="file-container md:p-6 p-4 cursor-pointer rounded-lg border border-input-border dark:border-dark-border block">
                                        <div class="flex-center-between">
                                            <div class="flex items-center md:gap-4 gap-3">
                                                <span class="shrink-0"><img src="assets/images/icons/zip-file.svg" alt=""></span>
                                                <div>
                                                    <input type="file" id="file-2" hidden class="file-src">
                                                    <span class="file-name mb-3 font-semibold text-gray-500 dark:text-dark-text">Design-UI-Kit.zip</span>
                                                    <p class="flex gap-2 items-center text-sm text-danger">Upload failed</p>
                                                </div>
                                            </div>
                                            <button class="text-gray-900 dark:text-dark-text hover:text-danger duration-200"><i class="ri-delete-bin-6-line text-inherit text-2xl"></i></button>
                                        </div>
                                    </label>
                                </div>
                                <!-- single item -->
                                <div>
                                    <p class="form-label">Upload Input</p>
                                    <label for="file-3" class="file-container md:p-6 p-4 cursor-pointer rounded-lg border border-input-border dark:border-dark-border block">
                                        <div class="flex-center-between">
                                            <div class="flex items-center md:gap-4 gap-3">
                                                <span class="shrink-0"><img src="assets/images/icons/zip-file.svg" alt=""></span>
                                                <div>
                                                    <input type="file" id="file-3" hidden class="file-src">
                                                    <span class="file-name mb-3 font-semibold text-gray-500 dark:text-dark-text">Design-UI-Kit.zip</span>
                                                    <p class="flex gap-2 items-center text-sm text-success">Upload failed</p>
                                                </div>
                                            </div>
                                            <span class="text-success duration-200"><i class="ri-checkbox-circle-fill text-inherit text-2xl"></i></span>
                                        </div>
                                    </label>
                                </div>
                            
                        

                            
                                <!-- single item -->
                                <div>
                                    <p class="form-label">File Input</p>
                                    <label id="file-4" class="file-container file-input-label bg-[#F8F8FC] dark:bg-dark-card-two text-[#727175] dark:text-dark-text">
                                        <span class="px-3 hover:bg-primary-200 dark:hover:bg-dark-icon rounded-lg rounded-r-none border-r border-input-border dark:border-dark-border flex-center before:font-remix before:text-xl text-sm duration-200">
                                            Choose File
                                        </span>
                                        <div class="p-2.5">
                                            <input type="file" id="file-4" class="hidden file-src" required/>
                                            <span class="file-name text-sm">No file choose</span>
                                        </div>
                                    </label>
                                </div>
                                <!-- single item -->
                                <div>
                                    <p class="form-label">File Input</p>
                                    <label id="file-5" class="file-container file-input-label bg-[#F8F8FC] dark:bg-dark-card-two text-[#727175] dark:text-dark-text">
                                        <span class="px-3 hover:bg-primary-200 dark:hover:bg-dark-icon rounded-lg rounded-r-none border-r border-input-border dark:border-dark-border flex-center before:font-remix before:text-xl text-sm before:content-['\f24e']"></span>
                                        <div class="p-2.5">
                                            <input type="file" id="file-5" class="hidden file-src" required/>
                                            <span class="file-name text-sm">No file choose</span>
                                        </div>
                                    </label>
                                </div>
                                <!-- single item -->
                                <div>
                                    <label for="input_url" class="block mb-3 font-medium text-gray-500 dark:text-dark-text leading-none">Demo Video URL</label>
                                    <div class="flex">
                                        <span class="form-input-group input-icon !text-[#727175] dark:text-dark-text bg-[#F8F8FC] dark:bg-dark-card-two">
                                            <i class="ri-folder-video-line text-inherit"></i>
                                        </span>
                                    <input type="url" id="input_url" class="form-input rounded-l-none bg-[#F8F8FC] dark:bg-dark-card-two" placeholder="http://example.com" required />
                                    </div>
                                </div>
                            
                        

                            
                                <!-- single item -->
                                <div class="col-span-full sm:col-span-4">
                                    <p class="form-label">Thumbnail (400x250)</p>
                                    <label for="thumbnail" class="file-container ac-bg text-xs leading-none font-semibold mb-3 cursor-pointer aspect-[4/1.5] flex flex-col items-center justify-center gap-2.5 dk-border-one border-dashed rounded-10">
                                        <input type="file" id="thumbnail" hidden class="img-src peer/file" multiple="true">
                                        <span class="flex-center flex-col peer-[.uploaded]/file:hidden">
                                            <img src="assets/images/icons/upload-file.svg" alt="file-icon" class="size-8 lg:size-auto">
                                            <div class="mt-2">Choose file</div>
                                        </span>
                                    </label>
                                </div>
                                <!-- single item -->
                                <div class="col-span-full sm:col-span-4">
                                    <p class="form-label">Main course file</p>
                                    <label for="file-6" class="file-container text-xs leading-none font-semibold mb-3 cursor-pointer aspect-[4/1.5] flex flex-col items-center justify-center gap-2.5 dk-border-one border-dashed rounded-10">
                                        <input type="file" id="file-6" hidden class="peer/file file-src">
                                        <span class="flex-center flex-col">
                                            <img src="assets/images/icons/upload-file.svg" alt="file-icon" class="size-8 lg:size-auto">
                                            <div class="file-name mt-2">Choose file</div>
                                        </span>
                                    </label>
                                </div>
                                <!-- single item -->
                                <div class="col-span-full sm:col-span-4">
                                    <p class="form-label">Main course file</p>
                                    <label for="drag-drop" class="file-container text-xs leading-none font-semibold mb-3 cursor-pointer aspect-[4/2] flex flex-col items-center justify-center gap-2.5 dk-border-one border-dashed rounded-10">
                                        <input type="file" id="drag-drop" hidden class="peer/file file-src">
                                        <span class="flex-center flex-col">
                                            <img src="assets/images/icons/upload-file.svg" alt="file-icon" class="size-8 lg:size-auto">
                                            <div class="file-name mt-2 text-xl font-semibold text-gray-500 dark:text-dark-text">Drag and drop a file here or</div>
                                            <label for="drag-drop" class="cursor-pointer text-sm text-primary-500 before:text-lg font-spline_sans before:font-remix before:pr-px before:content-['\f24e'] btn b-outline btn-primary-outline py-2.5 px-[18px] mt-4">Click to upload</label>
                                            <span class="text-sm text-gray-900 dark:text-dark-text-two mt-2">Maximus file size is 13 MB</span>
                                        </span>
                                    </label>
                                </div>