<aside class="w-64 hidden lg:block">
  <nav class="bg-transparent rounded-xl p-4 sticky top-20 h-[80vh] overflow-auto">
    <div class="mb-4 flex items-center gap-2">
      <a href="/dashboard/<%= selectedGuild %>/overview" class="px-3 py-1 rounded-full bg-white/5 text-white text-xs">Home</a>
      <button id="reloadRolesBtn" type="button" title=":" class="px-2 py-1 rounded-full bg-white/6 hover:bg-white/10 text-xs" aria-label="Recargar roles">
        <!-- minimal two-dot icon -->
        <span aria-hidden="true" class="text-sm">··</span>
      </button>
    </div>

    <script>
      (function(){
        const btn = document.getElementById('reloadRolesBtn');
        if(!btn) return;
        btn.addEventListener('click', async function(e){
          e.preventDefault();
          const injected = '<%= selectedGuild || "" %>';
          let guildId = injected || '';
          if(!guildId && typeof location !== 'undefined'){
            try{
              const parts = location.pathname.split('/').filter(Boolean);
              // expect /dashboard/<guildId>/...
              if(parts.length >= 2 && parts[0] === 'dashboard') guildId = parts[1];
            }catch(e){ guildId = '' }
          }
          if(!guildId) return;

          // visual feedback: disable while loading
          btn.disabled = true;
          btn.classList.add('opacity-50','pointer-events-none');
          try{
            const res = await fetch(`/api/dashboard/${encodeURIComponent(guildId)}/roles`, { method: 'GET', headers: { 'Accept': 'application/json' } });
            if(res && res.ok){
              const j = await res.json();
              if(j && Array.isArray(j.roles)){
                window.dispatchEvent(new CustomEvent('roles:loaded', { detail: { roles: j.roles } }));
              }
            }
          }catch(err){ /* ignore errors */ }
          // restore
          btn.disabled = false;
          btn.classList.remove('opacity-50','pointer-events-none');
        });
      })();
    </script>
    <ul class="mt-2 space-y-3 text-slate-200">
  <li class="text-sm"><a href="/dashboard/<%= selectedGuild %>/settings" class="flex items-center gap-3"><span class="opacity-80">⚙️</span> General Settings</a></li>
  <li class="text-sm"><a href="/dashboard/<%= selectedGuild %>/items" class="flex items-center gap-3"><span class="opacity-80">🧭</span> Items</a></li>
  <li class="text-sm">
  <a href="/items/lab?guild=<%= selectedGuild %>" class="flex items-center gap-3">
      <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/6 animate-pulse">🔬</span>
      <span>Lab</span>
      <span id="labSpinner" class="ml-auto opacity-0 text-xs">⏳</span>
    </a>
  </li>
    </ul>
  </nav>
</aside>
