 <!-- Content -->
 <script>
  let session = 0;
  let afkTime = 0;
  
  function connect() {
    const ws = new WebSocket(`${window.location.href.startsWith("https://") ? "wss" : "ws"}://${window.location.href.replace("http://", "").replace("https://", "").split("/")[0]}/afkwspath`);
    ws.onopen = () => {
      console.log("[WS] Connected to websocket.");
      document.getElementById("coinCountdown").innerHTML = "Please Wait...";
    };
    ws.onmessage = (msg) => {
      let z = JSON.parse(msg.data);
      if (z.type == "count") {
        document.getElementById("coinCountdown").innerHTML = `${z.amount} seconds`;
        afkTime++;
        const hours = Math.floor(afkTime / 3600);
        const minutes = Math.floor((afkTime % 3600) / 60);
        const seconds = afkTime % 60;
        document.getElementById("afkTime").innerHTML = `${hours} hours, ${minutes} minutes, and ${seconds} seconds`;
      } else if (z.type == "coin") {
        session++;
        currentCoins++;
        document.getElementById("sessionEarn").innerHTML = `${session} coins`;
        document.getElementById("currentCoins").innerHTML = `${parseInt("<%= coins %>") + session} coins`;
      }
    };
    ws.onerror = (err) => {
      log.error("[WS] Error connecting to websocket.");
      log.error(err);
      document.getElementById("coinCountdown").innerHTML = "Reconnecting...";
      document.getElementById("sessionEarn").innerHTML = `Reconnecting...`;
      document.getElementById("currentCoins").innerHTML = `Reconnecting...`;
      setTimeout(() => {
        connect();
      }, 750);
    };
    ws.onclose = () => {
      document.getElementById("coinCountdown").innerHTML = "Reconnecting...";
      document.getElementById("sessionEarn").innerHTML = `Reconnecting...`;
      document.getElementById("currentCoins").innerHTML = `Reconnecting...`;
      setTimeout(() => {
        connect();
      }, 750);
    };
  }
  connect();
</script>
<body class="bg-[#10181e]" style="font-family: 'Space Grotesk', sans-serif;">
  <%- include('./components/wrapper') %>
  <div class="md:pl-64 flex flex-col flex-1 h-screen"><%- include('./components/header') %>
    <main class="flex-1 pb-32">
      <div class="py-6">
        <% /* Skeleton loader, lasts about 0.3s to let the page content load */ %>
        <%- include('./components/skeleton') %>
        <div class="hidden max-w-screen-2xl pt-8 mx-auto px-4 sm:px-6 md:px-16" id="content">
          <div class="lg:flex lg:items-center lg:justify-between rounded-3xl mb-8">
            <div class="min-w-0 flex-1">
              <div class="flex">
                <div class="relative">
                  <h2 class="text-xl font-semibold text-white sm:truncate tracking-tight">AFK Page</h2>
                  <p class="text-sm font-normal text-zinc-400">Earn 1 coin for free!</p>
                </div>
              </div>
            </div>
          </div>      
          <div class="flex justify-center border border-white/5 py-32 rounded-3xl">
            <div class="relative">
            <p class="text-white font-semibold text-8xl"><span id="coinCountdown" id="arciotimer"></span></p>
            <code class="text-zinc-400 mt-3 tracking-tight text-xl ">until you earn another
              1 coin
             <span class="hidden" id="arciogainedcoins">0</span></code>
            <p class="hidden">Duration: <span id="sessionDuration">-</span></p>
          </div>
          </div>
        </div>
      </div>
    </main>
    <%- include('./components/footer') %>
  </div>
  </div>
</body>