<body class="bg-[#10181e]" style="font-family: 'Space Grotesk', sans-serif;">
    <div>
      <%- include('./components/admin-sidebar') %>
      <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">Nodes</h2>
                      <p class="text-sm font-normal text-zinc-400">Manage Nodes</p>
                    </div>
                  </div>
                </div>
              </div>

              <% if (req.query.err) { %>
              <div class="rounded-2xl border border-white/5 p-4 mb-5">
                <div class="flex">
                  <div>
                    <div class="pl-4 text-sm text-white">
                      <p>Error code: <code><%= req.query.err %></code></p>
                    </div>
                  </div>
                </div>
              </div>
              <% } %>
              <% if (req.query.success) { %>
                <div class="rounded-2xl border border-white/5 p-4 mb-5">
                  <div class="flex">
                    <div>
                      <div class="pl-4 text-sm text-white">
                        <p>Action Success: <code><%= req.query.success %></code></p>
                      </div>
                    </div>
                  </div>
                </div>
              <% } %>

              <% if (nodes && nodes.length > 0) { %>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                  <% nodes.forEach(node => { %>
                    <div class="border border-white/10 p-6 rounded-2xl bg-zinc-900">
                      <h3 class="text-lg font-semibold text-white mb-2"><%= node.name %></h3>
                      <p class="text-sm font-normal text-zinc-400 mb-2">Processor: <code><%= node.processor %></code></p>
                      <p class="text-sm font-normal text-zinc-400 mb-2">RAM: <code><%= node.ram %></code></p>
                      <p class="text-sm font-normal text-zinc-400 mb-2">Disk: <code><%= node.disk %></code></p>
                      <p class="text-sm font-normal text-zinc-400">ID: <%= node.id %></p>
                    </div>
                  <% }) %>
                </div>
              <% } else { %>
                <p class="text-white">No nodes found.</p>
              <% } %>

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