<div class="files">
    <h1>Gestionnaire de fichiers</h1>
    </br>
    <div class="homepanel">
        <div class="row w-100">
            <div class="hbox col-lg">
                <div class="fi_act">
                    <h1><i class="fa fa-folder"></i> Fichiers</h1>
                    <div>
                        <button id="fi_new_folder" class="fi_act_btn"><i class="fa fa-folder"></i> Nouveau dossier</button>
                        <input id='fi_upload_file' type='file' hidden multiple />
                        <button id="fi_upload" class="fi_act_btn"><i class="fa fa-upload"></i> Upload</button>
                    </div>
                </div>
                <div class="fi_current_directory">
                    <input id="fi_current_directory" class="fi_current_p" value="/" type="text">
                </div>  
                <p id="fi_info" style="text-align: start; color: rgb(255, 48, 48);"></p>
                <div id="fileExplorer" class="fi_container">
                    <p style="text-align: start; color: rgb(255, 48, 48);">Le répertoire n'existe pas ou est vide.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="fi_dialog_input">

</div>

<dialog class="fi_addfolder" id="fi_new_folder_dialog">
    <h1><i class="fa fa-folder"></i> Créer un dossier</h1>
        <p>Nom du dossier :</p>
        <input class="inp" id="fi_add_name" type="text">
        <div style="color: rgb(255, 76, 76);" id="fi_folder_info"></div>
    </div>
    <button id="fi_add_close" class="fi_add_close">Annuler</button>
    <button id="fi_add_confirm" class="fi_add_confirm">Ajouter</button>
</dialog>


