<!-- dashboard_nav is rendered by the layout via renderTemplate to avoid unresolved Promise output -->
  <div class="max-w-7xl mx-auto p-6">
  <div class="relative">
  <% if (!selectedGuild) { %>
  <!-- When no guild selected show centered card -->
  <%- await include('../partials/dashboard/dashboard_noguild_card') %>
  <% } else { %>
    <!-- When a guild is selected render sidebar + content layout -->
    <div class="w-full max-w-7xl mx-auto mt-6 px-4">
      <div class="flex items-start gap-8">
          <%- await include('../partials/dashboard/dashboard_sidebar') %>
        <div id="dashContent" class="flex-1">
          <!-- initial fragment content will be rendered inside #dashMain by partials -->
              <% if (typeof page !== 'undefined' && page === 'overview') { %>
              <%- await include('../partials/dashboard/dashboard_overview') %>
            <% } else if (typeof page !== 'undefined' && page === 'settings') { %>
              <div id="dashMain"><%- await include('../partials/dashboard/dashboard_settings') %></div>
              <% } else if (typeof page !== 'undefined' && page === 'items') { %>
                  <div id="dashMain"><%- await include('../partials/dashboard/dashboard_items') %></div>
          <% } else { %>
            <div id="dashMain"><!-- empty main placeholder --></div>
          <% } %>
        </div>
      </div>
    </div>
  <% } %>

    <!-- dashContent is rendered above inside the selectedGuild block to ensure includes use await -->

    <script>
      // Simple fragment navigation for a SPA-like feel inside /dashboard
      (function(){
        async function loadFragment(href, push=true) {
          try {
            const url = new URL(href, location.origin);
            url.searchParams.set('fragment','1');
            const res = await fetch(url.toString(), { headers: { 'X-Requested-With':'XMLHttpRequest' } });
            if (!res.ok) throw new Error('fetch-failed');
            const html = await res.text();
            // parse the fragment and replace only the inner main (#dashMain) so sidebar stays
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newMain = doc.getElementById('dashMain');
            const containerMain = document.getElementById('dashMain');
            if (newMain && containerMain) {
              containerMain.innerHTML = newMain.innerHTML;
              // execute inline scripts inside the new main
              Array.from(containerMain.querySelectorAll('script')).forEach(s=>{
                try {
                  const n = document.createElement('script');
                  if (s.src) { n.src = s.src; n.async = false; document.head.appendChild(n); }
                  else { n.textContent = s.textContent; document.head.appendChild(n); document.head.removeChild(n); }
                } catch(e){}
              });
            } else {
              // fallback: replace entire dashContent
              const container = document.getElementById('dashContent');
              if (container) container.innerHTML = html;
            }
            if (push) history.pushState({ href: href }, '', href);
          } catch (err) {
            console.warn('Fragment load failed', err);
            location.href = href; // fallback full navigation
          }
        }

        document.addEventListener('click', (e)=>{
          const a = e.target.closest && e.target.closest('a');
          if (!a) return;
          const href = a.getAttribute('href');
          if (!href) return;
          // intercept internal dashboard links
          if (href.startsWith('/dashboard') || href.indexOf(location.origin + '/dashboard') === 0) {
            e.preventDefault();
            loadFragment(href);
          }
        });

        window.addEventListener('popstate', (e)=>{
          const href = (e.state && e.state.href) || location.pathname + location.search;
          loadFragment(href, false);
        });
      })();
    </script>

  </div>
</div>

  

  <script>
    // Drawer toggle logic - attach after DOM is loaded so elements exist
    document.addEventListener('DOMContentLoaded', function () {
      const drawerToggle = document.getElementById('drawerToggle');
      const mobileDrawer = document.getElementById('mobileDrawer');
      const drawerBackdrop = document.getElementById('drawerBackdrop');
      function openDrawer() {
        if (!mobileDrawer || !drawerBackdrop) return;
        mobileDrawer.classList.remove('-translate-x-full');
        drawerBackdrop.classList.remove('hidden');
        // move focus to drawer for accessibility
        mobileDrawer.setAttribute('tabindex', '-1');
        mobileDrawer.focus();
      }
      function closeDrawer() {
        if (!mobileDrawer || !drawerBackdrop) return;
        mobileDrawer.classList.add('-translate-x-full');
        drawerBackdrop.classList.add('hidden');
        drawerToggle?.focus();
      }
      drawerToggle?.addEventListener('click', openDrawer);
      drawerBackdrop?.addEventListener('click', closeDrawer);
      // support close button inside the drawer
      const drawerClose = document.getElementById('drawerClose');
      drawerClose?.addEventListener('click', closeDrawer);
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeDrawer();
      });
    });
  </script>

  <!-- Mobile drawer & backdrop (used by hamburger) -->
  <div id="drawerBackdrop" class="fixed inset-0 bg-black/60 hidden z-40"></div>
  <nav id="mobileDrawer" class="fixed top-0 left-0 bottom-0 w-72 max-w-xs bg-[#0f1720] -translate-x-full transform transition-transform duration-200 z-50">
    <div class="p-4 border-b border-white/6 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <% if (user && user.id && user.avatar) { %>
          <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.webp" class="w-8 h-8 rounded-full" alt="avatar">
        <% } %>
        <div class="text-white font-medium"><%= user?.username || '' %></div>
      </div>
      <button id="drawerClose" class="text-white/70">Cerrar</button>
    </div>
    <div class="p-4 space-y-2">
      <a href="/dashboard/<%= selectedGuild || '' %>/overview" class="block py-2 text-white">Home</a>
      <a href="/dashboard/<%= selectedGuild || '' %>/settings" class="block py-2 text-white">General Settings</a>
    </div>
  </nav>


