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

<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/meta"), {title: member.name }) %>


<body>
  <%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>

  <div class="usercontent">

    <% if(user?.admin || user?.id === member.id){ %>
      <details>
        <summary class="btn-outline-primary">User Menu:</summary>
      
        <% if (!member.discordID && discord && user?.id === member.id) { %>
        <a href="<%=discord%>" class="btn-outline-primary">DC auth</a>
        <% } else if(member.discordID && user?.id === member.id) { %>
        <a class="btn-outline-primary" id="un_discord">Unauth DC!</a>
        <% } %>
        <a href="/users/<%=member.id%>/avatar" class="btn-outline-primary">Upload avatar</a>
        <a class="btn-outline-primary" href="/users/<%=member.id%>/edit" id="toogle">Edit user!</a>
        <script type="module">
          import request from "/js/request.js";
      
          const form = document.getElementById("form");
      
          document.addEventListener("click", async e => {
            if (e.target.id == "delete") {
              const response = await request("/api/users/<%= member.id %>", "DELETE");
              if (response.state !== "DELETED") return
              alert("User is deleted!");
              location.reload()
            } else if (e.target.id == "undelete") {
              const response = await request("/api/users/<%= member.id %>/", "PATCH", {
                deleted: false
              });
              if (response.state == "DELETED") return;
              alert("User is undeleted successfully!");
              location.reload()
            } else if (e.target.id == "un_discord") {
              const response = await fetch("/auth/discord/", {
                method: "DELETE"
              });
              alert(await response.text());
              location.reload()
            } else if (e.target.id.startsWith("last_")) {
              let hideLastSeen = e.target.id.replace("last_", "") == "hide" ? true : false;
              const response = await request("/api/users/<%= member.id %>/", "PATCH", {
                hideLastSeen
              });
              alert(`Last seen is ${!hideLastSeen?"un":""}hided!`);
              location.reload()
      
            }
          });
        </script>
      
        <% if (member.hideLastSeen) {%>
        <a id="last_unhide" class="btn-primary">Unhide last seen! </a>
        <% } else { %>
        <a id="last_hide" class="btn-outline-primary">Hide last seen! </a>
        <% } %>
      
        <% if (member.deleted) {%>
        <h1>This user has been deleted!</h1>
        <a id="undelete" class="btn-primary">Undelete user! </a>
        <% } else if (user?.admin){ %>
        <a id="delete" class="btn-outline-primary">Delete user! </a>
        <% } %>
        <% if (user?.admin) {%>
        <h2>IP adresses of the user:</h2>
        <select>
          <% for(const ip of member.ips) { %>
          <option><%= ip %></option>
          <% } %>
        </select>
      
        <% } %>
      </details>
      <% } %>
      
      
      <div class="userbox" style="justify-content:center;">
      <img style="width:150px;height:150px;border-radius:50%;" src="<%=member.avatar %>">
    </div>

    <% if (member.admin) { %>
    <h2 class="userbox-value" style="align-self: center;">Admin</h2>
    <% } %>

    <% if (member.about?.length) { %>
    <div class="userbox-value" id="about" style="
margin: 10px auto;
box-shadow: 0 0 5px 0 var(--second);
padding: 10px;
width: 100%;
max-width: 800px;
text-align: center;
border-radius: 5px;
background: none;
color: var(--anti);
">
      <%= member.about %>
    </div>
    <script>
      const converter = new showdown.Converter();
      const about = document.getElementById("about")
      about.innerHTML = converter.makeHtml(about.innerText);
    </script>
    <% } %>



    <div class="userbox">
      <h2 class="userbox-title">Name:</h2>
      <h2 class="userbox-value"><%= member.name %></h2>
    </div>
    <div class="userbox">
      <h2 class="userbox-title">Created at:</h2>
      <h2 class="userbox-value"><%= new Date(member.time).toLocaleString() %></h2>
    </div>
    <% if(!member.hideLastSeen || user?.admin) {%>
    <div class="userbox">
      <h2 class="userbox-title">Last seen at:</h2>
      <h2 class="userbox-value"><%= new Date(member.lastSeen).toLocaleString() %></h2>
    </div>
    <% } %>
    <div class="userbox">
      <h2 class="userbox-title">Message:</h2>
      <a class="userbox-value" href="/search/messages?authorID=<%= member.id %>">
        <%= counts.message %>
      </a>
    </div>
    <div class="userbox">
      <h2 class="userbox-title">Thread:</h2>
      <a class="userbox-value" href="/search/threads?authorID=<%= member.id %>">
        <%= counts.thread %>
      </a>
    </div>
  </div>
  <%- include(dataset.getFile(dataset.theme.codename +"/views/extra/footer")) %>

</body>

</html>