<!-- /partials/_sidebar.html -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="scSidebar" aria-labelledby="scSidebarLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="scSidebarLabel">Opciones</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Contenido se inyecta según la página actual -->
    <div id="scSidebarContent" class="list-group list-group-flush small"></div>
  </div>
</div>

<script>
  // Map de opciones por página. Usa body[data-page] o window.scPageId.
  const SC_SIDEBAR_ITEMS = {
    // === ejemplos ===
    "dashboard": [
      { text: "Ver reportes", href: "/reportes" },
      { text: "Actualizar", href: "#", attr: { "data-action": "refresh-list" } },
      { text: "Exportar (CSV)", href: "#", attr: { "data-action": "export-csv" } },
      { text: "Nueva comanda", href: "/comandas" },
      { text: "Ir a Estado", href: "/estadoComandas" }
    ],
    "estadoComandas": [
      { text: "➕ Nueva comanda", href: "/comandas" },
      { text: "Solo abiertas", href: "#", attr: { "data-action": "toggle-abiertas" } },
      { text: "Exportar (CSV)", href: "#", attr: { "data-action": "export-csv" } },
      { text: "Actualizar listado", href: "#", attr: { "data-action": "refresh-list" } },
    ],
    "comandas": [
      { text: "Volver a Estado", href: "/estadoComandas" },
      { text: "Cargar productos", href: "/productos" },
      { text: "Mesas", href: "/mesas" },
    ],
    "productos": [
      { text: "Nuevo producto", href: "/productos/nuevo" },
      { text: "Importar catálogo", href: "/productos/importar" },
      { text: "Reportes", href: "/reportes" },
    ],
    "usuarios": [
      { text: "Exportar (CSV)", href: "#", attr: { "data-action": "export-csv" } },
    ]
  };

  (function initSidebar(){
    const page = (document.body.dataset.page || window.scPageId || "").trim();
    const items = SC_SIDEBAR_ITEMS[page] || [
      { text: "Inicio", href: "/" }
    ];
    const box = document.getElementById("scSidebarContent");
    box.innerHTML = "";
    for (const it of items) {
      const a = document.createElement("a");
      a.className = "list-group-item list-group-item-action";
      a.textContent = it.text;
      a.href = it.href || "#";
      if (it.attr) for (const [k,v] of Object.entries(it.attr)) a.setAttribute(k,v);
      box.appendChild(a);
    }

    // Acciones ejemplo (opcionales). Adaptá a tus funciones reales.
    box.addEventListener("click", (ev) => {
      const a = ev.target.closest("a[data-action]");
      if (!a) return;
      ev.preventDefault();
      const action = a.getAttribute("data-action");
      if (action === "toggle-abiertas") window.dispatchEvent(new CustomEvent("sc:toggle-abiertas"));
      if (action === "export-csv") window.dispatchEvent(new CustomEvent("sc:export-csv"));
      if (action === "refresh-list") window.dispatchEvent(new CustomEvent("sc:refresh-list"));
    });
  })();
</script>
