{% load static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:'en' }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Cabinet{% endblock %}</title>
  {% include "showcase/cabinet/includes/_head.html" %}
  {% block extra_css %}{% endblock %}
</head>
<body>

  <div class="cab-wrapper"
       x-data="{ sidebarCollapsed: JSON.parse(localStorage.getItem('cab_sidebar') ?? 'true') }"
       x-effect="localStorage.setItem('cab_sidebar', sidebarCollapsed)">

    {# Staff sidebar #}
    <aside class="cab-sidebar" :class="{ 'cab-sidebar--collapsed': sidebarCollapsed }">

      <div class="cab-sidebar__logo d-flex align-items-center px-3"
           style="height: var(--cab-topbar-height); flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.08);">
        {% block sidebar_title %}
        <span class="bi bi-grid-3x3-gap-fill fs-5" style="color: var(--cab-primary);"></span>
        <span class="cab-sidebar__title ms-2 fw-semibold text-white" style="font-size: 1rem; white-space: nowrap;">
          {{ SITE_NAME|default:'App' }}
        </span>
        {% endblock %}
      </div>

      <nav class="cab-nav flex-grow-1 py-2">
        <ul class="list-unstyled mb-0">
          {% block sidebar_nav %}{% endblock %}
        </ul>
      </nav>

      <div style="border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;">
        <a href="{% url 'codex_showcase:site_settings' %}"
           hx-get="{% url 'codex_showcase:site_settings' %}"
           hx-target="#cab-content"
           hx-push-url="true"
           class="cab-nav__item d-flex align-items-center px-3 py-2 mx-2 rounded"
           style="color: var(--cab-sidebar-text); transition: background 0.15s;">
          <span class="bi bi-gear fs-5 flex-shrink-0"></span>
          <span class="cab-nav__label ms-3" style="white-space: nowrap;">Settings</span>
        </a>
        <div class="px-3 py-2">
          <button @click="sidebarCollapsed = !sidebarCollapsed"
                  class="btn btn-sm d-flex align-items-center justify-content-center w-100"
                  style="background: var(--cab-sidebar-hover-bg); color: var(--cab-sidebar-text); border: none;">
            <span class="bi" :class="sidebarCollapsed ? 'bi-chevron-right' : 'bi-chevron-left'"></span>
            <span class="cab-nav__label ms-2" style="white-space: nowrap; font-size: 0.8rem;">Collapse</span>
          </button>
        </div>
      </div>

    </aside>

    <div class="cab-main">
      {% include "showcase/cabinet/includes/_topbar.html" %}

      <main class="cab-content" id="cab-content">
        {% block cabinet_content %}{% endblock %}
      </main>
    </div>

  </div>

  <script src="{% static 'showcase/cabinet/js/vendor/bootstrap.bundle.min.js' %}"></script>
  <script src="{% static 'showcase/cabinet/js/app/cabinet.js' %}"></script>
  {% block extra_js %}{% endblock %}

</body>
</html>
