
<body class="bg-[#10181e]" style="font-family: 'Space Grotesk', sans-serif;">
  <!-- Create server modal - <%= settings.name %> -->
  <%- include('./components/model') %>
  <div>
    <%- 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"><%= user.global_name %>, welcome back! ðŸ‘‹</h2>
                    <p class="text-sm font-normal text-zinc-400">View general information related to your resource quota, account and servers.</p>
                  </div>
                </div>
              </div>
              <div class="mt-5 flex lg:ml-4 lg:mt-0">
                <span class="sm:ml-3 mr-3">
                  <a href="../panel" type="button" class="inline-flex flex-1 items-center rounded-full border-none bg-<%= theme.buttoncolor %> px-6 py-2.5 text-sm font-normal text-white ring-none focus:outline-none">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 mr-2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                    </svg>                                             
                    Manage your servers
                  </a>
                </span>
              </div>
            </div>
            <div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="relative flex items-center space-x-3 rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 px-6 py-5 transition bg-[#162027]/30">
                  <div class="flex-shrink-0 text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7 text-<%= theme.buttoncolor %> mr-2">
                      <path d="M12 9a1 1 0 0 1-1-1V3c0-.552.45-1.007.997-.93a7.004 7.004 0 0 1 5.933 5.933c.078.547-.378.997-.93.997h-5Z" />
                      <path d="M8.003 4.07C8.55 3.994 9 4.449 9 5v5a1 1 0 0 0 1 1h5c.552 0 1.008.45.93.997A7.001 7.001 0 0 1 2 11a7.002 7.002 0 0 1 6.003-6.93Z" />
                    </svg>                    
                  </div>
                  <div class="min-w-0 flex-1">
                    <a href="../store" class="focus:outline-none">
                      <span class="absolute inset-0" aria-hidden="true"></span>
                      <p class="text-sm font-semibold text-white"><%= max.ram %>MB available memory</p>
                      <span class="text-xs font-normal text-zinc-400">Usage: <%= max.ram - existing.ram %> MB </span>
                    </a>
                  </div>
                </div>
                <div class="relative flex items-center space-x-3 rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 px-6 py-5 transition bg-[#162027]/30">
                  <div class="flex-shrink-0 text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7 text-<%= theme.buttoncolor %> mr-2">
                      <path d="M14 6H6v8h8V6Z" />
                      <path fill-rule="evenodd" d="M9.25 3V1.75a.75.75 0 0 1 1.5 0V3h1.5V1.75a.75.75 0 0 1 1.5 0V3h.5A2.75 2.75 0 0 1 17 5.75v.5h1.25a.75.75 0 0 1 0 1.5H17v1.5h1.25a.75.75 0 0 1 0 1.5H17v1.5h1.25a.75.75 0 0 1 0 1.5H17v.5A2.75 2.75 0 0 1 14.25 17h-.5v1.25a.75.75 0 0 1-1.5 0V17h-1.5v1.25a.75.75 0 0 1-1.5 0V17h-1.5v1.25a.75.75 0 0 1-1.5 0V17h-.5A2.75 2.75 0 0 1 3 14.25v-.5H1.75a.75.75 0 0 1 0-1.5H3v-1.5H1.75a.75.75 0 0 1 0-1.5H3v-1.5H1.75a.75.75 0 0 1 0-1.5H3v-.5A2.75 2.75 0 0 1 5.75 3h.5V1.75a.75.75 0 0 1 1.5 0V3h1.5ZM4.5 5.75c0-.69.56-1.25 1.25-1.25h8.5c.69 0 1.25.56 1.25 1.25v8.5c0 .69-.56 1.25-1.25 1.25h-8.5c-.69 0-1.25-.56-1.25-1.25v-8.5Z" clip-rule="evenodd" />
                    </svg>                        
                  </div>
                  <div class="min-w-0 flex-1">
                    <a href="../store" class="focus:outline-none">
                      <span class="absolute inset-0" aria-hidden="true"></span>
                      <p class="text-sm font-semibold text-white"><%= max.cpu %> available CPU %</p>
                      <span class="text-xs font-normal text-zinc-400">Usage: <%= max.cpu - existing.cpu %>%</span>
                    </a>
                  </div>
                  </div>
                  <div class="relative flex items-center space-x-3 rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 px-6 py-5 transition bg-[#162027]/30">
                    <div class="flex-shrink-0 text-gray-500">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7 text-<%= theme.buttoncolor %> mr-2">
                        <path d="M4.75 3A1.75 1.75 0 0 0 3 4.75v2.752l.104-.002h13.792c.035 0 .07 0 .104.002V6.75A1.75 1.75 0 0 0 15.25 5h-3.836a.25.25 0 0 1-.177-.073L9.823 3.513A1.75 1.75 0 0 0 8.586 3H4.75ZM3.104 9a1.75 1.75 0 0 0-1.673 2.265l1.385 4.5A1.75 1.75 0 0 0 4.488 17h11.023a1.75 1.75 0 0 0 1.673-1.235l1.384-4.5A1.75 1.75 0 0 0 16.896 9H3.104Z" />
                      </svg>                      
                    </div>
                    <div class="min-w-0 flex-1">
                      <a href="../store" class="focus:outline-none">
                        <span class="absolute inset-0" aria-hidden="true"></span>
                        <p class="text-sm font-semibold text-white"><%= max.disk %> GB available disk</p>
                        <span class="text-xs font-normal text-zinc-400">Usage: <%= max.disk - existing.disk %></span>
                      </a>
                    </div>
                    </div>
                    <div class="relative flex items-center space-x-3 rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 px-6 py-5 transition bg-[#162027]/30">
                      <div class="flex-shrink-0 text-gray-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7 text-<%= theme.buttoncolor %> mr-2">
                          <path d="M4.464 3.162A2 2 0 0 1 6.28 2h7.44a2 2 0 0 1 1.816 1.162l1.154 2.5c.067.145.115.291.145.438A3.508 3.508 0 0 0 16 6H4c-.288 0-.568.035-.835.1.03-.147.078-.293.145-.438l1.154-2.5Z" />
                          <path fill-rule="evenodd" d="M2 9.5a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2Zm13.24 0a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V9.5Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V9.5a.75.75 0 0 0-.75-.75h-.01ZM2 15a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2Zm13.24 0a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
                        </svg>                                         
                      </div>
                      <div class="min-w-0 flex-1">
                        <a href="../store" class="focus:outline-none">
                          <span class="absolute inset-0" aria-hidden="true"></span>
                          <p class="text-sm font-semibold text-white"><%= max.server %> available server slots</p>
                          <span class="text-xs font-normal text-zinc-400">Usage: <%= max.server - existing.server %></span>
                        </a>
                      </div>
                </div>
              </div>
              <div class="w-full rounded-2xl border-t border-white/5 bg-cover bg-center bg-no-repeat p-10 flex flex-col items-center justify-center" style="background-image: url('https://berrybyte.net/assets/games/minecraft-hero-new-3.png');">
                <h2 class="tracking-widest uppercase text-white/80 font-semibold text-2xl mb-1">Create a server</h2>
                <p class="text-white/50 text-md mb-8">Create your own free Minecraft server today.</p>
                <a href="../create-server" class="bg-[#162027]/30 border-t border-white/5 ring-offset-[#272a34] backdrop-blur shadow-lg hover:bg-white/10 text-white font-medium py-2 px-6 rounded-2xl transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-<%= theme.buttoncolor %>">
                  New Server
                </a>
              </div>
            </div>
            
                    <div>
                      
                    </div>
                    
                    
                  </div>
                </div>
                     
            </div>
          </div>
        </div>
                      
      </main>
      <%- include('./components/footer') %>
    </div>
  </div>
                    
