
<body class="bg-[#10181e] font-sans" 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">Panel credentials</h2>
                  <p class="text-sm font-normal text-zinc-400">Find the credentials for logging into the <%= settings.name %> Game Panel.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="mt-5">
            <dl class="divide-y divide-white/5">
              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm font-medium leading-6 text-white">Panel link</dt>
                <dd class="mt-1 text-sm leading-6 text-[#0a9875] sm:col-span-2 sm:mt-0">
                  <a href="../panel" class="transition font-medium hover:underline">Click here</a>
                </dd>
              </div>

              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm font-medium leading-6 text-white">Username</dt>
                <dd class="mt-1 text-sm leading-6 text-zinc-300 sm:col-span-2 sm:mt-0">
                  <span class="bg-[#162027]/30 px-4 py-2 rounded-full"><%= user.username %></span>
                </dd>
              </div>

              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm font-medium leading-6 text-white">Email</dt>
                <dd class="mt-1 text-sm leading-6 text-zinc-300 sm:col-span-2 sm:mt-0">
                  <span class="bg-[#162027]/30 px-4 py-2 rounded-full"><%= user.email %></span>
                </dd>
              </div>

              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm font-medium leading-6 text-white">Password (Click to Copy)=</dt>
                <dd class="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                  <ul role="list" class="w-full md:w-2/4 divide-y divide-gray-100 rounded-3xl border border-white/5">
                    <li class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
                      <div class="flex w-0 flex-1 items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 flex-shrink-0 text-zinc-600">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
                        </svg>
                        <div class="ml-4 flex min-w-0 flex-1 gap-2">
                          <% if (req.session.password) { %>
                          <span class="truncate font-medium text-zinc-400"><%= req.session.password %></span>
                          <% } else { %>
                            <div onclick="navigator.clipboard.writeText('<%= password %>');" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-3 mb-0 w-full transition justify-left hover:bg-white/5 px-4 py-2 flex bg-neutral-900 placeholder:text-white/20 border border-white/5" style="width: 340px;">
                              <span id="passwordText" style="filter: blur(5px)" onclick="navigator.clipboard.writeText('<%= password %>');" onmouseover="this.style.filter = 'none';" onmouseout="this.style.filter = 'blur(5px)';"><%= password %></span>
                           </div>
                          <% } %>
                        </div>
                      </div>
                      <div class="ml-4 flex-shrink-0">
                      
                      </div>
                    </li>
                  </ul>
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </main>

    <%- include('./components/footer') %>
  </div>
</body>
