<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= cloudname %></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
    body {
            background-image: linear-gradient(to right bottom, #1f74cc, #3c7ed1, #5087d6, #6291db, #729be0, #87a6e4, #9ab1e9, #acbced, #c5cbf1, #dadcf5, #eeedfa, #ffffff);
            width: 100vw;
            height: 100vh;
            margin: 0;
        }

        .flex-container {
            display: flex;
            width: 100%;
            height: 88%;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
        }

        .upload {
            width: 25%;
            height: 40%;
            background-color: #111111;
            border-radius: 50px;
            align-items: center;
            justify-content: center;
            align-items: center;
        }

        .upload > h1, .upload > h2, .upload > img, .upload > h3, h3 {
            font-family: 'Montserrat', sans-serif;
            text-align: center;
            color: #1f74cc;
            line-height: 40%;
        }
        form {
            width: 100%;
            height: 100%;
        }

        .upload > form > label {
            margin: 1% auto;
            height: 10%;
            width: 40%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #1f74cc;
            border-radius: 20px;
            font-size: 20px;
            color: white;
            border: none;
            transition-duration: 0.4s;
            font-family: "Montserrat", sans-serif;
        }

        .upload > form >label:hover {
            height: 11%;
            width: 41%;
            color:#1f74cc;
            background-color: white;
        }

        select {
            width: 41%;
            height: 11%;
            display: flex;
            margin: auto;
            text-align: center;
            border-radius: 20px;
            font-size: 20px;
            background-color: #1f74cc;
            color: white;
        }
        
        progress {
            width: 50%;
            height: 20%;
            display: flex;
            margin: 0 auto -5% auto;
        }
        progress::-webkit-progress-bar {
            background-color: white;
        }
        progress::-webkit-progress-value {
                    background-color: #1f74cc;
                }

                .footer {
            width: 40%;
            height: 3%;
            background-color: black;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
            color: white;
            font-family: 'Montserrat', sans-serif;
        }

        .navbar {
            width: 60%;
            height: 7%;
            background-color: black;
            display: flex;
            border-radius: 50px;
            margin-left: auto;
            margin-right: auto;
            flex-flow: row nowrap;
            justify-content: space-between;
        }
        .navbar > form {
            width: 25%;
            height: 100%;
        }

        .navbar > form > button {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 6% auto;
            width: 80%;
            height: 50%;
            background-color: #1f74cc;
            border-radius: 20px;
            font-size: 20px;
            color: white;
            border: none;
            transition-duration: 0.4s;
            font-family: "Montserrat", sans-serif;
        }

        .navbar > form > button:hover {
            background-color: white;
            color: #1f74cc;
            width: 81%;
            height: 51%;
            }

        a:link, a:visited, a:hover, a:active {
            color: #1f74cc;
            text-decoration: none;
            background-color: transparent;
        }
        .blankspace {
            width: 100%;
            height: 1%;
        }
        /* Laptop support */
        @media screen and (max-width: 1825px) {
            .upload {
                width: 35%;
                height: 50%;
            }
            .footer {
                height: 5%;
            }
            .flex-container {
                height: 86%;
            }
        }
        /* Mobile support */
        @media screen and (max-width: 426px) {
            .upload {
                width: 70%;
                height: 45%;
            }
            .upload > form > label {
                width: 80%;
            }

            select {
                width: 80%;
            }

            .footer {
                width: 100%;
                font-size: 12px;
            }
           progress {
            margin-top: -5%;
           }
           .navbar {
            width: 100%;
           }
           .navbar > form > button {
            margin: 15% auto;
            width: 90%;
            height: 60%;
            font-size: 12px;
           }
           .navbar > form > button:hover {
            width: 91%;
           }
        }
    </style>
    <script>
        function _(el) {
          return document.getElementById(el);
        }
        
        function progressBar() {
          var file = _("file").files[0];
          var select = _("dest").value;
          // alert(file.name+" | "+file.size+" | "+file.type);
          var formdata = new FormData();
          formdata.append("file", file);
          formdata.append("dest", select);
          var ajax = new XMLHttpRequest();
          ajax.upload.addEventListener("progress", progressHandler, false);
          ajax.addEventListener("load", completeHandler, false);
          ajax.addEventListener("error", errorHandler, false);
          ajax.addEventListener("abort", abortHandler, false);
          ajax.open("POST", "/upload/", true); 
          ajax.send(formdata);
        }
        
        
        function progressHandler(event) {
          var percent = (event.loaded / event.total) * 100;
          _("progressBar").value = Math.round(percent);
          _("status").innerHTML = Math.round(percent) + "%";
        }
        
        function completeHandler(event) {
          _("status").innerHTML = event.target.responseText;
          _("progressBar").value = 0; //wil clear progress bar after successful upload
        }
        
        function errorHandler(event) {
          _("status").innerHTML = "Upload Failed";
        }
        
        function abortHandler(event) {
          _("status").innerHTML = "Upload Aborted";
        }
        </script>
        <div class="blankspace"></div>
        <div class="navbar">
            <form action="/myprofile">
                <button type="submit" class="myprofile"><i class="fa-solid fa-user"></i>&nbsp;<%= lang["My-Profile"] %></button>
            </form>
            <form action="/myfiles", method="get">
                <button type="submit" class="myfiles"><i class="fa-solid fa-folder"></i>&nbsp;<%= lang["My-Files"] %></button>
            </form> 
            <% if (isAdmin == true) { %>  
            <form action="/admin", method="get">
                <button type="submit" class="admin"><i class="fa-solid fa-hammer"></i>&nbsp;<%= lang["Admin-Panel"] %></button>
            </form> 
            <% } %>
            <form action="/logout?_method=DELETE" method="POST">
                <button type="submit" class="logout"><i class="fa-solid fa-right-from-bracket"></i>&nbsp;<%= lang["Log-Out"] %></button>
            </form>
        </div>
    <div class="flex-container">
        <div class="upload">
            <h1><%= cloudname %></h1>
            <h2 class="subtitle"><%= lang["Welcome"] %>, <%= username %> <img title=<%= user.role %> src=<%= badge %> width="30" height="30"></img>!</h2>
            <progress value=<%= usedStorage %> max=<%= maxStorage %> ></progress>
            <h3 class="storage"><%= usedStorage %> MB / <%= maxStorage %> MB </h3>
            <form id="form" action="/upload/" method="post" enctype="multipart/form-data" target="_blank">
            <select name="dest" id="dest">
            <option value="/">/</option>
            <% for (let folder of folders) { %>        
              <option value=<%= folder %>><%= "/" + folder %></option>
              <% } %>
            </select>
        <label for="file" ><i class="fa-solid fa-upload"></i>&nbsp;<%= lang["Upload"] %></label>
        <input type="file" name="file" id="file" onchange="progressBar()" required hidden></input>
        <progress id="progressBar" class="progressBar" value="0" max="100"></progress>
        <h3 id="status"></h3>
    </form>
        </div>
    </div>
    <div class="footer">
        <p><%= cloudname %> ©️ 2022 - 2023 | Developed by <a href="https://github.com/DaneeSkripter">DaneeSkripter</a></p>
    </div>
</body>
</html>