<script>
    
    if(typeof currentDir == "undefined") {

        const currentDir = document.getElementById("fi_current_directory")
        const fileExplorer = document.getElementById("fileExplorer")
        const fileExplorerError = '<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>' + fileExplorer.outerHTML
        const fiInfo = document.getElementById("fi_info")

        getDirectory(currentDir.value)

        const newFolderBtn = document.getElementById("fi_new_folder")
        const newFolderDialog = document.getElementById("fi_new_folder_dialog")
        const newFolderConfirm = document.getElementById("fi_add_confirm")
        const newFolderName = document.getElementById("fi_add_name")
        const newFolderInfo = document.getElementById("fi_folder_info")
        const dialogInput = document.getElementById("fi_dialog_input")
        

        const newFolderClose = document.getElementById("fi_add_close")

        newFolderClose.addEventListener("click", () => {

            newFolderDialog.close()
            getDirectory(currentDir.value)
        })



        newFolderBtn.addEventListener("click", () => {

            newFolderDialog.showModal()
            newFolderName.value = ""
            newFolderInfo.value = ""

        })

        newFolderConfirm.addEventListener("click", () => {

            const folderDir = currentDir + newFolderName.value
            newFolderInfo.value = ""
            var wrongName = true
            var justspace = false

            const refusedChar = ['\\','/' ,':' ,'*','?' ,'"','<','>','|']

            for(var char of refusedChar) {

                if(newFolderName.value.includes(char)) {
                    wrongName = false

                } 
            }

            for (var i = 0; i < newFolderName.value.length; i++) {
                var char = newFolderName.value.charAt(i)

                if(char != " ") {

                    justspace = true
                }
         
            }
            
            
            if(wrongName == false) {

                newFolderInfo.innerHTML =  "<p>Le nom du dossier est invalide car il contient des caractères interdits !</p>"
                
            } else if(justspace == false) {

                newFolderInfo.innerHTML = "<p>Le nom du dossier ne peut être vide !</p>"

            } else {

                fetch('/filemanager', {
                method: 'POST',
                redirect: 'follow',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({"request":"addfolder", "value": newFolderName.value, "currentDir" : currentDir.value})
                })
                .then(response => response.json())
                .then(response => res(response))

                function res(response) {
                    if(response.result == "failed") {
                        content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                        console.log("FAILED")
                    
                    } else if(response.result == "success") {

                            if(response.content == "ERROR_ALREADY_EXIST") {
                                newFolderInfo.innerHTML = "<p>Le nom du dossier est déjà existant !</p>"


                            } else if(response.content == "ERROR_NOT_MAKEABLE") {
                                newFolderInfo.innerHTML = "<p>Vous n'avez pas la permission !</p>"


                            } else {

                                newFolderDialog.close()
                                getDirectory(currentDir.value)
                            }
                        
                    }

                 }
            }

        })

        const uploadBtn = document.getElementById("fi_upload")
        const uploadFiles = document.getElementById("fi_upload_file")
        

        uploadBtn.addEventListener("click", () => {

            uploadFiles.click()

        })

        uploadFiles.addEventListener("change", () => {

            var stopSend = false
            fiInfo.innerHTML = ""

            for(var file of uploadFiles.files) {

               

                if(stopSend == false) {
                    const file_acc = new FormData();
                    file_acc.append("apic", file)
                                                            
                fetch('/upload', {
                    method: 'POST',
                    mode:"cors",
                    cache:"no-cache",
                    credentials:"same-origin",
                    headers: {
                        "uploadfiledirectory": currentDir.value

                    },
                    referrerPolicy:"no-referrer",
                    redirect: 'follow',
                    body: file_acc
                }).then(response => response.json())
                .then(response => resupload(response))

                function resupload(response) {


                    if(response.result == "ERROR") {
                        fiInfo.innerHTML = "Les fichiers n'ont pas pu être uploadés !"
                        stopSend = true
                    
                    } else {

                        getDirectory(currentDir.value)
                    }

                    }

                } 
                

                

                
            }

            uploadFiles.value = null
        

           
            

            
        })

        currentDir.addEventListener("change", () => {

            getDirectory(currentDir.value)

        })

        function getDirectory(directory) {

            fiInfo.innerHTML = ""

            var fileExplorerList = new Array()
            var dialogExlorerList = new Array()

            fetch('/filemanager', {
                method: 'POST',
                redirect: 'follow',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({"request":"get", "value": directory})
            })
            .then(response => response.json())
            .then(response => showLink(response))

            function showLink(response) {

               
              
                const files = response.content

                console.log(files)
              
                
                if(response.result == "failed") {
                        fileExplorerList.push('<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>')
                        content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                        console.log("FAILED")
                    
                } else if(response.result == "success") {

                        if(response.content == "ERROR_NOT_EXIST") {
                            
                            fileExplorer.innerHTML = fileExplorerError
                            const last_dir = document.getElementById("last_directory")

                            last_dir.addEventListener("click", () => {

                                var cdSplit = currentDir.value.split("/")

                                if(cdSplit.slice(-1) == "") {

                                    cdSplit.pop()
                                    cdSplit.pop()

                                } else {
                                    cdSplit.pop()


                                }

                               
                                currentDir.value = cdSplit.join("/")

                                if(currentDir.value == "") {
                                    currentDir.value = "/"
                                }

                                getDirectory(currentDir.value)

                              
                            })
                            console.log("DENY")

                        } else if(response.content == "ERROR_NOT_PERMITTED") {
                            
                            fileExplorer.innerHTML = '<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>' +'<p style="text-align: start; padding: 1vw; color: rgb(255, 48, 48);">Vous n\'avez pas la permission de regarder ce dossier.</p>'
                            const last_dir = document.getElementById("last_directory")

                            last_dir.addEventListener("click", () => {

                                var cdSplit = currentDir.value.split("/")

                                if(cdSplit.slice(-1) == "") {

                                    cdSplit.pop()
                                    cdSplit.pop()

                                } else {
                                    cdSplit.pop()


                                }

                               
                                currentDir.value = cdSplit.join("/")

                                if(currentDir.value == "") {
                                    currentDir.value = "/"
                                }

                                getDirectory(currentDir.value)

                              
                            })
                            
                            console.log("DENY")
                        
                        } else {

                            fileExplorerList.push('<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>')

                            for(var file of files) {
                                const date = new Date(file.lastedition)

                                    var gmonth = date.getMonth()
                                    var gday = date.getDate()
                                    var gHour = date.getHours()
                                    var gMinute = date.getMinutes()
                                    var gSecondes = date.getSeconds()


                                    if(date.getMonth() + 1 <= 9) {
                                        gmonth = "0" + (date.getMonth() + 1)
                                    }

                                    if(date.getDate() + 1 <= 9) {
                                        gday = "0" + date.getDate()
                                    }

                                    if(date.getHours() + 1 <= 9) {
                                        gHour = "0" + date.getHours()
                                    }

                                    if(date.getMinutes() + 1 <= 9) {
                                        gMinute = "0" + date.getMinutes()
                                    }

                                    if(date.getSeconds() + 1 <= 9) {
                                        gSecondes = "0" + date.getSeconds()
                                    }

                                    var lastedition = gday + "-" + gmonth + "-" + date.getFullYear()  + " - " + gHour + ":" + gMinute
                                
                                if(file.directory == true) {

                                    fileExplorerList.push('<div id="' + file.name + '_directory" class="fi_file row"> <p class="col-lg"><i style="color:yellow;" class="fa fa-folder"></i> ' + file.name + '</p> <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : ' + lastedition + '</p> <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : ' + file.size + ' octet(s)</p> <div class="col-lg fi_file_btn"> <button id="' + file.name + '_rename" class="fi_rename"><i id="' + file.name + '_trename" class="fas fa-terminal"></i></button> <button id="' + file.name + '_delete" class="fi_delete"><i id="' + file.name + '_tdelete" class="fa fa-trash"></i></button> </div> </div>')
                                    dialogExlorerList.push(' <dialog class="fi_addfolder" id="' + file.name + '_rename_dialog"> <h1><i class="fa fa-terminal"></i> Renommer un dossier</h1> <p><span id="' + file.name + '_old_name"></span></p> <p>Nouveau lien :</p> <input class="inp" id="' + file.name + '_rename_name" type="text"> </div><p id="' + file.name +'_rename_info" style="text-align: start; color: rgb(255, 48, 48);"></p> <button id="' + file.name + '_rename_close" class="fi_add_close">Annuler</button> <button id="' + file.name + '_rename_confirm" class="fi_add_confirm">Editer</button> </dialog>')

                                }
                                
                            }

                            for(var file of files) {
                                const date = new Date(file.lastedition)

                                    var gmonth = date.getMonth()
                                    var gday = date.getDate()
                                    var gHour = date.getHours()
                                    var gMinute = date.getMinutes()
                                    var gSecondes = date.getSeconds()


                                    if(date.getMonth() + 1 <= 9) {
                                        gmonth = "0" + (date.getMonth() + 1)
                                    }

                                    if(date.getDate() + 1 <= 9) {
                                        gday = "0" + date.getDate()
                                    }

                                    if(date.getHours() + 1 <= 9) {
                                        gHour = "0" + date.getHours()
                                    }

                                    if(date.getMinutes() + 1 <= 9) {
                                        gMinute = "0" + date.getMinutes()
                                    }

                                    if(date.getSeconds() + 1 <= 9) {
                                        gSecondes = "0" + date.getSeconds()
                                    }

                                    var lastedition = gday + "-" + gmonth + "-" + date.getFullYear()  + " - " + gHour + ":" + gMinute
                                
                                if(file.directory == false) {

                                   

                                    var icon = '<i class="fa fa-file">'

                                    if(file.type == "application/json") {

                                        icon = '<i style="color:rgb(179, 141, 4);" class="fa-sharp fa-solid fa-code">'
                                    }
                                    if(file.type == "application/msword" | file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {

                                        icon = '<i style="color:rgb(47, 94, 247);" class="fa-solid fa-file-word"></i>'
                                    }
                                    if(file.type == "application/vnd.ms-powerpoint") {

                                        icon = '<i style="color:rgb(255, 112, 51);" class="fa-solid fa-file-powerpoint"></i>'
                                    }
                                    if(file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | file.type == "application/vnd.ms-excel") {

                                        icon = '<i style="color:rgb(51, 255, 61);" class="fa-solid fa-file-excel"></i>'
                                    }

                                    if(file.type == "application/java-archive") {

                                        icon = '<i style="color:rgb(255, 202, 150);" class="fa-brands fa-java"></i>'
                                    }

                                    if(file.type == "application/x-sh") {

                                        icon = '<i style="color:rgb(171, 226, 255);" class="fa-solid fa-file-code"></i>'
                                    }

                                    if(file.type == "application/x-msdos-program" | file.type == "application/x-msdownload") {

                                        icon = '<i style="color:rgb(53, 191, 255);" class="fa-brands fa-windows"></i>'
                                    }
                                    if(file.type == "application/javascript") {

                                        icon = '<i style="color:rgb(179, 141, 4);" class="fa-brands fa-js">'
                                    }
                                    if(file.type == "image/png" | file.type == "image/jpeg") {

                                       icon = '<i style="color:rgb(189, 104, 189);" class="fa-solid fa-file-image"></i>'
                                    }
                                    if(file.type == "text/html") {

                                        icon = '<i style="color:tomato;" class="fa-brands fa-html5"></i>'
                                    }
                                    if(file.type == "text/css") {

                                        icon = '<i style="color:rgb(66, 135, 245);" class="fa-brands fa-css3-alt"></i>'
                                    }
                                    if(file.type == "application/zip") {

                                         icon = '<i style="color:rgb(255, 139, 38);" class="fa-solid fa-file-zipper"></i>'
                                    }
                                    if(file.type == "audio/mpeg") {

                                        icon = '<i style="color:rgb(38, 222, 255);" class="fa-solid fa-file-audio"></i>'
                                    }
                                    if(file.type == "application/pdf") {

                                        icon = '<i style="color:rgb(255, 71, 51);" class="fa-solid fa-file-pdf"></i>'
                                    }
                                   



                                                                        
                                    fileExplorerList.push('<div id="' + file.name + '_directory" class="fi_file row"> <p class="col-lg">' + icon+ '</i> ' + file.name + '</p> <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : ' + lastedition + '</p> <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : ' + file.size + ' octet(s)</p> <div class="col-lg fi_file_btn"> <button id="' + file.name + '_rename" class="fi_rename"><i id="' + file.name + '_trename" class="fas fa-terminal"></i></button>  <button id="' + file.name + '_download" class="fi_rename"><i id="' + file.name + '_tdownload" class="fas fa-download"></i></button><button id="' + file.name + '_delete" class="fi_delete"><i id="' + file.name + '_tdelete" class="fa fa-trash"></i></button> </div> </div>')
                                    dialogExlorerList.push(' <dialog class="fi_addfolder" id="' + file.name + '_rename_dialog"> <h1><i class="fa fa-terminal"></i> Renommer un fichier</h1> <p><span id="' + file.name + '_old_name"></span></p> <p>Nouveau lien :</p> <input class="inp" id="' + file.name + '_rename_name" type="text"> </div> <p id="' + file.name +'_rename_info" style="text-align: start; color: rgb(255, 48, 48);"></p><button id="' + file.name + '_rename_close" class="fi_add_close">Annuler</button> <button id="' + file.name + '_rename_confirm" class="fi_add_confirm">Editer</button> </dialog>')
                                }
                                
                            }

                            fileExplorer.innerHTML = fileExplorerList.join('')
                            dialogInput.innerHTML = dialogExlorerList.join('')

                            const last_dir = document.getElementById("last_directory")

                            last_dir.addEventListener("click", () => {

                                var cdSplit = currentDir.value.split("/")

                                if(cdSplit.slice(-1) == "") {

                                    cdSplit.pop()
                                    cdSplit.pop()

                                } else {
                                    cdSplit.pop()


                                }

                               
                                currentDir.value = cdSplit.join("/")

                                if(currentDir.value == "") {
                                    currentDir.value = "/"
                                }

                                getDirectory(currentDir.value)

                              
                            })

                            for(var file of files ) {

                                applyFile(file)                 

                            }

                            function applyFile(file) {

                                const deleteBtn = document.getElementById(file.name + "_delete")
                                const renameBtn = document.getElementById(file.name + "_rename")
                                const renameDialog = document.getElementById(file.name + "_rename_dialog")
                                const renameOldName = document.getElementById(file.name + "_old_name")
                                const renameName = document.getElementById(file.name + "_rename_name")
                                const renameClose = document.getElementById(file.name + "_rename_close")
                                const renameConfirm = document.getElementById(file.name + "_rename_confirm")
                                const renameInfo = document.getElementById(file.name + "_rename_info")
                                
                    

                                if(file.directory == true) {

                                    const dir = document.getElementById(file.name + '_directory')

                                    dir.addEventListener("click", (event) => {

                                        console.log(event.target)

                                        if(event.target.id != file.name + "_delete" && event.target.id != file.name + "_rename" && event.target.id != file.name + "_trename" && event.target.id != file.name + "_tdelete") {

                                            if(currentDir.value.slice(-1) != "\\" && currentDir.value.slice(-1) != "/") {

                                                currentDir.value = currentDir.value + "/" + file.name 

                                            } else if(currentDir.value.slice(-1) == "/") {

                                                currentDir.value = currentDir.value + file.name 

                                            } else {

                                                currentDir.value = currentDir.value + file.name 
                                            }



                                            getDirectory(currentDir.value)

                                        } 

                                        

                                    })

                                } else {

                                    const downloadBtn = document.getElementById(file.name + "_download")

                                    downloadBtn.addEventListener("click", () => {

                                        fiInfo.innerHTML = ""

                                        fetch('/download', {
                                        method: 'GET',
                                        redirect: 'follow',
                                        headers: {
                                            'Accept': 'application/json',
                                            'Content-Type': 'application/json',
                                            'FileRequest': file.fileDirectory
                                        }
                                        }).then(resp => resp.blob())
                                        .then(blob => {
                                                const url = window.URL.createObjectURL(blob);
                                                const a = document.createElement("a");
                                                a.style.display = "none";
                                                a.href = url;
                                                a.download = file.name;
                                                document.body.appendChild(a);
                                                a.click();
                                                window.URL.revokeObjectURL(url);
                                              
                                        })
                                        .catch(() => fiInfo.innerHTML = "Une erreur est survenue lors du téléchargement");
                                                                                


                                    })
                                }

                                deleteBtn.addEventListener("click", () => {

                                    fiInfo.innerHTML = ""

                                    fetch('/filemanager', {
                                        method: 'POST',
                                        redirect: 'follow',
                                        headers: {
                                            'Accept': 'application/json',
                                            'Content-Type': 'application/json'
                                        },
                                        body: JSON.stringify({"request":"del", "value": file})
                                    })
                                    .then(response => response.json())
                                    .then(response => res(response, file))

                                   

                                    function res(response, file) {

                                        console.log(file)

                                        if(response.result == "failed") {
                                               
                                                content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                                                console.log("FAILED")
                                            
                                        } else if(response.result == "success") {
                                            
                                                if(response.content == "ERROR_NOT_MAKEABLE") {
                                                    fiInfo.innerHTML = "<p>Vous n'avez pas la permission !</p>"


                                                } else if(response.content == "ERROR_NOT_EXIST") {
                                                    console.log("ERROR NOT EXIST")
                                                    getDirectory(currentDir.value)


                                                } else {

                                                    newFolderDialog.close()
                                                    getDirectory(currentDir.value)
                                                }

                                        }

                                    }

                                })

                                renameBtn.addEventListener("click", () => {

                                    renameDialog.showModal()
                                    renameOldName.innerHTML = file.fileDirectory
                                    renameName.value = file.fileDirectory


                                })

                                renameClose.addEventListener("click" ,() => {
                                    renameDialog.close()
                                    getDirectory(currentDir.value)

                                })

                                renameConfirm.addEventListener("click" ,() => {
                                    var rnjustspace = false
                                    renameInfo.innerHTML = ""

                                    for (var i = 0; i < renameName.value.length; i++) {
                                        var char = renameName.value.charAt(i)

                                        if(char != " ") {

                                            rnjustspace = true
                                        }
                                
                                    }

                                    
                                    
                                    if(rnjustspace == false) {

                                        renameInfo.innerHTML = "Le nom du dossier ne peut être vide !"
                                    
                                    } else {
                                  
                                
                                        fetch('/filemanager', {
                                            method: 'POST',
                                            redirect: 'follow',
                                            headers: {
                                                'Accept': 'application/json',
                                                'Content-Type': 'application/json'
                                            },
                                            body: JSON.stringify({"request":"rename", "value": renameName.value, "currentDir" : renameOldName.outerText})
                                        })
                                        .then(response => response.json())
                                        .then(response => res(response))

                                        function res(response) {
                                            if(response.result == "failed") {
                                                content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                                                console.log("FAILED")
                                                
                                            } else if(response.result == "success") {

                                                if(response.content == "ERROR_ALREADY_EXIST") {
                                                    renameInfo.innerHTML = "<p>Le nom du dossier est déjà existant !</p>"


                                                } else if(response.content == "ERROR_NOT_MAKEABLE") {
                                                    renameInfo.innerHTML = "<p>Vous n'avez pas la permission !</p>"


                                                } else {

                                                    renameDialog.close()
                                                    getDirectory(currentDir.value)
                                                }
                                                    
                                            }

                                        }

                                }
                                    
                             
                                })
                            } 

                            

                        }

                      

                }

                

            }



        }

    }


    /*<div id="' + file + '_directory" class="fi_file row">  
        <p class="col-lg"><i class="fa fa-folder"></i> <span id="' + file + '_name"></span></p>
        <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : <span id="' + file + '_dateofcreate"></span></p>
        <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : <span id="' + file + '_dateofcreate"></span></p>
        <div class="col-lg fi_file_btn">
            <button id="' + file + '_rename" class="fi_rename"><i class="fas fa-terminal"></i></button>
            <button id="' + file + '_delete" class="fi_delete"><i class="fa fa-trash"></i></button>
        </div>
    </div>  
    <div class="fi_file row ">  
        <p class="col-lg"><i class="fa fa-file"></i> <span id="' + file + '_name"></span</p>
        <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : <span id="' + file + '_dateofcreate"></span></p>
        <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : <span id="' + file + '_dateofcreate"></span></p>
        <div class="col-lg fi_file_btn">
            <button id="' + file + '_rename" class="fi_rename"><i class="fas fa-terminal"></i></button>
            <button id="' + file + '_download" class="fi_rename"><i class="fas fa-download"></i></button>
            <button id="' + file + '_delete" class="fi_delete"><i class="fa fa-trash"></i></button>
        </div>
    </div>*/

</script>


<!-- Style-->
<style>

.fi_file {

    padding-top: 1vw;
    border-bottom: 0.2vw solid rgb(80, 80, 80);
    transition: all 0.2s ease 0s;
}

.fi_file:hover {

    cursor: pointer;
    background-color: rgb(80, 80, 80);
}

.fi_current_directory {

    margin-top: 1vw;
    margin-bottom: 1vw;
    padding: 0.7vw;
    border-radius: 1vw;
    background-color: rgb(32, 32, 32);
    transition: all 0.15s ease 0s;
    display: flex;
    justify-content: space-between;
 

}


.fi_current_directory:focus-within{

    box-shadow: 1px 1px 10px rgb(0, 174, 255);

}


.fi_current_p {

    margin-bottom: 0% !important;
    background: none;
    border: none;
    color: white;
    width: 100%;
}

.fi_current_p:focus {

    outline: none;
}

.fi_file * {

    margin-bottom: 0% !important;
}

.fi_container {

    margin-top: 1vw ;
    background-color: rgb(32, 32, 32) ;
    border-radius: 1vw;
    padding: 1vw;
    overflow-x: hidden;
    overflow-y: auto;
    
    
}

.fi_act {

    display: flex;
    justify-content: space-between;
}


.hbox h1 {

    font-size: large;

}

table  {
    color: white;
    
}



.hbox {
    
    margin: 1%;
    padding: 1%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;

}

.fi_act_btn {

    border-radius: 1vw;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    font-size: 0.7vw;
    padding: 0.5vw;


}

.fi_act_btn:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.fi_act_btn:active {
    box-shadow: none;

}


.fi_rename {

    border-radius: 100%;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    width: 2vw;
    height: 2vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    font-size: 0.7vw;

}

.fi_rename:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.fi_rename:active {
    box-shadow: none;

}

.fi_delete {

    border-radius: 100%;
    border-color: rgb(255, 48, 48);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    width: 2vw;
    height: 2vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    font-size: 0.7vw;
}

.fi_delete:hover {
    box-shadow: 1px 1px 10px rgb(255, 48, 48);
    background-color: rgb(255, 48, 48);
    color: black;
}

.fi_delete:active {
    box-shadow: none;

}

.fi_file_btn {

    margin-bottom: 0.5vw !important;
}

.fi_addfolder {

    border-radius: 1vw;
    border-color: transparent;
    background-color: rgb(80, 80, 80);
    color: white;
    text-align: center;

}

.fi_add_close {

    border-radius: 1vw;
    border-color: rgb(255, 48, 48);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    margin: 0.5vw;
    padding: 0.5vw;
    font-size: 1vw;
}

.fi_add_close:hover {
    box-shadow: 1px 1px 10px rgb(255, 48, 48);
    background-color: rgb(255, 48, 48);
    color: black;
}

.fi_add_close:active {
    box-shadow: none;

}

.fi_add_confirm {

    border-radius: 1vw;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    margin: 0.5vw;
    padding: 0.5vw;
    font-size: 1vw;

}

.fi_add_confirm:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.fi_add_confirm:active {
    box-shadow: none;

}

.inp {

    border-style: hidden;
    border-radius: 1vw;
    padding: 0.2vw;
    padding-left: 1vw;
    transition: all 0.2s ease 0s;
    margin-bottom: 0.5vw;
    width: 100%;


}



.inp:hover {

    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;

}


.inp:focus {

    box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;

}

</style>