</body>
<script>
function toggleModal() {
  window.dispatchEvent(new CustomEvent('toggle-modal'));
}

    function selectLocation(name) {
      const previous = document.querySelector('.location-card.card-selected');
      if (previous) {
        previous.classList.remove('card-selected');
      }
      const selected = document.querySelector(`.location-card[data-name="${name}"]`);
      selected.classList.add('card-selected');
      document.getElementById('InputLoc').value = name;
    }
  
    function selectEgg(name) {
      const previous = document.querySelector('.egg-card.card-selected');
      if (previous) {
        previous.classList.remove('card-selected');
      }
      const selected = document.querySelector(`.egg-card[data-name="${name}"]`);
      selected.classList.add('card-selected');
      document.getElementById('InputEgg').value = name;
    }
  
    async function submitNew() {
      let name = encodeURIComponent(document.getElementById("InputName").value);
      let egg = encodeURIComponent(document.getElementById("InputEgg").value);
      let ram = encodeURIComponent(document.getElementById("InputRAM").value * 1024);
      let disk = encodeURIComponent(document.getElementById("InputDisk").value * 1024);
      let cpu = encodeURIComponent(document.getElementById("InputCPU").value * 100);
      let location = encodeURIComponent(document.getElementById("InputLoc").value);
      document.location.href = `/create?name=${name}&egg=${egg}&ram=${ram}&disk=${disk}&cpu=${cpu}&location=${location}`;
    };
  </script>
