<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap" rel="stylesheet">
  <title>IMPERIAL | Admin panel</title>
  <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
  <link rel="stylesheet" href="/assets/css/reallyGlobal.css?v=1">
  <link rel="stylesheet" href="/assets/css/secondary.css">
  <link rel="stylesheet" href="/assets/css/account.css">
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@6.2.7/animations/shift-away.css" />
  <script src="https://unpkg.com/@popperjs/core@2"></script>
  <script src="https://unpkg.com/tippy.js@6"></script>
</head>

<body>
  <nav>
    <ul id="navythingy">
      <li>
        <a href="/admin" class="noOpacity">
          <img src="/assets/img/Logo.png" alt="IMPERIAL's logo" class="logo" draggable="false">
        </a>
      </li>
      <li>
        <a href="#home" class="tooltip" data-tippy-content="General">
          <i class="fas fa-house-user"></i>
        </a>
      </li>
      <li>
        <a href="#documents" class="tooltip" data-tippy-content="Documents">
          <i class="fas fa-file-archive"></i>
        </a>
      </li>
      <li>
        <a href="#codes" class="tooltip" data-tippy-content="Codes">
          <i class="fas fa-qrcode"></i>
        </a>
      </li>
      <li>
        <a href="#api" class="tooltip" data-tippy-content="API">
          <i class="fas fa-code"></i>
        </a>
      </li>
      <div class="logout">
        <a href="/admin" class="logoutBtn tooltip" data-tippy-content="Go back to admin panel">
          <i class="fas fa-sign-out-alt"></i>
        </a>
      </div>
    </ul>
  </nav>
  <main>
    <h1>Viewing user <%= user.name %></h1>
    <div class="stat-tiles">
      <div class="stat-tile stat-pfp">
        <img src="<%= user.icon %>" alt="<%= user.name %>'s pfp" draggable="false">
      </div>
      <div class="stat-tile">
        <h6>User ID</h6>
        <span class="stat">#<%= user.userId %></span>
      </div>
      <div class="stat-tile">
        <h6>Documents made</h6>
        <span class="stat"><%= user.documentsMade %></span>
      </div>
      <div class="stat-tile">
        <h6>Confirmed</h6>
        <span class="stat"><%= user.confirmed %></span>
      </div>
      <div class="stat-tile">
        <h6>Banned</h6>
        <span class="stat"><%= user.banned %></span>
      </div>
    </div>
    <h2>Acouple of buttons beep boop</h2>
    <form action="/admin/changeConfirm" method="POST">
      <input type="text" id="status" name="status" style="display: none;" value="<%= user.confirmed %>">
      <input type="text" id="_id" name="_id" style="display: none;" value="<%= user._id %>">
      <button type="submit" class="alignedLeftBtn tooltip"
        data-tippy-content="<%= !user.confirmed ? 'Confirm users account' : 'Unconfirm users account'%>"><%= !user.confirmed ? 'Confirm user' : 'Unconfirm user'%></button>
    </form>
    <form action="/admin/changeMemberPlus" method="POST">
      <input type="text" id="status" name="status" style="display: none;" value="<%= user.memberPlus %>">
      <input type="text" id="_id" name="_id" style="display: none;" value="<%= user._id %>">
      <button class="alignedLeftBtn tooltip" type="submit"
        data-tippy-content="<%= !user.memberPlus ? 'Gives user Member+' : 'Removes users Member+'%>"><%= !user.memberPlus ? 'Give Member+' : 'Remove Member+'%></button>
    </form>
    <form action="/admin/changeBanned" method="POST">
      <input type="text" id="status" name="status" style="display: none;" value="<%= user.banned %>">
      <input type="text" id="_id" name="_id" style="display: none;" value="<%= user._id %>">
      <button class="alignedLeftBtn tooltip" type="submit"
        data-tippy-content="<%= !user.banned ? 'Ban users account' : 'Unban users account'%>"><%= !user.banned ? 'Ban user' : 'Unban user'%></button>
    </form>
    <h2 id="home">general</h2>
    <div>
      <label for="email">Their email:</label>
      <div class="space"></div>
      <div class="tile"><i class="far fa-envelope"></i></div>
      <input type="text" id="email" name="email" value="<%= user.email %>" readonly>
    </div>
    <div>
      <label for="memberPlus">Their account status:</label>
      <div class="space"></div>
      <div class="tile"><i class="fas fa-plus"></i></div>
      <input type="text" id="memberPlus" name="memberPlus" value="<%= user.memberPlus ? "Member+" : "Member" %>"
        readonly disabled>
    </div>
    <div>
      <label for="inviteCode">Their invite code:</label>
      <div class="space"></div>
      <div class="tile"><i class="fas fa-qrcode"></i></div>
      <input type="text" id="inviteCode" name="inviteCode" value="<%= user.betaCode %>" readonly disabled>
    </div>
    <div>
      <form action="/account/changePfp" id="pfpForm" method="POST">
        <label for="pfp">Their profile picture:</label>
        <div class="space"></div>
        <div class="tile"><i class="fas fa-user"></i></div>
        <input type="text" id="pfp" class="withBtn" name="pfp" placeholder="Enter your Github name" required>
        <button type="submit" class="inlineBtn">Change</button>
      </form>
      <span class="clickable" id="platformBtn" onclick="togglePfpType('gravatar')">Or use gravatar</span>
    </div>
    <!-- DOCUMENTS  -->
    <h2 id="documents">Their Documents</h2>
    <% if (documents[0]) { %>
    <form action="/api/purgeDocuments?_method=DELETE" method="POST">
      <button type="submit" class="tooltip alignedLeftBtn" data-tippy-content="Purge all of your documents">Purge
        Documents</button>
    </form>
    <% documents.forEach(document => { %>
    <div id="<%= document.URL %>">
      <a href="/p/<%= document.URL %>" class="noOpacity">
        <div class="tile"><i class="fas fa-file-alt"></i></div>
        <input type="text" name="documentInfo" class="document" value="<%= document.URL %>" readonly>
      </a>
      <div class="secondaryTiles">
        <% if (!document.instantDelete) { %>
        <div class="secondaryTile infoTip"
          data-tippy-content="Deleting <%= new Date(document.deleteDate).getMonth() + 1 %>/<%= new Date(document.deleteDate).getDate() %>/<%= new Date(document.deleteDate).getFullYear() %>">
          <i class="fas fa-info"></i>
        </div>
        <% } else { %>
        <div class="secondaryTile infoTip" data-tippy-content="Deletes after being viewed"><i class="fas fa-info"></i>
        </div>
        <% } %>
        <div class="secondaryTile infoTip danger deleteDocument" onclick="deleteDocument('<%= document.URL %>')"
          data-tippy-content="Delete document"><i id="<%= document.URL %>-icon" class="fas fa-trash"></i>
        </div>

        <% if (document.encrypted) { %>
        <div class="secondaryTile infoTip key" data-tippy-content="Password protected"><i class="fas fa-key"></i>
        </div>
        <% } %>
      </div>
    </div>
    <% }) %>
    <% } else { %>
    <span>User hasn't made any recent documents!</span>
    <% } %>
    <div class="containAllMyShitPlease">
      <div id="documentSettings">
        <h2>Document settings</h2>
        <div>
          <div class="checkbox-container">
            Clipboard
            <div class="checkbox-description">Let IMPERIAL automatically paste your clipboard</div>
          </div>
          <div class="checkbox">
            <label class="switch">
              <input name="clipboard" type="checkbox" id="clipboard" <%= user.settings.clipboard ? 'checked' : null %>>
              <span class="slider round"></span>
            </label>
          </div>
        </div>
        <div class="space"></div>
        <br>
        <div class="dumbline"></div>
        <div>
          <div class="checkbox-container">
            Longer URLs
            <div class="checkbox-description">Create 26 character URLs instead of 8</div>
          </div>
          <div class="checkbox">
            <label class="switch">
              <input name="longerUrls" type="checkbox" id="longerUrls"
                <%= user.settings.longerUrls ? 'checked' : null %>>
              <span class="slider round"></span>
            </label>
          </div>
        </div>
        <div class="space"></div>
        <br>
        <div class="dumbline"></div>
        <div>
          <div class="checkbox-container">
            Instant Delete
            <div class="checkbox-description">Instantly delete the document after being viewed</div>
          </div>
          <div class="checkbox">
            <label class="switch">
              <input name="instantDelete" type="checkbox" id="instantDelete"
                <%= user.settings.instantDelete ? 'checked' : null %>>
              <span class="slider round"></span>
            </label>
          </div>
        </div>
        <div class="space"></div>
        <br>
        <div class="dumbline"></div>
        <div>
          <div class="checkbox-container">
            Encrypted
            <div class="checkbox-description">Encrypt your document with a password and aes256 encryption</div>
          </div>
          <div class="checkbox">
            <label class="switch">
              <input name="encrypted" type="checkbox" id="encrypted" <%= user.settings.encrypted ? 'checked' : null %>>
              <span class="slider round"></span>
            </label>
          </div>
        </div>
        <br>
        <div class="space"></div>
        <div class="dumbline"></div>
        <div>
          <div class="checkbox-container">
            Image embed
            <div class="checkbox-description">Have a sneak peak with an image through Open Graph embeds</div>
          </div>
          <div class="checkbox">
            <label class="switch">
              <input name="imageEmbed" type="checkbox" id="imageEmbed"
                <%= user.settings.imageEmbed ? 'checked' : null %>>
              <span class="slider round"></span>
            </label>
          </div>
        </div>
        <br>
        <div class="dumbline"></div>
        <div class="space"></div>
        <div>
          <div class="checkbox-container">
            Expiration
            <div class="checkbox-description">How long do you want your document to last?</div>
          </div>
          <div class="checkbox">
            <select name="expiration" id="expiration">
              <option value="<%= user.settings.expiration%>" selected><%= user.settings.expiration%></option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
            </select>
          </div>
        </div>
        <br>
        <br>
        <button onclick="saveUserSettings()" id="userSaveBtn" class="alignedLeftBtn">Save</button>
      </div>
    </div>
    <!-- INVITE CODES -->
    <h2 id="codes">Their invite codes</h2>
    <form action="/admin/giveCode" method="POST">
      <input type="text" id="_id" name="_id" style="display: none;" value="<%= user._id %>">

      <button type="submit" class="tooltip alignedLeftBtn" data-tippy-content="Create user an invite code">Create
        invite</button>
    </form>
    <% user.codes.forEach(code => { %>
    <div>
      <div class="tile"><i class="fas fa-qrcode"></i></div>
      <input type="text" name="code" value="<%= code.code %>" readonly>
      <div class="secondaryTiles">
        <div class="secondaryTile codeTile tooltip" data-tippy-content="Copy"
          onclick="copyThisPlease('https://www.imperialb.in/register?inviteCode=<%= code.code %>')">
          <i id="https://www.imperialb.in/register?inviteCode=<%= code.code %>-icon" class="fas fa-copy"></i>
        </div>
      </div>
    </div>
    <% }) %>

    <!-- API STUFF -->
    <h2 id="api">API</h2>
    <div>
      <label for="apiToken">API Token:</label>
      <div class="space"></div>
      <div class="tile"><i class="fas fa-fingerprint"></i></div>
      <input type="text" id="apiToken" class="sensitive token" name="apiToken" value="<%= user.apiToken %>" readonly>
      <div class="secondaryTile codeTile tooltip" data-tippy-content="Copy"
        onclick="copyThisPlease('<%= user.apiToken %>')">
        <i id="<%= user.apiToken %>-icon" class="fas fa-copy"></i>
      </div>
    </div>
    <div>
      <a href="/api/getShareXConfig/<%= user.apiToken %>" class="noOpacity" download>
        <button>Download ShareX Config</button>
      </a>
    </div>

    <h2 id="integrations">Integrations</h2>
    <h3>Discord integration</h3>
    <div>
      <br>
      <% if (user.discordId) { %>
      <span class="integration">User is linked to Discord ID #<%= user.discordId %>!</span>
      <br><br>
      <% } else { %>
      <span class="integration">User has not yet linked their discord!</span>
      <br><br>
      <% } %>
    </div>
    <h3>GitHub integration</h3>
    <br>
    <% if (user.githubAccess) { %>
    <span class="integration">User has linked their Github account!</span>
    <br><br>
    <% } else { %>
    <span class="integration">User has not yet linked their Github!</span> <br>
    <br><br>
    <% } %>
    <br><br>
  </main>
  <script src="https://kit.fontawesome.com/ec3f0c8487.js" crossorigin="anonymous"></script>
  <script>
    tippy('.tooltip', {
      arrow: true,
      animation: 'shift-away',
      placement: 'right'
    })
    tippy('.infoTip', {
      animation: 'shift-away',
      placement: 'top'
    })
    function saveUserSettings() {
      const userSaveBtn = document.getElementById('userSaveBtn');
      userSaveBtn.innerHTML = 'Saving...'
      userSaveBtn.disabled = true;
      // uwu
      const body = {
        clipboard: document.getElementById('clipboard').checked,
        longerUrls: document.getElementById('longerUrls').checked,
        instantDelete: document.getElementById('instantDelete').checked,
        encrypted: document.getElementById('encrypted').checked,
        expiration: Number(document.getElementById('expiration').value),
        imageEmbed: document.getElementById('imageEmbed').checked
      }
      const options = {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(body)
      }
      fetch('/admin/updateUser/<%= user._id %>', options)
        .then(parsePlease => parsePlease.json())
        .then(res => {
          if (res.success) {
            userSaveBtn.innerHTML = 'Saved!'
            setTimeout(() => {
              userSaveBtn.innerHTML = 'Save'
              userSaveBtn.disabled = false;
            }, 1500)
          } else {
            console.error(res)
            userSaveBtn.innerHTML = 'Failed!'
          }
        })
        .catch(err => {
          console.error(err)
          userSaveBtn.innerHTML = 'Failed!'
        })
    }
  </script>
</body>

</html>