<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">Theme</h2>
                      <p class="text-sm font-normal text-zinc-400">Select Dashboard Theme</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>
              <% } %>
              <form action="/get/set-theme" method="GET">
              <div class="relative flex flex-col space-y-3 rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 px-6 py-5 transition">
                <label for="theme" class="block mb-2 text-white font-medium text-sm">Theme:</label>
                  <select name="theme" id="theme" style="background-color: #141d23;" class="w-full border border-white/5 bg-[#162027]/30 focus:ring-<%= theme.buttoncolor %> focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl mb-4">
                        <option value="default">Default Theme</option>
                        <option value="blue">Blue Theme</option>
                        <option value="purple">Purple Theme</option>
                        <option value="orange">Orange Theme</option>
                  </select>
                <button type="submit" class="inline-flex items-center justify-center rounded-full border-none bg-<%= theme.buttoncolor %> px-6 py-2.5 text-sm font-normal text-white ring-none focus:outline-none hover:bg-<%= theme.buttoncolor %> transition-colors duration-200">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
                  </svg>
                  Apply Theme
                </button>
              </div>
              </form>

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