amayo/src/server/views/pages/dashboard.ejs

<!-- dashboard_nav is rendered by the layout via renderTemplate to avoid unresolved Promise output -->
<div class="max-w-3xl mx-auto p-6">
  <div class="relative flex justify-center">
    <% if (!selectedGuild) { %>
      <!-- Card principal (centered) -->
      <div class="w-full">
        <div class="mx-auto backdrop-blur-md bg-white/10 border border-white/10 rounded-xl p-6 shadow-lg glass-card">
          <h1 class="text-3xl font-bold mb-2"><%= appName %></h1>
          <p class="text-sm text-slate-200/80 mb-4">Panel de administración</p>
          <div class="mt-4">
            <p class="text-sm text-slate-200/80">Selecciona un servidor desde la página principal para administrar sus ajustes.</p>
            <a href="/dashboard/select-guild" class="inline-block mt-3 pixel-btn">Seleccionar servidor</a>
          </div>
        </div>
      </div>
    <% } %>

    <% if (typeof selectedGuild !== 'undefined' && selectedGuild) { %>
      <!-- Floating sidebar for guild actions -->
      <aside class="absolute right-6 top-12 hidden lg:block transform translate-y-1">
        <nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card w-48">
          <ul class="flex flex-col gap-3">
            <li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
            <li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
            <li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
            <li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
            <li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
          </ul>
        </nav>
      </aside>
      <!-- Mobile drawer/backdrop -->
      <div id="drawerBackdrop" class="fixed inset-0 bg-black/40 z-40 hidden"></div>
      <div id="mobileDrawer" class="fixed left-0 top-0 bottom-0 w-64 bg-white/6 backdrop-blur z-50 transform -translate-x-full transition-transform duration-300">
        <div class="p-4">
          <h4 class="text-white font-semibold mb-3">Servidor: <%= selectedGuildName || selectedGuild %></h4>
          <ul class="flex flex-col gap-3">
            <li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
            <li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
            <li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
            <li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
            <li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
          </ul>
        </div>
      </div>
    <% } %>

    <% if (typeof page !== 'undefined' && page === 'settings' && selectedGuild) { %>
      <div class="w-full max-w-3xl mt-6">
        <div class="backdrop-blur-md bg-white/6 border border-white/8 rounded-xl p-6 glass-card">
          <h2 class="text-xl font-semibold mb-4">Ajustes del servidor</h2>
          <form id="guildSettingsForm" class="space-y-4">
            <div>
              <label class="block text-sm text-slate-200 mb-1">Prefix del bot</label>
              <input type="text" name="prefix" id="prefixInput" value="<%= (guildConfig && guildConfig.prefix) || '' %>" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="!" />
            </div>
            <div>
              <label class="block text-sm text-slate-200 mb-1">AI Role Prompt (opcional)</label>
              <textarea name="aiRolePrompt" id="aiRoleInput" rows="4" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="E.g. Actúa como un moderador amigable..."><%= (guildConfig && guildConfig.aiRolePrompt) || '' %></textarea>
            </div>
            <div>
              <label class="block text-sm text-slate-200 mb-1">Roles de staff (IDs separadas por coma)</label>
              <input type="text" name="staff" id="staffInput" value="<%= (guildConfig && (Array.isArray(guildConfig.staff) ? guildConfig.staff.join(',') : guildConfig.staff)) || '' %>" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="123... , 456..." />
            </div>
            <div class="flex items-center gap-3">
              <button type="submit" class="pixel-btn">Guardar</button>
              <span id="saveStatus" class="text-sm text-slate-300"></span>
            </div>
          </form>
        </div>
      </div>
      <script>
        (function(){
          const form = document.getElementById('guildSettingsForm');
          const status = document.getElementById('saveStatus');
          form.addEventListener('submit', async (e)=>{
            e.preventDefault();
            status.textContent = 'Guardando...';
            const prefix = document.getElementById('prefixInput').value.trim();
            const aiRolePrompt = document.getElementById('aiRoleInput').value.trim();
            const staffRaw = document.getElementById('staffInput').value.trim();
            const payload = {
              prefix: prefix,
              aiRolePrompt: aiRolePrompt.length ? aiRolePrompt : null,
              staff: staffRaw ? staffRaw.split(',').map(s=>s.trim()).filter(Boolean) : [],
            };
            try {
              const res = await fetch(`/api/dashboard/${encodeURIComponent('<%= selectedGuild %>')}/settings`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
              });
              const json = await res.json();
              if (res.ok && json.ok) {
                status.textContent = 'Guardado';
                setTimeout(()=> status.textContent = '', 2500);
              } else {
                status.textContent = json.error || 'Error';
              }
            } catch (err) {
              status.textContent = 'Error de red';
            }
          });
        })();
      </script>
    <% } %>

  </div>
</div>

  

  <script>
    // Drawer toggle logic
    const drawerToggle = document.getElementById('drawerToggle');
    const mobileDrawer = document.getElementById('mobileDrawer');
    const drawerBackdrop = document.getElementById('drawerBackdrop');
    function openDrawer() {
      mobileDrawer.classList.remove('-translate-x-full');
      drawerBackdrop.classList.remove('hidden');
    }
    function closeDrawer() {
      mobileDrawer.classList.add('-translate-x-full');
      drawerBackdrop.classList.add('hidden');
    }
    drawerToggle?.addEventListener('click', openDrawer);
    drawerBackdrop?.addEventListener('click', closeDrawer);
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') closeDrawer();
    });
  </script>