<!-- Modal -->
<div class="modal fade" id="addFolderModal" tabindex="-1" aria-labelledby="addFolderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addFolderModalLabel">Folder</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" placeholder="Enter your folder name" class="form-control folderNewName">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-id="" class="btn btn-primary createNewFolder w-100">Create</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="fileUploadModal" tabindex="-1" aria-labelledby="fileUploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fileUploadModalLabel">Upload Files</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="dropZone">
                    <input type="file" multiple id="fileDropRef">
                    <i class="fa-solid fa-cloud-arrow-up"></i>
                    <h3>Drag and drop file here</h3>
                    <h3>OR</h3>
                    <label for="fileDropRef">Browse Files</label>
                </div>

                <div class="files-list"></div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-danger clearUploadFiles" disabled>Clear All Files</button>
                <button type="button" class="btn btn-primary startUploadFiles" disabled>Start Upload</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="previewFileModal" tabindex="-1" aria-labelledby="previewFileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewFileModalLabel">Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0"></div>
        </div>
    </div>
</div>

<div class="modal fade" id="infoFileModal" tabindex="-1" aria-labelledby="infoFileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="infoFileModalLabel">Information</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <table class="table table-striped table-bordered mb-0">
                    <tr>
                        <td>Name</td>
                        <td class="fileName"></td>
                    </tr>
                    <tr class="dimensions">
                        <td>Dimensions</td>
                        <td class="fileDimensions"></td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td class="fileSize"></td>
                    </tr>
                    <tr>
                        <td>URL</td>
                        <td class="fileURL"></td>
                    </tr>
                    <tr>
                        <td>Path</td>
                        <td class="filePath"></td>
                    </tr>
                    <tr>
                        <td>Created Date</td>
                        <td class="fileCreated"></td>
                    </tr>
                    <tr>
                        <td>Modified Date</td>
                        <td class="fileModified"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showFileModal" tabindex="-1" aria-labelledby="showFileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="showFileModalLabel">File URL</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" style="padding:13px;" placeholder="https://">
                </div>

                <a href="#" class="btn btn-primary w-100 mt-2" target="_blank">Open File</a>
            </div>
        </div>
    </div>
</div>

<div class="spinner full show">
    <i class="fa-spin fas fa-spinner"></i>
</div>

<div class="dropdown-menu position-fixed context_menu">
    <button class="dropdown-item open" type="button"><i class="fa-solid fa-folder me-1"></i> Open</button>
    <button class="dropdown-item createFolder" type="button"><i class="fa-solid fa-folder-plus me-1"></i> Create
        Sub-Folder
    </button>
    <button class="dropdown-item rename" type="button"><i class="fa-solid fa-pen-to-square me-1"></i> Rename</button>
    <div class="dropdown-divider filedivider"></div>
    <button class="dropdown-item download" type="button"><i class="fa-solid fa-arrow-down me-1"></i> Download</button>
    <button class="dropdown-item showURL" type="button"><i class="fa-solid fa-link me-1"></i> Show URL</button>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item info" type="button"><i class="fa-solid fa-info-circle me-1"></i> Info</button>
    <button class="dropdown-item delete" type="button"><i class="fa-solid fa-trash me-1"></i> Delete</button>
</div>


<div class="file_uloading_corner_notification">
    <div class="files-list">
        <div class="single-file">
            <div class="fileIcon"><i class="fa-solid fa-file-lines"></i></div>
            <div class="info">
                <div class="d-flex justify-content-between align-items-center w-100 mb-1">
                    <h4 class="name">hrlink-logo.png</h4>
                    <p class="size">1/2</p>
                </div>

                <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 0%;"
                         aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="body_dragging">
    <div class="drop_text">Drop files to upload</div>
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Information</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>FileHub is a Django-based file management app that simplifies file handling within your Django projects. It supports file uploads, storage, and retrieval, making it easy to integrate robust file management features into your applications.</p>

                <ul></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
