<!doctype>
<html>
  <head>
    <title>Home | <%- client.user.username %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  </head>
  <body>
    

  <nav class="bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <img width="40" height="40" class="rounded-full" src="https://media.discordapp.net/attachments/819925637678366720/855439668844560394/image_18.png" alt="Workflow">
          </div>
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline space-x-4">
              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
              <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
              <%if(!req.user) { %>
              <a href="/login" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>
              <%}else{%>
              <a href="/add" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Add new bot</a>
              <a href="/user/<%- req.user.id %>" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medioum"><%- req.user.username %>#<%- req.user.discriminator %></a>
              <%}%>
            </div>
          </div>
        </div>
          
        <div class="-mr-2 flex md:hidden">
          <!-- Mobile menu button -->
          <button onclick="toggleNavbar()" type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-700 focus:ring-blue-400" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!--
              Heroicon name: outline/menu

              Menu open: "hidden", Menu closed: "block"
            -->
            <svg id="open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <!--
              Heroicon name: outline/x

              Menu open: "block", Menu closed: "hidden"
            -->
            <svg id="x" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="hidden" id="mobile-menu">
      <div class="px-2 font-bold pt-2 pb-3 space-y-1 sm:px-3">
        <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
        
        <%if(!req.user) {%>
        <a href="/login" class="font-medium text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base">Login</a>
        <%}else{%>
        <a href="/add" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Add new bot</a>
        <a href="/user/<%-req.user.id%>" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"><%- req.user.username %>#<%- req.user.discriminator %></a>
        <%}%>
      </div>
    </div>
  </nav>
    
    <div class="head p-8 pt-11">
      <div class="flex justify-center sm:flex-row flex-col">
        <div class="sm:p-5">
          <img alt="bau bawang" width="400" height="400" src="https://media.discordapp.net/attachments/850945648056598568/855459938418950194/Tanpa_judul_5.png">
        </div>
        <div class="sm:p-5">
          <h1 class="text-xl text-center sm:mt-2 mt-11">Find bot's for your server now!</h1>
          <input type="text" placeholder="Search bot" autocomplete="off" class="focus:outline-none p-2 font-semibold text-gray-600 w-full placeholder-gray-500 placeholder-opacity-75 mt-4 rounded-lg">
          <button class="p-2 mt-4 focus:outline-none focus:ring-2 focus:ring-gray-400 font-medium bg-indigo-600 rounded-lg">Search</button>
        </div>
      </div>
    </div>
    
    <div class="bodyTopList">
      <h1 class="text-4xl mt-6 text-center font-semibold">Top vote</h1>
      <div class="flex p-7 mt-2 flex-col sm:flex-row">
        <% allData.map(x => x.data).filter(x => x.status == true).map(x => x).sort(function(a,b){ return parseFloat(b.vote) - parseFloat(a.vote) }).slice(0,4).map((x,i) => { %>
        <div class="sm:m-2 mt-4 p-4 rounded-lg card">
          <img width="120" height="120" class="rounded-full mx-auto shadow-md" src="<%- client.users.cache.get(x.id).displayAvatarURL({format:"png", size:2048}) %>">
          <br>
          <center><a href="/vote/<%- x.id %>" style="font-size:13px;background-color:#5865F2;" class="font-bold text-center rounded-sm px-1"><i class="fas fa-chevron-up"></i> <%- x.vote %> votes</a></center>
          <h1 style="font-weight:600;" class="text-2xl sm:text-xl text-center mt-2"><%- client.users.cache.get(x.id).username %></h1>
          <br><div style="height:80px;overflow-y:scroll;" class="mb-4 shortDecs py-3">
            <p style="font-size:15px;color:rgba(225, 225, 225, 0.6);" class="text-center"><%- x.sdecs %></p>
          </div>
          <hr><br>
          <div class="flex flex-row">
            <div class="w-full m-2">
              <a class="block p-1 rounded-md text-center bg-purple-500" href="/bot/<%- x.id %>">View</a>
            </div>
            <div class="w-full m-2">
              <a class="block p-1 rounded-md text-center bg-purple-500" href="<%- x.invite %>">Invite</a>
            </div>
          </div>
        </div>
        <% }) %>
      </div>
      <a href="#" class="block bg-gray-700 py-4 text-sm sm:text-xl font-semibold text-center">See all bots from the top vote order</a>
    </div>

    <div class="bodyRandomList"><br>
      <h1 class="text-3xl mt-6 text-center font-semibold">Random bot's</h1>
      <div class="flex sm:grid sm:grid-cols-4 sm:gap-4 p-7 mt-2 flex-col sm:flex-row">
        <% allData.map(x => x.data).filter(x => x.status == true).map(x => x).map(x => { %>
        <div class="sm:m-2 mt-4 p-4 rounded-lg card">
          <img width="120" height="120" class="rounded-full mx-auto shadow-md" src="<%- client.users.cache.get(x.id).displayAvatarURL({format:"png", size:2048}) %>" alt="tayo">
          <br>
          <center><a href="/vote/<%- x.id %>" style="font-size:13px;background-color:#5865F2;" class="font-bold text-center rounded-sm px-1"><i class="fas fa-chevron-up"></i> <%- x.vote %> votes</a></center>
          <h1 style="font-weight:600;" class="text-2xl sm:text-xl text-center mt-2"><%- client.users.cache.get(x.id).username %></h1>
          <br><div style="height:80px;overflow-y:scroll;" class="mb-4 shortDesc py-3">
            <p style="font-size:15pxbl;color:rgba(225, 225, 225, 0.5);" class="text-center"><%- x.sdecs %></p>
          </div>
          <hr><br>
          <div class="flex flex-row">
            <div class="w-full m-2">
              <a class="block p-1 rounded-md text-center bg-purple-500" href="/bot/<%- x.id %>">View</a>
            </div>
            <div class="w-full m-2">
              <a class="block p-1 rounded-md text-center bg-purple-500" href="<%- x.invite %>">Invite</a>
            </div>
          </div>
        </div>
        <% }) %>
      </div>
    </div>
    
    <style>
      :root {
        --front:#382039;
        --background:#200f21;
      }
      body {
        color:white;
        font-family:"Open Sans";
        background-color:var(--background);
      }
      .head {
        background-color:var(--front);
        box-shadow:1px 5px 14px rgba(0,0,0,0.3);
      }
      .card {
        background-color:var(--front);
        width:100%;
      }
      input:focus {
        border:2px solid #5865F2;
      }
      input {
        border:2px solid rgba(0,0,0,0);
      }
    </style>
    <script>
      function toggleNavbar() {
        let navbar = document.getElementById("mobile-menu");
        let open = document.getElementById("open");
        let x = document.getElementById("x");
        x.classList.toggle("hidden");
        open.classList.toggle("hidden");
        navbar.classList.toggle("hidden");
      }
    </script>
  </body>
</html>