diff --git a/app/frontend/static/assets/css/partial/crafty-filemanager.css b/app/frontend/static/assets/css/partial/crafty-filemanager.css
index e69de29b..cb29f73d 100644
--- a/app/frontend/static/assets/css/partial/crafty-filemanager.css
+++ b/app/frontend/static/assets/css/partial/crafty-filemanager.css
@@ -0,0 +1,134 @@
+/* Overlay (right click menu) */
+.overlay {
+  display: none;
+  flex-direction: column;
+  background-color: #9f9daf;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
+  padding: 10px 0;
+  z-index: 10000;
+  overflow: scroll;
+}
+
+.overlay::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.overlay {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+/* Position the content inside the overlay */
+.overlay-content {
+  display: flex;
+  flex-direction: column;
+  background-color: #9f9daf;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
+  padding: 10px 0;
+}
+
+/* The navigation links inside the overlay */
+.overlay a {
+  font: inherit;
+  border: 0;
+  padding: 10px 30px 10px 15px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  text-decoration: unset;
+  color: #000;
+  font-weight: 500;
+  transition: 0.5s linear;
+  -webkit-transition: 0.5s linear;
+  -moz-transition: 0.5s linear;
+  -ms-transition: 0.5s linear;
+  -o-transition: 0.5s linear;
+}
+
+/* When you mouse over the navigation links, change their color */
+.overlay a:hover,
+.overlay a:focus {
+  background: grey;
+  color: #4b00ff;
+}
+
+/* Position the close button (top right corner) */
+.overlay .closebtn .closebtn:hover {
+  background-color: red;
+  color: red;
+  z-index: 10000;
+}
+
+/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
+@media screen and (max-height: 450px) {
+  .overlay a {
+    font-size: 20px;
+  }
+
+  .overlay .closebtn {
+    font-size: 40px;
+    top: 15px;
+    right: 35px;
+  }
+}
+
+.tree-file:hover {
+  cursor: pointer;
+}
+
+/* Remove default bullets */
+.tree-view,
+.tree-nested {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  margin-left: 10px;
+}
+
+/* Style the items */
+.tree-item,
+.files-tree-title {
+  cursor: pointer;
+  user-select: none;
+  /* Prevent text selection */
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.tree-caret .fa-folder {
+  display: inline-block;
+}
+
+.tree-caret .fa-folder-open {
+  display: none;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.tree-caret-down .fa-folder {
+  display: none;
+}
+
+.tree-caret-down .fa-folder-open {
+  display: inline-block;
+}
+
+/* Hide the nested list */
+.tree-nested {
+  display: none;
+}
+
+html,
+body,
+body > .container-scroller {
+  overflow: initial;
+}
+
+.editorManager {
+  top: 63px;
+  position: sticky;
+}
diff --git a/app/frontend/templates/panel/server_files.html b/app/frontend/templates/panel/server_files.html
index d116681b..21ed59fc 100644
--- a/app/frontend/templates/panel/server_files.html
+++ b/app/frontend/templates/panel/server_files.html
@@ -1,14 +1,8 @@
-{% extends ../base.html %}
-
-{% block meta %}
-{% end %}
-
-{% block title %}Crafty Controller - {{ translate('serverDetails', 'serverDetails', data['lang']) }}{% end %}
-
-{% block content %}
+{% extends ../base.html %} {% block meta %} {% end %} {% block title %}Crafty
+Controller - {{ translate('serverDetails', 'serverDetails', data['lang']) }}{%
+end %} {% block content %}
 
 <div class="content-wrapper">
-
   <!-- Page Title Header Starts-->
   <div class="row page-title-header">
     <div class="col-12">
@@ -17,21 +11,21 @@
           {{ translate('serverDetails', 'serverDetails', data['lang']) }} - {{
           data['server_stats']['server_id']['server_name'] }}
           <br />
-          <small>UUID: {{ data['server_stats']['server_id']['server_id'] }}</small>
+          <small
+            >UUID: {{ data['server_stats']['server_id']['server_id'] }}</small
+          >
         </h4>
       </div>
     </div>
-
   </div>
   <!-- Page Title Header Ends-->
 
   {% include "parts/details_stats.html" %}
 
   <div class="row">
-
     <div class="col-sm-12 grid-margin">
       <div class="card">
-        <div class="card-body  pt-0">
+        <div class="card-body pt-0">
           <span class="d-none d-sm-block">
             {% include "parts/server_controls_list.html %}
           </span>
@@ -44,246 +38,217 @@
               <noscript>
                 {{ translate('serverFiles', 'noscript', data['lang']) }}
               </noscript>
-              <div id="files-tree-nav" class="overlay" style="background-color: #9f9daf !important;">
-
+              <div
+                id="files-tree-nav"
+                class="overlay"
+                style="background-color: #9f9daf !important"
+              >
                 <!-- Button to close the overlay navigation -->
 
                 <!-- Overlay content -->
-                <div id="files-tree-nav-content" class="overlay-content" style="background-color: #9f9daf;">
-                  <h4 id="context-title" style="color:#4b00ff; text-align: center; padding: 3px;">
-                  </h4>
-                  <p style="width: 90%; border-bottom: 2px solid black; margin:0 auto;"></p>
-                  <a onclick="createFileE(event)" href="javascript:void(0)" id="createFile" href="#">{{
-                    translate('serverFiles', 'createFile', data['lang']) }}</a>
-                  <a onclick="createDirE(event)" href="javascript:void(0)" id="createDir" href="#">{{
-                    translate('serverFiles', 'createDir', data['lang']) }}</a>
-                  <a onclick="renameItemE(event)" href="javascript:void(0)" id="renameItem" href="#">{{
-                    translate('serverFiles', 'rename', data['lang']) }}</a>
-                  <a onclick="uploadFilesE(event)" href="javascript:void(0)" id="upload" href="#">{{
-                    translate('serverFiles', 'upload', data['lang']) }}</a>
-                  <a onclick="unzipFilesE(event)" href="javascript:void(0)" id="unzip" href="#">{{
-                    translate('serverFiles', 'unzip', data['lang']) }}</a>
-                  <a onclick="downloadFileE(event)" href="javascript:void(0)" id="downloadFile" href="#">{{
-                    translate('serverFiles', 'download', data['lang']) }}</a>
-                  <a onclick="deleteFileE(event)" href="javascript:void(0)" id="deleteFile" href="#"
-                    style="color: red">{{ translate('serverFiles', 'delete', data['lang']) }}</a>
-                  <a onclick="deleteFileE(event)" href="javascript:void(0)" id="deleteDir" href="#"
-                    style="color: red">{{
-                    translate('serverFiles', 'delete', data['lang']) }}</a>
-                  <a href="javascript:void(0)" class="closebtn" style="color: var(--info);"
-                    onclick="document.getElementById('files-tree-nav').style.display = 'none';">{{
-                    translate('serverFiles', 'close', data['lang']) }}</a>
+                <div
+                  id="files-tree-nav-content"
+                  class="overlay-content"
+                  style="background-color: #9f9daf"
+                >
+                  <h4
+                    id="context-title"
+                    style="color: #4b00ff; text-align: center; padding: 3px"
+                  ></h4>
+                  <p
+                    style="
+                      width: 90%;
+                      border-bottom: 2px solid black;
+                      margin: 0 auto;
+                    "
+                  ></p>
+                  <a
+                    onclick="createFileE(event)"
+                    href="javascript:void(0)"
+                    id="createFile"
+                    href="#"
+                    >{{ translate('serverFiles', 'createFile', data['lang'])
+                    }}</a
+                  >
+                  <a
+                    onclick="createDirE(event)"
+                    href="javascript:void(0)"
+                    id="createDir"
+                    href="#"
+                    >{{ translate('serverFiles', 'createDir', data['lang'])
+                    }}</a
+                  >
+                  <a
+                    onclick="renameItemE(event)"
+                    href="javascript:void(0)"
+                    id="renameItem"
+                    href="#"
+                    >{{ translate('serverFiles', 'rename', data['lang']) }}</a
+                  >
+                  <a
+                    onclick="uploadFilesE(event)"
+                    href="javascript:void(0)"
+                    id="upload"
+                    href="#"
+                    >{{ translate('serverFiles', 'upload', data['lang']) }}</a
+                  >
+                  <a
+                    onclick="unzipFilesE(event)"
+                    href="javascript:void(0)"
+                    id="unzip"
+                    href="#"
+                    >{{ translate('serverFiles', 'unzip', data['lang']) }}</a
+                  >
+                  <a
+                    onclick="downloadFileE(event)"
+                    href="javascript:void(0)"
+                    id="downloadFile"
+                    href="#"
+                    >{{ translate('serverFiles', 'download', data['lang']) }}</a
+                  >
+                  <a
+                    onclick="deleteFileE(event)"
+                    href="javascript:void(0)"
+                    id="deleteFile"
+                    href="#"
+                    style="color: red"
+                    >{{ translate('serverFiles', 'delete', data['lang']) }}</a
+                  >
+                  <a
+                    onclick="deleteFileE(event)"
+                    href="javascript:void(0)"
+                    id="deleteDir"
+                    href="#"
+                    style="color: red"
+                    >{{ translate('serverFiles', 'delete', data['lang']) }}</a
+                  >
+                  <a
+                    href="javascript:void(0)"
+                    class="closebtn"
+                    style="color: var(--info)"
+                    onclick="document.getElementById('files-tree-nav').style.display = 'none';"
+                    >{{ translate('serverFiles', 'close', data['lang']) }}</a
+                  >
                 </div>
-
               </div>
-              <style>
-                /* The Overlay (background) */
-                .overlay {
-                  display: none;
-                  flex-direction: column;
-                  background-color: #9f9daf;
-                  border-radius: 10px;
-                  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
-                  padding: 10px 0;
-                  z-index: 10000;
-                  overflow: scroll;
 
-                }
-
-                .overlay::-webkit-scrollbar {
-                  display: none;
-                }
-
-                /* Hide scrollbar for IE, Edge and Firefox */
-                .overlay {
-                  -ms-overflow-style: none;
-                  /* IE and Edge */
-                  scrollbar-width: none;
-                  /* Firefox */
-                }
-
-                /* Position the content inside the overlay */
-                .overlay-content {
-                  display: flex;
-                  flex-direction: column;
-                  background-color: #9f9daf;
-                  border-radius: 10px;
-                  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
-                  padding: 10px 0;
-                }
-
-                /* The navigation links inside the overlay */
-                .overlay a {
-                  font: inherit;
-                  border: 0;
-                  padding: 10px 30px 10px 15px;
-                  width: 100%;
-                  display: flex;
-                  align-items: center;
-                  position: relative;
-                  text-decoration: unset;
-                  color: #000;
-                  font-weight: 500;
-                  transition: 0.5s linear;
-                  -webkit-transition: 0.5s linear;
-                  -moz-transition: 0.5s linear;
-                  -ms-transition: 0.5s linear;
-                  -o-transition: 0.5s linear;
-                }
-
-                /* When you mouse over the navigation links, change their color */
-                .overlay a:hover,
-                .overlay a:focus {
-                  background: grey;
-                  color: #4b00ff;
-                }
-
-                /* Position the close button (top right corner) */
-                .overlay .closebtn .closebtn:hover {
-                  background-color: red;
-                  color: red;
-                  z-index: 10000;
-                }
-
-                /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
-                @media screen and (max-height: 450px) {
-                  .overlay a {
-                    font-size: 20px
-                  }
-
-                  .overlay .closebtn {
-                    font-size: 40px;
-                    top: 15px;
-                    right: 35px;
-                  }
-                }
-
-                .tree-file:hover {
-                  cursor: pointer;
-                }
-              </style>
               <ul class="tree-view">
                 <li>
-                  <div id="root_dir" class="tree-ctx-item" data-path="{{ data['server_stats']['server_id']['path'] }}">
-                    <span id="{{ data['server_stats']['server_id']['path'] }}span"
+                  <div
+                    id="root_dir"
+                    class="tree-ctx-item"
+                    data-path="{{ data['server_stats']['server_id']['path'] }}"
+                  >
+                    <span
+                      id="{{ data['server_stats']['server_id']['path'] }}span"
                       class="files-tree-title tree-caret-down root-dir"
-                      data-path="{{ data['server_stats']['server_id']['path'] }}" onclick="getToggleMain(event)">
+                      data-path="{{ data['server_stats']['server_id']['path'] }}"
+                      onclick="getToggleMain(event)"
+                    >
                       <i class="far fa-folder"></i>
                       <i class="far fa-folder-open"></i>
                       {{ translate('serverFiles', 'files', data['lang']) }}
                     </span>
                   </div>
                   <ul class="tree-nested d-block" id="files-tree">
-                    <li><i class="fa fa-spin fa-spinner"></i>{{ translate('serverFiles', 'loadingRecords', data['lang'])
-                      }}</li>
-
+                    <li>
+                      <i class="fa fa-spin fa-spinner"></i>{{
+                      translate('serverFiles', 'loadingRecords', data['lang'])
+                      }}
+                    </li>
                   </ul>
                 </li>
               </ul>
             </div>
-            <style>
-              /* Remove default bullets */
-              .tree-view,
-              .tree-nested {
-                list-style-type: none;
-                margin: 0;
-                padding: 0;
-                margin-left: 10px;
-              }
 
-              /* Style the items */
-              .tree-item,
-              .files-tree-title {
-                cursor: pointer;
-                user-select: none;
-                /* Prevent text selection */
-              }
-
-              /* Create the caret/arrow with a unicode, and style it */
-              .tree-caret .fa-folder {
-                display: inline-block;
-              }
-
-              .tree-caret .fa-folder-open {
-                display: none;
-              }
-
-              /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-              .tree-caret-down .fa-folder {
-                display: none;
-              }
-
-              .tree-caret-down .fa-folder-open {
-                display: inline-block;
-              }
-
-              /* Hide the nested list */
-              .tree-nested {
-                display: none;
-              }
-
-              html,
-              body,
-              body>.container-scroller {
-                overflow: initial;
-              }
-
-              .editorManager {
-                top: 63px;
-                position: sticky;
-              }
-            </style>
             <div id="editor_container" class="col-md-6 col-sm-12">
-              <br>
-              <br>
+              <br />
+              <br />
               <div class="editorManager">
                 <h2 id="fileError"></h2>
                 <div id="editorParent">
-                  {{ translate('serverFiles', 'editingFile', data['lang']) }} <span id="editingFile"></span>
-                  <div id="editor" onresize="editor.resize()" style="resize: both;width: 100%;">file_contents</div>
+                  {{ translate('serverFiles', 'editingFile', data['lang']) }}
+                  <span id="editingFile"></span>
+                  <div
+                    id="editor"
+                    onresize="editor.resize()"
+                    style="resize: both; width: 100%"
+                  >
+                    file_contents
+                  </div>
                   <br />
                 </div>
                 {{ translate('serverFiles', 'keybindings', data['lang']) }}:
                 <div class="btn-group" role="group">
-                  <button onclick="setKeyboard(event.target)" class="btn btn-primary" data-handler-name="null">{{
-                    translate('serverFiles', 'default', data['lang']) }}</button>
-                  <button onclick="setKeyboard(event.target)" class="btn btn-secondary"
-                    data-handler-name="ace/keyboard/vim">Vim</button>
-                  <button onclick="setKeyboard(event.target)" class="btn btn-secondary"
-                    data-handler-name="ace/keyboard/emacs">Emacs</button>
-                  <button onclick="setKeyboard(event.target)" class="btn btn-secondary"
-                    data-handler-name="ace/keyboard/sublime">Sublime</button>
-                  <span class="d-none d-md-block ">&nbsp;&nbsp;&nbsp;<button class="btn btn-info" id="screen-size">{{
-                      translate('serverFiles',
-                      'size', data['lang']) }}</button></span>
+                  <button
+                    onclick="setKeyboard(event.target)"
+                    class="btn btn-primary"
+                    data-handler-name="null"
+                  >
+                    {{ translate('serverFiles', 'default', data['lang']) }}
+                  </button>
+                  <button
+                    onclick="setKeyboard(event.target)"
+                    class="btn btn-secondary"
+                    data-handler-name="ace/keyboard/vim"
+                  >
+                    Vim
+                  </button>
+                  <button
+                    onclick="setKeyboard(event.target)"
+                    class="btn btn-secondary"
+                    data-handler-name="ace/keyboard/emacs"
+                  >
+                    Emacs
+                  </button>
+                  <button
+                    onclick="setKeyboard(event.target)"
+                    class="btn btn-secondary"
+                    data-handler-name="ace/keyboard/sublime"
+                  >
+                    Sublime
+                  </button>
+                  <span class="d-none d-md-block"
+                    >&nbsp;&nbsp;&nbsp;<button
+                      class="btn btn-info"
+                      id="screen-size"
+                    >
+                      {{ translate('serverFiles', 'size', data['lang']) }}
+                    </button></span
+                  >
                 </div>
                 <h3 id="file_warn"></h3>
-                <button class="btn btn-success" onclick="save()"><i class="fas fa-save"></i> {{ translate('serverFiles',
-                  'save', data['lang']) }}</button>
-                <span style="color: #2fb689; margin-left: 10px;" id="save_status"></span>
+                <button class="btn btn-success" onclick="save()">
+                  <i class="fas fa-save"></i> {{ translate('serverFiles',
+                  'save', data['lang']) }}
+                </button>
+                <span
+                  style="color: #2fb689; margin-left: 10px"
+                  id="save_status"
+                ></span>
               </div>
             </div>
           </div>
-
         </div>
       </div>
     </div>
   </div>
-
-
-
 </div>
+<link
+  rel="stylesheet"
+  href="/static/assets/css/partial/crafty-filemanager.css"
+/>
 <!-- content-wrapper ends -->
 
-{% end %}
-
-{% block js %}
-<script src="/static/assets/vendors/ace-builds/src-min/ace.js" type="text/javascript" charset="utf-8"></script>
+{% end %} {% block js %}
+<script
+  src="/static/assets/vendors/ace-builds/src-min/ace.js"
+  type="text/javascript"
+  charset="utf-8"
+></script>
 
 <script>
-
-  const serverId = new URLSearchParams(document.location.search).get('id')
-
+  const serverId = new URLSearchParams(document.location.search).get("id");
 
   //used to get cookies from browser - this is part of tornados xsrf protection - it's for extra security
   function getCookie(name) {
@@ -291,20 +256,19 @@
     return r ? r[1] : undefined;
   }
 
-
-  let editor = ace.edit('editor');
-  editor.setTheme('ace/theme/dracula');
+  let editor = ace.edit("editor");
+  editor.setTheme("ace/theme/dracula");
   editor.session.setUseSoftTabs(true);
   editor.commands.addCommand({
-    name: 'saveFile',
+    name: "saveFile",
     bindKey: {
-      win: 'Ctrl-S',
-      mac: 'Command-S',
-      sender: 'editor|cli'
+      win: "Ctrl-S",
+      mac: "Command-S",
+      sender: "editor|cli",
     },
     exec: function (env, args, request) {
-      save()
-    }
+      save();
+    },
   });
 
   // mouseup = css resize end
@@ -315,150 +279,143 @@
   let extensionChanges = [
     {
       regex: /^js$/,
-      replaceWith: 'ace/mode/javascript'
+      replaceWith: "ace/mode/javascript",
     },
     {
       regex: /^py$/,
-      replaceWith: 'ace/mode/python'
+      replaceWith: "ace/mode/python",
     },
     {
       regex: /^html$/,
-      replaceWith: 'ace/mode/html'
+      replaceWith: "ace/mode/html",
     },
     {
       regex: /^yml$/,
-      replaceWith: 'ace/mode/yaml'
+      replaceWith: "ace/mode/yaml",
     },
     {
       regex: /^yaml$/,
-      replaceWith: 'ace/mode/yaml'
+      replaceWith: "ace/mode/yaml",
     },
     {
       regex: /^txt$/,
-      replaceWith: 'ace/mode/text'
+      replaceWith: "ace/mode/text",
     },
     {
       regex: /^json$/,
-      replaceWith: 'ace/mode/json'
+      replaceWith: "ace/mode/json",
     },
     {
       regex: /^java$/,
-      replaceWith: 'ace/mode/java'
+      replaceWith: "ace/mode/java",
     },
     {
       regex: /^cpp$/,
-      replaceWith: 'ace/mode/c_cpp'
+      replaceWith: "ace/mode/c_cpp",
     },
     {
       regex: /^c$/,
-      replaceWith: 'ace/mode/c_cpp'
+      replaceWith: "ace/mode/c_cpp",
     },
     {
       regex: /^css$/,
-      replaceWith: 'ace/mode/css'
+      replaceWith: "ace/mode/css",
     },
     {
       regex: /^scss$/,
-      replaceWith: 'ace/mode/scss'
+      replaceWith: "ace/mode/scss",
     },
     {
       regex: /^sass$/,
-      replaceWith: 'ace/mode/sass'
+      replaceWith: "ace/mode/sass",
     },
     {
       regex: /^lua$/,
-      replaceWith: 'ace/mode/lua'
+      replaceWith: "ace/mode/lua",
     },
     {
       regex: /^php$/,
-      replaceWith: 'ace/mode/php'
+      replaceWith: "ace/mode/php",
     },
     {
       regex: /^ps1$/,
-      replaceWith: 'ace/mode/powershell'
+      replaceWith: "ace/mode/powershell",
     },
     {
       regex: /^svg$/,
-      replaceWith: 'ace/mode/svg'
+      replaceWith: "ace/mode/svg",
     },
     {
       regex: /^sh$/,
-      replaceWith: 'ace/mode/sh'
+      replaceWith: "ace/mode/sh",
     },
     {
       regex: /^xml$/,
-      replaceWith: 'ace/mode/xml'
+      replaceWith: "ace/mode/xml",
     },
     {
       regex: /^ts$/,
-      replaceWith: 'ace/mode/typescript'
+      replaceWith: "ace/mode/typescript",
     },
     {
       regex: /^properties$/,
-      replaceWith: 'ace/mode/properties'
+      replaceWith: "ace/mode/properties",
     },
     {
       regex: /^log$/,
-      replaceWith: 'ace/mode/txt'
+      replaceWith: "ace/mode/txt",
     },
   ];
 
-  let path = '', serverFileContent = '';
+  let path = "",
+    serverFileContent = "";
 
   async function clickOnFile(event) {
     const token = getCookie("_xsrf");
-    path = event.target.getAttribute('data-path');
+    path = event.target.getAttribute("data-path");
     let res = await fetch(`/api/v2/servers/${serverId}/files`, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'X-XSRFToken': token
+        "X-XSRFToken": token,
       },
-      body: JSON.stringify({ "page": "files", "path": path }),
+      body: JSON.stringify({ page: "files", path: path }),
     });
     let responseData = await res.json();
-    console.log(responseData)
+    console.log(responseData);
     if (responseData.status === "ok") {
-      console.log('Got File Contents From Server');
-      $('#editorParent').toggle(true) // show
-      $('#fileError').toggle(false)   // hide
+      console.log("Got File Contents From Server");
+      $("#editorParent").toggle(true); // show
+      $("#fileError").toggle(false); // hide
       setFileName(event.target.innerText);
       editor.session.setValue(responseData.data);
       serverFileContent = responseData.data;
       setSaveStatus(true);
-    }
-    else {
-
+    } else {
       bootbox.alert({
         title: responseData.status,
-        message: responseData.error
+        message: responseData.error,
       });
     }
   }
 
   function setFileName(name) {
-    let fileName = name || 'default.txt';
-    document.getElementById('editingFile').innerText = fileName;
-
-    if (fileName.match('.')) {
+    let fileName = name || "default.txt";
+    document.getElementById("editingFile").innerText = fileName;
 
+    if (fileName.match(".")) {
       // The pop method removes and returns the last element.
-      setMode(fileName
-        .split('.')
-        .pop()
-        .replace('ace/mode/', ''));
-
+      setMode(fileName.split(".").pop().replace("ace/mode/", ""));
     } else {
-      setMode('txt');
-      document
-        .querySelector('#file_warn')
-        .innerText = "{% raw translate('serverFiles', 'unsupportedLanguage', data['lang']) %}";
+      setMode("txt");
+      document.querySelector("#file_warn").innerText =
+        "{% raw translate('serverFiles', 'unsupportedLanguage', data['lang']) %}";
     }
   }
 
   var onlongtouch;
   var timer;
   var touchduration = 500; //length of time we want the user to touch before we do something
-  const longtouch = new Event('longtouch');
+  const longtouch = new Event("longtouch");
 
   function touchstart(event) {
     if (!timer) {
@@ -470,210 +427,209 @@
     //stops short touches from firing the event
     if (timer) {
       clearTimeout(timer);
-      console.log('Timer: ' + timer)
+      console.log("Timer: " + timer);
       timer = null;
     }
   }
 
   onlongtouch = function (e) {
-    console.log('iOS long touch detected!');
-    if ([
-      'iPad Simulator',
-      'iPhone Simulator',
-      'iPod Simulator',
-      'iPad',
-      'iPhone',
-      'iPod'
-    ].includes(navigator.platform)
+    console.log("iOS long touch detected!");
+    if (
+      [
+        "iPad Simulator",
+        "iPhone Simulator",
+        "iPod Simulator",
+        "iPad",
+        "iPhone",
+        "iPod",
+      ].includes(navigator.platform) ||
       // iPad on iOS 13 detection
-      || (navigator.userAgent.includes("Mac") && "ontouchend" in document)) {
+      (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+    ) {
       e.preventDefault();
       e.stopImmediatePropagation();
-      var ctxmenuPath = e.target.getAttribute('data-path');
-      var ctxmenuName = e.target.getAttribute('data-name');
+      var ctxmenuPath = e.target.getAttribute("data-path");
+      var ctxmenuName = e.target.getAttribute("data-name");
 
-      document.getElementById('context-title').innerHTML = ctxmenuName;
+      document.getElementById("context-title").innerHTML = ctxmenuName;
       if (!ctxmenuPath) {
         return;
       }
-      $('#renameItem').show();
+      $("#renameItem").show();
 
-      var isDir = e.target.classList.contains('files-tree-title');
-      $('#createFile').toggle(isDir);
-      $('#createDir').toggle(isDir);
-      $('#deleteDir').toggle(isDir);
-      $('#upload').toggle(isDir);
+      var isDir = e.target.classList.contains("files-tree-title");
+      $("#createFile").toggle(isDir);
+      $("#createDir").toggle(isDir);
+      $("#deleteDir").toggle(isDir);
+      $("#upload").toggle(isDir);
 
-      var isFile = e.target.classList.contains('tree-file');
-      $('#deleteFile').toggle(isFile);
-      $('#downloadFile').toggle(isFile);
+      var isFile = e.target.classList.contains("tree-file");
+      $("#deleteFile").toggle(isFile);
+      $("#downloadFile").toggle(isFile);
 
-      if (e.target.classList.contains('root-dir')) {
-        $('#createFile').show();
-        $('#createDir').show();
-        $('#renameItem').hide();
-        $('#deleteDir').hide();
-        $('#deleteFile').hide();
-        $('#downloadFile').hide();
-        $('#upload').show();
+      if (e.target.classList.contains("root-dir")) {
+        $("#createFile").show();
+        $("#createDir").show();
+        $("#renameItem").hide();
+        $("#deleteDir").hide();
+        $("#deleteFile").hide();
+        $("#downloadFile").hide();
+        $("#upload").show();
       }
-      if (e.target.textContent.endsWith('.zip')) {
-        $('#unzip').show();
+      if (e.target.textContent.endsWith(".zip")) {
+        $("#unzip").show();
       } else {
-        $('#unzip').hide();
+        $("#unzip").hide();
       }
 
       var clientX = e.layerX + 2;
       var clientY = e.layerY + 5;
 
-
-
-      document.getElementById('files-tree-nav-content')
-        .setAttribute('data-path', ctxmenuPath);
-      document.getElementById('files-tree-nav-content')
-        .setAttribute('data-name', ctxmenuName);
+      document
+        .getElementById("files-tree-nav-content")
+        .setAttribute("data-path", ctxmenuPath);
+      document
+        .getElementById("files-tree-nav-content")
+        .setAttribute("data-name", ctxmenuName);
       document.getElementById("files-tree-nav").style.display = "flex";
       document.getElementById("files-tree-nav").style.position = "fixed";
-      domRect = document.getElementById("files-tree-nav").getBoundingClientRect();
-      sum = (clientY + domRect['height']) - window.innerHeight
-      if (domRect['height'] + clientY > window.innerHeight) {
+      domRect = document
+        .getElementById("files-tree-nav")
+        .getBoundingClientRect();
+      sum = clientY + domRect["height"] - window.innerHeight;
+      if (domRect["height"] + clientY > window.innerHeight) {
         clientY = clientY - sum;
       }
-      document.getElementById("files-tree-nav").style.top = clientY + 'px';
-      document.getElementById("files-tree-nav").style.left = clientX + 'px';
+      document.getElementById("files-tree-nav").style.top = clientY + "px";
+      document.getElementById("files-tree-nav").style.left = clientX + "px";
       timer = null;
-    };
-  }
+    }
+  };
   /**
-    * @param {boolean} saved
-  */
+   * @param {boolean} saved
+   */
   const setSaveStatus = (saved) => {
-    document.getElementById('save_status').innerHTML = `<i class="${saved ? "fa-solid fa-file-circle-check" : "fa-regular fa-file"}"></i>`;
-    document.getElementById('save_status').style.color = saved ? '#2fb689' : 'gray';
-  }
-  ['change', 'undo', 'redo'].forEach(event => editor.on(event, (event) => setSaveStatus(serverFileContent === editor.session.getValue())))
-  $('#screen-size').on('click', function (e) {
-    $('#editor_container').toggleClass(`col-md-6`)
-
+    document.getElementById("save_status").innerHTML = `<i class="${
+      saved ? "fa-solid fa-file-circle-check" : "fa-regular fa-file"
+    }"></i>`;
+    document.getElementById("save_status").style.color = saved
+      ? "#2fb689"
+      : "gray";
+  };
+  ["change", "undo", "redo"].forEach((event) =>
+    editor.on(event, (event) =>
+      setSaveStatus(serverFileContent === editor.session.getValue())
+    )
+  );
+  $("#screen-size").on("click", function (e) {
+    $("#editor_container").toggleClass(`col-md-6`);
   });
   setFileName();
-  $('#editorParent').toggle(false) // show
-  $('#fileError').toggle(false)    // hide
-  editor.blur()
+  $("#editorParent").toggle(false); // show
+  $("#fileError").toggle(false); // hide
+  editor.blur();
 
   function setMode(extension) {
     // if the extension matches with the RegEx it will return the replaceWith
     // property. else it will return the one it has. defaults to the extension.
     // this runs for each element in extensionChanges.
     let aceMode = extensionChanges.reduce((output, element) => {
-      return extension.match(element.regex)
-        ? element.replaceWith
-        : output;
+      return extension.match(element.regex) ? element.replaceWith : output;
     }, extension);
 
-    if (!aceMode.startsWith('ace/mode/')) {
-      document
-        .querySelector('#file_warn')
-        .innerText = "{% raw translate('serverFiles', 'unsupportedLanguage', data['lang']) %}";
+    if (!aceMode.startsWith("ace/mode/")) {
+      document.querySelector("#file_warn").innerText =
+        "{% raw translate('serverFiles', 'unsupportedLanguage', data['lang']) %}";
     } else {
-      document
-        .querySelector('#file_warn')
-        .innerText = '';
+      document.querySelector("#file_warn").innerText = "";
 
-      console.log(aceMode || 'ace/mode/text');
-      editor.session.setMode(aceMode || 'ace/mode/text');
+      console.log(aceMode || "ace/mode/text");
+      editor.session.setMode(aceMode || "ace/mode/text");
     }
   }
 
-
   async function save() {
     let text = editor.session.getValue();
 
-    const token = getCookie("_xsrf")
+    const token = getCookie("_xsrf");
     let res = await fetch(`/api/v2/servers/${serverId}/files`, {
-      method: 'PATCH',
+      method: "PATCH",
       headers: {
-        'X-XSRFToken': token
+        "X-XSRFToken": token,
       },
-      body: JSON.stringify({ "path": path, "contents": text }),
+      body: JSON.stringify({ path: path, contents: text }),
     });
     let responseData = await res.json();
     if (responseData.status === "ok") {
       serverFileContent = text;
-      setSaveStatus(true)
-
+      setSaveStatus(true);
     } else {
-
       bootbox.alert({
         title: responseData.status,
-        message: responseData.error
+        message: responseData.error,
       });
     }
   }
 
   async function createFile(parent, name, callback) {
-    const token = getCookie("_xsrf")
+    const token = getCookie("_xsrf");
     let res = await fetch(`/api/v2/servers/${serverId}/files/create/`, {
-      method: 'PUT',
+      method: "PUT",
       headers: {
-        'X-XSRFToken': token
+        "X-XSRFToken": token,
       },
-      body: JSON.stringify({ "parent": parent, "name": name, "directory": false }),
+      body: JSON.stringify({ parent: parent, name: name, directory: false }),
     });
     let responseData = await res.json();
     if (responseData.status === "ok") {
-      getTreeView($('#root_dir').data('path'));
+      getTreeView($("#root_dir").data("path"));
       setTreeViewContext();
     } else {
-
       bootbox.alert({
         title: responseData.status,
-        message: responseData.error
+        message: responseData.error,
       });
     }
   }
 
-
   async function createDir(parent, name, callback) {
-    const token = getCookie("_xsrf")
+    const token = getCookie("_xsrf");
     let res = await fetch(`/api/v2/servers/${serverId}/files/create/`, {
-      method: 'PUT',
+      method: "PUT",
       headers: {
-        'X-XSRFToken': token
+        "X-XSRFToken": token,
       },
-      body: JSON.stringify({ "parent": parent, "name": name, "directory": true }),
+      body: JSON.stringify({ parent: parent, name: name, directory: true }),
     });
     let responseData = await res.json();
     if (responseData.status === "ok") {
-      getTreeView($('#root_dir').data('path'));
+      getTreeView($("#root_dir").data("path"));
       setTreeViewContext();
     } else {
-
       bootbox.alert({
         title: responseData.status,
-        message: responseData.error
+        message: responseData.error,
       });
     }
   }
 
   async function renameItem(path, name, callback) {
-    const token = getCookie("_xsrf")
+    const token = getCookie("_xsrf");
     let res = await fetch(`/api/v2/servers/${serverId}/files/create/`, {
-      method: 'PATCH',
+      method: "PATCH",
       headers: {
-        'X-XSRFToken': token
+        "X-XSRFToken": token,
       },
-      body: JSON.stringify({ "path": path, "new_name": name }),
+      body: JSON.stringify({ path: path, new_name: name }),
     });
     let responseData = await res.json();
     if (responseData.status === "ok") {
-      getTreeView($('#root_dir').data('path'));
+      getTreeView($("#root_dir").data("path"));
       setTreeViewContext();
     } else {
-
       bootbox.alert({
         title: responseData.status,
-        message: responseData.error
+        message: responseData.error,
       });
     }
   }
@@ -681,44 +637,42 @@
   async function deleteItem(path, el, callback) {
     const token = getCookie("_xsrf");
     let res = await fetch(`/api/v2/servers/${serverId}/files`, {
-      method: 'DELETE',
+      method: "DELETE",
       headers: {
-        'X-XSRFToken': token
+        "X-XSRFToken": token,
       },
-      body: JSON.stringify({ "filename": path }),
+      body: JSON.stringify({ filename: path }),
     });
     let responseData = await res.json();
     if (responseData.status === "ok") {
       el = document.getElementById(path + "li");
       $(el).remove();
-      document.getElementById('files-tree-nav').style.display = 'none';
+      document.getElementById("files-tree-nav").style.display = "none";
     } else {
-
       bootbox.alert({
         title: responseData.status,
-        message: responseData.error
+        message: responseData.error,
       });
     }
   }
 
   async function unZip(path, callback) {
-    const token = getCookie("_xsrf")
+    const token = getCookie("_xsrf");
     let res = await fetch(`/api/v2/servers/${serverId}/files/zip/`, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'X-XSRFToken': token
+        "X-XSRFToken": token,
       },
-      body: JSON.stringify({ "folder": path }),
+      body: JSON.stringify({ folder: path }),
     });
     let responseData = await res.json();
     if (responseData.status === "ok") {
-      getTreeView($('#root_dir').data('path'));
+      getTreeView($("#root_dir").data("path"));
       setTreeViewContext();
     } else {
-
       bootbox.alert({
         title: responseData.status,
-        message: responseData.error
+        message: responseData.error,
       });
     }
   }
@@ -726,10 +680,12 @@
   let uploadWaitDialog;
 
   async function uploadFilesE(event) {
-    path = event.target.parentElement.getAttribute('data-path');
+    path = event.target.parentElement.getAttribute("data-path");
     $(function () {
-      var uploadHtml = "<div>" +
-        '<form id="upload_file"  enctype="multipart/form-data">' + "<label class='upload-area' style='width:100%;text-align:center;' for='files'>" +
+      var uploadHtml =
+        "<div>" +
+        '<form id="upload_file"  enctype="multipart/form-data">' +
+        "<label class='upload-area' style='width:100%;text-align:center;' for='files'>" +
         "<i class='fa fa-cloud-upload fa-3x'></i>" +
         "<br />" +
         "{{translate('serverFiles', 'clickUpload', data['lang'])}}" +
@@ -740,7 +696,8 @@
         "</div><div class='clearfix'></div>";
       bootbox.dialog({
         message: uploadHtml,
-        title: "{{ translate('serverFiles', 'uploadTitle', data['lang'])}}" + path,
+        title:
+          "{{ translate('serverFiles', 'uploadTitle', data['lang'])}}" + path,
         buttons: {
           success: {
             label: "{{ translate('serverFiles', 'upload', data['lang']) }}",
@@ -751,17 +708,23 @@
               }
               var height = files.files.length * 50;
 
-              var waitMessage = '<p class="text-center mb-0">' +
+              var waitMessage =
+                '<p class="text-center mb-0">' +
                 '<i class="fa fa-spin fa-cog"></i>&nbsp;' +
-                "{{ translate('serverFiles', 'waitUpload', data['lang']) }}" + '<br>' +
-                '<strong>' + "{{ translate('serverFiles', 'stayHere', data['lang']) }}" + '</strong>' +
-                '</p>' +
-                '<div class="progress" id="upload-progress-bar-parent" style="height:' + height + 'px; width:100%; display: block;">' +
-                '</div>'
+                "{{ translate('serverFiles', 'waitUpload', data['lang']) }}" +
+                "<br>" +
+                "<strong>" +
+                "{{ translate('serverFiles', 'stayHere', data['lang']) }}" +
+                "</strong>" +
+                "</p>" +
+                '<div class="progress" id="upload-progress-bar-parent" style="height:' +
+                height +
+                'px; width:100%; display: block;">' +
+                "</div>";
               files = document.getElementById("files");
               uploadWaitDialog = bootbox.dialog({
                 message: waitMessage,
-                closeButton: false
+                closeButton: false,
               });
 
               let nFiles = files.files.length;
@@ -784,65 +747,74 @@
                             </div><br>
                             `;
 
-                $('#upload-progress-bar-parent').append(progressHtml);
+                $("#upload-progress-bar-parent").append(progressHtml);
 
-                const uploadPromise = uploadFile("server_upload", file, path, i, (progress) => {
-                  $(`#upload-progress-bar-${i + 1}`).attr('aria-valuenow', progress)
-                  $(`#upload-progress-bar-${i + 1}`).css('width', progress + '%');
-                });
+                const uploadPromise = uploadFile(
+                  "server_upload",
+                  file,
+                  path,
+                  i,
+                  (progress) => {
+                    $(`#upload-progress-bar-${i + 1}`).attr(
+                      "aria-valuenow",
+                      progress
+                    );
+                    $(`#upload-progress-bar-${i + 1}`).css(
+                      "width",
+                      progress + "%"
+                    );
+                  }
+                );
                 uploadPromises.push(uploadPromise);
               }
 
-
               await Promise.all(uploadPromises);
               setTimeout(() => {
                 hideUploadBox();
               }, 2000);
-
-            }
-          }
-        }
+            },
+          },
+        },
       });
     });
   }
 
   async function calculateFileHash(file) {
     const arrayBuffer = await file.arrayBuffer();
-    const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer);
+    const hashBuffer = await crypto.subtle.digest("SHA-256", arrayBuffer);
     const hashArray = Array.from(new Uint8Array(hashBuffer));
