<!-- 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>
