<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= cloudname %> | <%= lang["Admin-Panel"] %></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: auto;
        overflow-x: hidden;
    }

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

    .admin {
            width: 75% ;
            padding: 1%;
            height: auto;
            background-color: #111111;
            border-radius: 50px;
            align-items: center;
            justify-content: center;
    }

    
    h1, h3, h2 {
            font-family: 'Montserrat', sans-serif;
            text-align: center;
            color: #1f74cc;
            line-height: 40%;
        }

        table {
            border-collapse: collapse;
            margin-left: auto;
            margin-right: auto;
            border: 2px solid #555555;
            margin-top: 10px;
        }

        td, th {
            border: 2px solid #555555;
            padding: 3px;
            text-align: center;
            color: #1f74cc;
            font-family: "Montserrat", sans-serif;
        }

        .user-managment {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-column-gap: 10px;
          grid-row-gap: 10px;
          overflow: auto; 
          max-height: 450px;
        }

        .usercard {
          width: auto;
          height: auto;
          background-color: #222222;
          border-radius: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: column nowrap;
        }

        ul {
          color: #1f74cc;
          font-family: "Montserrat", sans-serif;
          font-weight: bold;
        }
        a:link, a:visited, a:hover, a:active {
            color: #1f74cc;
            text-decoration: none;
            background-color: transparent;
        }
        .usercard-links {
          margin-bottom: 10px;
        }

        .username {
          display: flex;
          align-items: center;
        }

        
        button {
            margin: auto;
            height: 30%;
            width: auto;
            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;
            margin-top: 1%;
        }

        button:hover {
            height: 31%;
            width: auto + 1%;
            color:#1f74cc;
            background-color: white;
        }

        form {
            display: flex;
            width: 100%;
            height: 40%;
            align-items: center;
            flex-direction: column;
            margin-top: 5px;
        }
        
        select {
            width: 71%;
            height: 21%;
            display: flex;
            margin: auto;
            text-align: center;
            border-radius: 20px;
            font-size: 20px;
            background-color: #1f74cc;
            color: white;
        } 

        input {
            height: 20%;
            border-radius: 40px;
            border: none;
            display: flex;
            justify-self: center;
            margin: auto;
            font-size: 100%;
            padding-left: 2%;
            margin-top: 1%;
            margin-bottom: 1%;
        }

        form > label {
          display: flex;
            justify-content: center;
            color: #1f74cc;
            font-family: 'Montserrat', sans-serif;
        }

        .other {
          display: flex;
          width: 50%;
          height: auto;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          justify-self: center;
          margin: auto;
          }

          .footer {
            width: 40%;
            height: 3%;
            background-color: black;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px auto auto auto;
            color: white;
            font-family: 'Montserrat', sans-serif;
        }
        @media screen and (max-width: 426px) {
            .admin {
                width: 95%;
                height: 25%;
            }

            .footer {
                width: 100%;
                font-size: 12px;
            }
        }
  </style>
  <div class="flex-container">
    <div class="admin">
      <h1><%= cloudname %></h1>
      <h2 class="subtitle"><%= lang["Admin-Panel"] %></h2>
      <div class="stats">
        <h3><%= lang["Stats"] %></h3>
        <table class="statstable">
          <thead>
            <th><%= lang["Name"] %></th>
            <th><%= lang["Value"] %></th>
          </thead>
          <tbody>
            <tr>
              <td><%= lang["Ram-Usage"] %></td>
              <td><%= Math.round(process.memoryUsage().heapUsed / 1024 / 1024) %> MB </td>
            </tr>
            <tr>
              <td><%= lang["CPU-Usage"] %></td> 
              <td><%= cpuUsage.toString() %> % </td> 
            </tr>
            <tr>
              <td><%= lang["Uptime"] %></td>
              <td><%= ms(ms(Math.floor(process.uptime()).toString() + "s"), {long: true}) %></td> 
            </tr>
            <tr>
              <td><%= lang["Version"] %></td>
              <% if (packages.version == stableVersion) { %> 
              <td>v<%= packages.version %> </td>
              <% } else { %>
                <td>v<%= packages.version %> | <a href=<%= "https://github.com/DaneeSkripter/DaneeCloud/releases/tag/v" + stableVersion %>>v<%= stableVersion %> <%= lang["Is-Available"] %>!</a></td> 
            <% } %> 
            </tr>
          </tbody>
        </table>
      </div>
      <h3><%= lang["User-Managment"] %></h3>
      <div class="user-managment">
        <% for (let user of users) { %>
          <% let link = "/deleteaccount/" + user.username %>
          <% let link2 = "/editrole/" + user.username %> 
          <% let link4 = "/editaccount/" + user.username %> 
          <% let userrole = user.role %>
          <% let isverified; %>    
          <% if (user.isVerified) { %>
            <% isverified = lang["Yes"] %>
          <% } else { %>  
            <% isverified = lang["No"] %>
          <% } %>   
            <% let badge = roles.filter((obj) => {return obj.name == user.role})[0].badge   %>
            <% let hashedemail = md5(user.email) %>
            <% let gravatar = `https://www.gravatar.com/avatar/${hashedemail}` %>
        <div class="usercard">
          <h2 class="username"><img src=<%= gravatar %> width="40" height="auto">&nbsp;<%= user.username %> | <img title=<%= user.role %> src=<%= badge %> width="20" height="20"></img></h2>
          <ul>
            <li>Email: <%= user.email %></li>
            <li>Is verified: <%= isverified %></li>
            <% if (config.registerip) { %>
            <li>IP address: <%= user.ip %></li>
            <% } %>
            <li>Created at: <%= user.createdAt %></li>
            <li>Last seen: <%= moment.unix(parseInt(user.lastSeen)).fromNow() %></li>
            <li>Role: <%= user.role %></li>
            </ul>
          <div class="usercard-links">
            <a href=<%= link2 %>><i class="fa-solid fa-address-card"></i></a>&nbsp;<a href=<%= link4 %>><i class="fa-solid fa-user-pen"></i></a>&nbsp;<a href=<%= link %>><i class="fa-solid fa-trash"></i></a>
          </div>
        </div>
        <% } %>
      </div>
      <div class="other">
      <div class="roles">
        <h3><%= lang["Roles"] %></h3>
        <form action="/addrole/">
          <button type="submit"><%= lang["Add-Role"] %></button>
        </form>
        <form action="/delrole/">
          <button type="submit"><%= lang["Remove-Role"] %></button>
        </form>
          <form action="/updaterole/" method="post">
            <select name="role">
              <% for (let role of roles) { %>        
              <option value=<%= role.name %>><%= role.name %> | <%= role.maxStorage %> MB</option>
              <% } %>
            </select>
            <input name="_csrf" value=<%= csrfToken %> type="hidden"/>
            <input type="text" id="maxStorage" name="maxStorage" required placeholder="128 MB"></input>
            <label for="badge"><i class="fa-solid fa-certificate"></i>&nbsp;<%= lang["Badge-URL"] %></label>
            <input type="text", id="badge", name="badge"></input>
            <button type="submit" class="setasdefault"><%= lang["Update-Role"] %></button>
          </form>
      </div>
      <div class="apikeys">
        <h3><%= lang["API-Keys"] %></h2>
        <form action="/addapikey/">
          <button type="submit" class="back"><%= lang["Add-Api-Key"] %></button>
        </form> 
        <table>
          <thead>
            <tr>
              <th><%= lang["API-Key-Name"] %></th>
              <th><%= lang["Actions"] %></th>
            </tr>
          </thead>
          <tbody>
              <% for (let apiKey of apiKeys) { %>
                <% let apiKeyLink = "/delapikey/" + apiKey.name %>
                <tr>
                <td><%= apiKey.name %></td>
                <td><a href=<%= apiKeyLink %>><i class="fa-solid fa-trash"></i></a></td>
              </tr>
              <% } %>
          </tbody>
        </table>
      </div>
    </div>
    </div>
  </div>
  <div class="footer">
    <p><%= cloudname %> ©️ 2022 - 2023 | Developed by <a href="https://github.com/DaneeSkripter">DaneeSkripter</a></p>
</div>
</body>
</html>