-    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    const hashHex = hashArray
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
 
     return hashHex;
   }
 
   function getDirView(event) {
     let path = event.target.parentElement.getAttribute("data-path");
-    if (document.getElementById(path).classList.contains('clicked')) {
+    if (document.getElementById(path).classList.contains("clicked")) {
       return;
     } else {
       getTreeView(path);
     }
-
   }
   async function getTreeView(path) {
     const token = getCookie("_xsrf");
     let res = await fetch(`/api/v2/servers/${serverId}/files`, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'X-XSRFToken': token
+        "X-XSRFToken": token,
       },
-      body: JSON.stringify({ "page": "files", "path": path }),
+      body: JSON.stringify({ page: "files", path: path }),
     });
     let responseData = await res.json();
     if (responseData.status === "ok") {
       console.log(responseData);
       process_tree_response(responseData);
-
     } else {
-
       bootbox.alert({
         title: responseData.status,
-        message: responseData.error
+        message: responseData.error,
       });
     }
   }
@@ -858,12 +830,12 @@
         //continue is not valid in for each. Return acts as a continue.
         return;
       }
-      let checked = ""
+      let checked = "";
       let dpath = value.path;
       let filename = key;
       if (value.dir) {
         if (value.excluded) {
-          checked = "checked"
+          checked = "checked";
         }
         text += `<li class="tree-item" id="${dpath}li" data-path="${dpath}">
                             \n<div id="${dpath}" data-path="${dpath}" data-name="${filename}" class="tree-caret tree-ctx-item tree-folder">
@@ -873,14 +845,14 @@
                             <i style="color: var(--info);" class="far fa-folder-open"></i>
                             ${filename}
                             </span>
-                            </input></div></li>`
+                            </input></div></li>`;
       } else {
         text += `<li
                         class="d-block tree-ctx-item tree-file"
                         data-path="${dpath}"
                         data-name="${filename}"
                         onclick="clickOnFile(event)" id="${dpath}li"><input type='checkbox' class="checkBoxClass d-none file-check" name='root_path' value="${dpath}" ${checked}><span style="margin-right: 6px;">
-                        <i class="far fa-file"></i></span></input>${filename}</li>`
+                        <i class="far fa-file"></i></span></input>${filename}</li>`;
       }
     });
     if (!response.data.root_path.top) {
@@ -888,237 +860,259 @@
     }
     if (response.data.root_path.top) {
       try {
-        document.getElementById('main-tree-div').innerHTML += text;
-        document.getElementById('main-tree').parentElement.classList.add("clicked");
+        document.getElementById("main-tree-div").innerHTML += text;
+        document
+          .getElementById("main-tree")
+          .parentElement.classList.add("clicked");
       } catch {
-        document.getElementById('files-tree').innerHTML = text;
+        document.getElementById("files-tree").innerHTML = text;
       }
     } else {
       try {
-        document.getElementById(path + "span").classList.add('tree-caret-down');
+        document.getElementById(path + "span").classList.add("tree-caret-down");
         document.getElementById(path).innerHTML += text;
         document.getElementById(path).classList.add("clicked");
       } catch {
-        console.log("Bad")
+        console.log("Bad");
       }
 
       var toggler = document.getElementById(path + "span");
 
-      if (toggler.classList.contains('files-tree-title')) {
-        document.getElementById(path + "span").addEventListener("click", function caretListener() {
-          document.getElementById(path + "ul").classList.toggle("d-block");
-          document.getElementById(path + "span").classList.toggle("tree-caret-down");
-        });
+      if (toggler.classList.contains("files-tree-title")) {
+        document
+          .getElementById(path + "span")
+          .addEventListener("click", function caretListener() {
+            document.getElementById(path + "ul").classList.toggle("d-block");
+            document
+              .getElementById(path + "span")
+              .classList.toggle("tree-caret-down");
+          });
       }
     }
-    setTimeout(function () { setTreeViewContext() }, 1000);
+    setTimeout(function () {
+      setTreeViewContext();
+    }, 1000);
   }
   function getToggleMain(event) {
-    path = event.target.parentElement.getAttribute('data-path');
+    path = event.target.parentElement.getAttribute("data-path");
     document.getElementById("files-tree").classList.toggle("d-block");
     document.getElementById(path + "span").classList.toggle("tree-caret-down");
     document.getElementById(path + "span").classList.toggle("tree-caret");
   }
 
   function setTreeViewContext() {
-    var treeItems = Array.from(document.getElementsByClassName('tree-ctx-item'));
+    var treeItems = Array.from(
+      document.getElementsByClassName("tree-ctx-item")
+    );
 
-    treeItems.forEach(item => {
-      if ([
-        'iPad Simulator',
-        'iPhone Simulator',
-        'iPod Simulator',
-        'iPad',
-        'iPhone',
-        'iPod'
-      ].includes(navigator.platform)
+    treeItems.forEach((item) => {
+      if (
+        [
+          "iPad Simulator",
+          "iPhone Simulator",
+          "iPod Simulator",
+          "iPad",
+          "iPhone",
+          "iPod",
+        ].includes(navigator.platform) ||
         // iPad on iOS 13 detection
-        || (navigator.userAgent.includes("Mac") && "ontouchend" in document)) {
+        (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+      ) {
         item.addEventListener("touchstart", touchstart, false);
         item.addEventListener("touchend", touchend, false);
       }
-      item.addEventListener('contextmenu', function contextListener(event) {
+      item.addEventListener("contextmenu", function contextListener(event) {
         event.preventDefault();
-        var ctxmenuPath = event.target.getAttribute('data-path');
-        var ctxmenuName = event.target.getAttribute('data-name');
+        var ctxmenuPath = event.target.getAttribute("data-path");
+        var ctxmenuName = event.target.getAttribute("data-name");
         if (!ctxmenuPath) {
-          console.log({ 'event.target': event.target, ctxmenuPath });
+          console.log({ "event.target": event.target, ctxmenuPath });
           return;
         }
-        $('#renameItem').show();
+        $("#renameItem").show();
 
-        var isDir = event.target.classList.contains('files-tree-title');
-        $('#createFile').toggle(isDir);
-        $('#createDir').toggle(isDir);
-        $('#deleteDir').toggle(isDir);
-        $('#upload').toggle(isDir);
+        var isDir = event.target.classList.contains("files-tree-title");
+        $("#createFile").toggle(isDir);
+        $("#createDir").toggle(isDir);
+        $("#deleteDir").toggle(isDir);
+        $("#upload").toggle(isDir);
 
-        document.getElementById('context-title').innerHTML = ctxmenuName;
+        document.getElementById("context-title").innerHTML = ctxmenuName;
 
-        var isFile = event.target.classList.contains('tree-file');
-        $('#deleteFile').toggle(isFile);
-        $('#downloadFile').toggle(isFile);
+        var isFile = event.target.classList.contains("tree-file");
+        $("#deleteFile").toggle(isFile);
+        $("#downloadFile").toggle(isFile);
 
-        if (event.target.classList.contains('root-dir')) {
-          $('#createFile').show();
-          $('#createDir').show();
-          $('#renameItem').hide();
-          $('#deleteDir').hide();
-          $('#deleteFile').hide();
-          $('#downloadFile').hide();
-          $('#upload').show();
+        if (event.target.classList.contains("root-dir")) {
+          $("#createFile").show();
+          $("#createDir").show();
+          $("#renameItem").hide();
+          $("#deleteDir").hide();
+          $("#deleteFile").hide();
+          $("#downloadFile").hide();
+          $("#upload").show();
         }
-        if (event.target.textContent.endsWith('.zip')) {
-          $('#unzip').show();
+        if (event.target.textContent.endsWith(".zip")) {
+          $("#unzip").show();
         } else {
-          $('#unzip').hide();
+          $("#unzip").hide();
         }
 
         var clientX = event.clientX;
         var clientY = event.clientY;
 
-        document.getElementById('files-tree-nav-content')
-          .setAttribute('data-path', ctxmenuPath);
-        document.getElementById('files-tree-nav-content')
-          .setAttribute('data-name', ctxmenuName);
+        document
+          .getElementById("files-tree-nav-content")
+          .setAttribute("data-path", ctxmenuPath);
+        document
+          .getElementById("files-tree-nav-content")
+          .setAttribute("data-name", ctxmenuName);
         document.getElementById("files-tree-nav").style.display = "flex";
         document.getElementById("files-tree-nav").style.position = "fixed";
-        domRect = document.getElementById("files-tree-nav").getBoundingClientRect();
-        sum = (clientY + domRect['height']) - window.innerHeight
-        if (domRect['height'] + clientY > window.innerHeight) {
-          clientY = clientY - sum
+        domRect = document
+          .getElementById("files-tree-nav")
+          .getBoundingClientRect();
+        sum = clientY + domRect["height"] - window.innerHeight;
+        if (domRect["height"] + clientY > window.innerHeight) {
+          clientY = clientY - sum;
         }
-        document.getElementById("files-tree-nav").style.top = clientY + 'px';
-        document.getElementById("files-tree-nav").style.left = clientX + 'px';
-      })
-    })
+        document.getElementById("files-tree-nav").style.top = clientY + "px";
+        document.getElementById("files-tree-nav").style.left = clientX + "px";
+      });
+    });
   }
 
-  document.addEventListener('click', function (e) {
-    let inside = (e.target.closest('#files-tree-nav'));
-    let contextMenu = document.getElementById('files-tree-nav');
+  document.addEventListener("click", function (e) {
+    let inside = e.target.closest("#files-tree-nav");
+    let contextMenu = document.getElementById("files-tree-nav");
     if (!inside) {
-      contextMenu.setAttribute('style', 'display:none');
+      contextMenu.setAttribute("style", "display:none");
     } else {
-      contextMenu.setAttribute('style', 'display:none');
+      contextMenu.setAttribute("style", "display:none");
     }
   });
 
   if (webSocket) {
-    webSocket.on('close_upload_box', function (close_upload_box) {
+    webSocket.on("close_upload_box", function (close_upload_box) {
       hideUploadBox();
     });
   }
   function hideUploadBox() {
     if (!uploadWaitDialog) return;
-    uploadWaitDialog.modal('hide');
+    uploadWaitDialog.modal("hide");
   }
 
   function createFileE(event) {
-    bootbox.prompt("{% raw translate('serverFiles', 'createFileQuestion', data['lang']) %}", function (result) {
-      path = event.target.parentElement.getAttribute('data-path');
-      name = event.target.parentElement.getAttribute('data-name');
-      if (!result) return;
+    bootbox.prompt(
+      "{% raw translate('serverFiles', 'createFileQuestion', data['lang']) %}",
+      function (result) {
+        path = event.target.parentElement.getAttribute("data-path");
+        name = event.target.parentElement.getAttribute("data-name");
+        if (!result) return;
 
-      createFile(path, result, function () {
-        getTreeView()
-        document.getElementById('files-tree-nav').style.display = 'none';
-      });
-    })
+        createFile(path, result, function () {
+          getTreeView();
+          document.getElementById("files-tree-nav").style.display = "none";
+        });
+      }
+    );
   }
 
   function createDirE(event) {
-    bootbox.prompt("{% raw translate('serverFiles', 'createDirQuestion', data['lang']) %}", function (result) {
-      path = event.target.parentElement.getAttribute('data-path');
-      name = event.target.parentElement.getAttribute('data-name');
-      if (!result) return;
+    bootbox.prompt(
+      "{% raw translate('serverFiles', 'createDirQuestion', data['lang']) %}",
+      function (result) {
+        path = event.target.parentElement.getAttribute("data-path");
+        name = event.target.parentElement.getAttribute("data-name");
+        if (!result) return;
 
-      createDir(path, result, function () {
-        getTreeView()
-        document.getElementById('files-tree-nav').style.display = 'none';
-      });
-    })
+        createDir(path, result, function () {
+          getTreeView();
+          document.getElementById("files-tree-nav").style.display = "none";
+        });
+      }
+    );
   }
   function downloadFileE(event) {
-    path = event.target.parentElement.getAttribute('data-path');
-    name = event.target.parentElement.getAttribute('data-name');
-    encoded_path = encodeURIComponent(path)
-    encoded_name = encodeURIComponent(name)
+    path = event.target.parentElement.getAttribute("data-path");
+    name = event.target.parentElement.getAttribute("data-name");
+    encoded_path = encodeURIComponent(path);
+    encoded_name = encodeURIComponent(name);
     window.location.href = `/panel/download_file?id=${serverId}&path=${encoded_path}&name=${encoded_name}`;
   }
 
   function renameItemE(event) {
-    path = event.target.parentElement.getAttribute('data-path');
-    name = event.target.parentElement.getAttribute('data-name');
+    path = event.target.parentElement.getAttribute("data-path");
+    name = event.target.parentElement.getAttribute("data-name");
     bootbox.prompt({
-      title: "{% raw translate('serverFiles', 'renameItemQuestion', data['lang']) %}",
+      title:
+        "{% raw translate('serverFiles', 'renameItemQuestion', data['lang']) %}",
       value: name,
       callback: function (result) {
         if (!result) return;
         renameItem(path, result, function () {
-          getTreeView()
-          document.getElementById('files-tree-nav').style.display = 'none';
+          getTreeView();
+          document.getElementById("files-tree-nav").style.display = "none";
         });
-      }
+      },
     });
   }
   function unzipFilesE(event) {
-    path = event.target.parentElement.getAttribute('data-path');
-    console.log(path)
-    unZip(path)
+    path = event.target.parentElement.getAttribute("data-path");
+    console.log(path);
+    unZip(path);
   }
 
   function deleteFileE(event) {
-    path = event.target.parentElement.getAttribute('data-path');
-    name = event.target.parentElement.getAttribute('data-name');
+    path = event.target.parentElement.getAttribute("data-path");
+    name = event.target.parentElement.getAttribute("data-name");
     bootbox.confirm({
       size: "",
-      title: "{% raw translate('serverFiles', 'deleteItemQuestion', data['lang']) %}",
+      title:
+        "{% raw translate('serverFiles', 'deleteItemQuestion', data['lang']) %}",
       closeButton: false,
-      message: "{% raw translate('serverFiles', 'deleteItemQuestionMessage', data['lang']) %}",
+      message:
+        "{% raw translate('serverFiles', 'deleteItemQuestionMessage', data['lang']) %}",
       buttons: {
         confirm: {
           label: "{{ translate('serverFiles', 'yesDelete', data['lang']) }}",
-          className: 'btn-danger'
+          className: "btn-danger",
         },
         cancel: {
           label: "{{ translate('serverFiles', 'noDelete', data['lang']) }}",
-          className: 'btn-link'
-        }
+          className: "btn-link",
+        },
       },
       callback: function (result) {
         if (!result) return;
         deleteItem(path);
-      }
+      },
     });
   }
 
-  getTreeView($('#root_dir').data('path'));
+  getTreeView($("#root_dir").data("path"));
   setTreeViewContext();
 
   function setKeyboard(target) {
-    var handlerName = target.getAttribute('data-handler-name');
-    if (handlerName == 'null') handlerName = null;
+    var handlerName = target.getAttribute("data-handler-name");
+    if (handlerName == "null") handlerName = null;
     editor.setKeyboardHandler(handlerName, () => {
-      if (handlerName == 'ace/keyboard/vim') {
-        require("ace/keyboard/vim").Vim.defineEx('write', 'w', function () {
+      if (handlerName == "ace/keyboard/vim") {
+        require("ace/keyboard/vim").Vim.defineEx("write", "w", function () {
           save();
         });
       }
     });
 
     var nodes = target.parentNode.querySelectorAll("[data-handler-name]");
-    nodes.forEach(node => {
-      node.classList.remove('btn-primary');
-      node.classList.add('btn-secondary');
-    })
+    nodes.forEach((node) => {
+      node.classList.remove("btn-primary");
+      node.classList.add("btn-secondary");
+    });
 
-    target.classList.remove('btn-secondary');
-    target.classList.add('btn-primary');
+    target.classList.remove("btn-secondary");
+    target.classList.add("btn-primary");
   }
-
-
-
 </script>
 <script src="../../static/assets/js/shared/upload.js"></script>
-{% end %}
\ No newline at end of file
+{% end %}