
<body class="bg-[#10181e]" style="font-family: 'Space Grotesk', sans-serif;">
  <!-- Create server modal - <%= settings.name %> -->
  <%- include('./components/model') %>
  <%- 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">Servers</h2>
                  <p class="text-sm font-normal text-zinc-400">View a list of your servers on <%= name %>.</p>
                </div>
              </div>
            </div>
            <div class="mt-5 flex lg:ml-4 lg:mt-0">
              <span class="sm:ml-3 mr-3">
                <a href="../create-server" 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 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                  </svg>                              
                  Create server
                </a>
              </span>
            </div>
          </div>
          <% if (req.query.err && req.query.err == "CREATED") { %>
          <div class="rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 p-8 mb-5">
            <div class="flex">
              <div class="flex-shrink-0">
                <img src="../public/done.png" class="h-7 w-7 mt-2">
              </div>
              <div class="ml-5">
                <h3 class="text-md font-medium tracking-tight text-white">Server queued for deployment</h3>
                <div class="mt-1 text-sm text-zinc-400">
                  <p>Please allow it a few minutes to install the requested software. You can manage your server via the Panel.</p>
                </div>
              </div>
            </div>
          </div>
          
          <% } %>
          <% if (req.query.err && req.query.err == "MODIFIED") { %>
            <div class="rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 p-8 mb-5">
              <div class="flex">
                <div class="flex-shrink-0">
                  <img src="../public/done.png" class="h-7 w-7 mt-2">
                </div>
                <div class="ml-5">
                  <h3 class="text-md font-medium tracking-tight text-white">Server queued for modification</h3>
                  <div class="mt-1 text-sm text-zinc-400">
                    <p>Please allow up to 60 seconds for server edits to be completed.</p>
                  </div>
                </div>
              </div>
            </div>
            <% } %>
          <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-4">
            <% if (servers.length === 0) { %>
              <div class="px-4 py-4 rounded-2xl bg-[#162027]/30 flex justify-center shadow border-t border-white/5">
                <div class="relative py-8 text-center">
                  <h2 class="text-lg font-semibold text-white">No Servers Found</h2>
                  <p class="text-sm font-light text-zinc-500 mt-4">Why not create one?</p>
                </div>
              </div>
            <% } else { %>
              <% for (let server of servers) { %>
                <div class="px-4 py-4 rounded-2xl bg-[#162027]/30 flex justify-center shadow border-t border-white/5">
                  <div class="relative py-8">
                    <div class="flex justify-center">
                      <img src="https://minecraft.wiki/images/thumb/White_Wool_JE2_BE2.png/150px-White_Wool_JE2_BE2.png" class="h-14 w-14 mb-4 flex justify-center bg-white/5 rounded-full p-3">
                    </div>
                    <div class="relative text-center">
                      <h2 class="text-lg font-semibold text-white sm:truncate sm:text-2xl sm:tracking-tight"><%= server.Name || undefined %></h2>
                      <p class="text-sm font-light text-zinc-500 mt-4"> <%= server.Cpu || 0 %> CPU core(s) / <%= server.Memory || 0 %> GB RAM / <%= server.Disk || 0 %> GB storage</p>
                    </div>
                    <div class="flex space-x-3 mt-6">
                      <a href="../edit?id=<%= server.Id %>" type="button" class="inline-flex justify-center flex-1 items-center rounded-2xl border-none bg-<%= theme.buttoncolor %> px-4 py-2.5 text-sm font-medium text-white ring-none focus:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2 h-5 inline-flex ">
                          <path d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z" />
                          <path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z" />
                        </svg>
                        Edit
                      </a>
                      <a href="../delete?id=<%= server.Id %>" type="button" class="inline-flex justify-center flex-1 items-center rounded-2xl border-none bg-white/5 px-4 py-2.5 text-sm font-medium text-white ring-none focus:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2 h-5 inline-flex ">
                          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                        </svg>
                        Delete
                      </a>
                      <a href="<%= panel %>/instance/<%= server.Id %>" type="button" class="inline-flex justify-center flex-1 items-center rounded-2xl border-none bg-white/5 px-4 py-2.5 text-sm font-medium text-white ring-none focus:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2 h-5 inline-flex ">
                          <path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clip-rule="evenodd" />
                          <path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clip-rule="evenodd" />
                        </svg>
                        View 
                      </a>
                    </div>
                  </div>
                </div>
              <% } %>
            <% } %>
            
              <div class="px-4 py-5 bg-transparent rounded-2xl border-dashed border-2 border-white/5 overflow-hidden sm:p-6 justify-center">
                <div class="flex flex-col items-center justify-center h-full">
                  <a href="/create-server" class="transition inline-flex  items-center rounded-2xl bg-[#162027]/30 p-4 text-sm font-light text-white hover:text-white hover:bg-<%= theme.buttoncolor %> focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
                    <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">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                  </a>
                </div>
              </div>
             
          </dl>
        </div>
      </div>
    </main>
    <%- include('./components/footer') %>
  </div>
  </div>
</body>
