{% load static %}
{% load i18n %}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{% static 'tw4/tailwind4.css' %}">
  <link rel="stylesheet" href="{% static 'cavaliba_tw4.css' %}">

  <title>{{ GLOBAL_APPNAME|default:"Cavaliba" }}</title>

  <style>
    /* Dynamic sidebar background — overrides Tailwind default */
    #sidebar { background-color: {{ SIDEBAR_COLOR|default:'#111827' }}; }
  </style>
</head>


<body class="bg-gray-100 min-h-screen font-sans text-gray-800"
      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>

  <div class="wrapper">

    <!-- SIDEBAR -->
    <aside id="sidebar" class="js-sidebar flex flex-col">
      <ul class="sidebar-nav flex-1">
        {% block navbar_app %}{% endblock %}
      </ul>
    </aside>


    <!-- MAIN -->
    <div class="main bg-gray-100">

      <!-- TOPBAR -->
      <nav class="bg-white border-b border-gray-200 px-6 py-3 flex items-center gap-3">

        <!-- Sidebar toggle -->
        <button id="sidebar-toggle" type="button"
                class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-800 transition cursor-pointer shrink-0">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>

        <!-- Page title slot (filled by child templates if needed) -->
        <div class="flex-1 min-w-0">
          {% block topbar_title %}{% endblock %}
        </div>

        <!-- Right side: tasks + user -->
        <div class="flex items-center gap-3 shrink-0">

          <!-- Tasks dropdown — HTMX partial -->
          <div id="datatask-navbar-container"
               hx-get="{% url 'app_data:task_navbar_partial' %}"
               hx-trigger="load"
               hx-swap="outerHTML">
          </div>

          <!-- User dropdown -->
          <div class="relative">
            <button id="user-menu-btn" type="button"
                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-gray-100 transition cursor-pointer text-sm text-gray-700 font-medium">
              <!-- Avatar initials badge -->
              <span class="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500
                           flex items-center justify-center text-white text-xs font-bold shrink-0">
                {{ aaa.username|slice:":2"|upper }}
              </span>
              <span class="hidden sm:inline">{{ aaa.username }}{% if aaa.is_admin %} <span class="text-indigo-500 text-xs">(admin)</span>{% endif %}</span>
              <span class="material-symbols-outlined text-base leading-none text-gray-400">expand_more</span>
            </button>

            <div id="user-menu-dropdown"
                 class="hidden absolute right-0 mt-2 w-52 bg-white border border-gray-200 rounded-xl shadow-lg z-50 py-1 text-sm">

              {% if 'p_user_pref' in aaa.perms %}
              <a href="{% url 'app_data:user_pref' %}"
                 class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 transition">
                <span class="material-symbols-outlined text-base leading-none text-gray-400">edit</span> {% translate 'Preferences' %}
              </a>
              {% endif %}

              {% if 'p_user_debug' in aaa.perms %}
              <a href="{% url 'app_data:debug' %}"
                 class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 transition">
                <span class="material-symbols-outlined text-base leading-none text-gray-400">help</span> {% translate 'Debug' %}
              </a>
              {% endif %}

              {% if aaa.is_admin %}
              <a href="/private/admin/"
                 class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 transition">
                <span class="material-symbols-outlined text-base leading-none text-gray-400">database</span> {% translate 'DB Admin' %}
              </a>
              {% endif %}

              {% if ui_change_password %}
              <a href="{% url 'password_change' %}"
                 class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 transition">
                <span class="material-symbols-outlined text-base leading-none text-gray-400">key</span> {% translate 'Change password' %}
              </a>
              {% endif %}

              <div class="border-t border-gray-100 my-1"></div>

              <a href="{% url 'app_data:logout' %}"
                 class="flex items-center gap-3 px-4 py-2 text-red-600 hover:bg-red-50 transition">
                <span class="material-symbols-outlined text-base leading-none">logout</span> {% translate 'Logout' %}
              </a>

            </div>
          </div>

        </div>
      </nav>


      <!-- CONTENT -->
      <main class="flex-1 px-6 py-6 overflow-auto">

        <!-- Flash messages -->
        {% if messages %}{% for message in messages %}
        <div class="cv-flash-msg {{ message.tags }} flex items-center justify-between
                    px-4 py-3 mb-4 rounded-xl border bg-white shadow-sm"
             role="alert">
          <span>{{ message }}</span>
          <button type="button"
                  class="ml-4 text-gray-400 hover:text-gray-700 font-bold transition"
                  onclick="this.parentElement.remove()" aria-label="Close">
            &times;
          </button>
        </div>
        {% endfor %}{% endif %}

        <!-- Main content + optional TOC -->
        <div class="cv-content-area">
          <div class="cv-main-content">
            {% block title %}{% endblock %}
            {% block content %}{% endblock %}
          </div>
          <div class="cv-toc">{% block toc %}{% endblock %}</div>
        </div>

      </main>


      <!-- FOOTER -->
      <footer class="border-t border-gray-200 bg-white py-3 text-center text-xs text-gray-400">
        (c) www.cavaliba.com &mdash; version {{ CAVALIBA_VERSION }} &mdash; {{ CAVALIBA_VERSION_DATE }}
      </footer>

    </div><!-- /main -->
  </div><!-- /wrapper -->


  <!-- SCRIPTS -->
  <script src="{% static 'v2/jquery.371.min.js' %}" crossorigin="anonymous"></script>
  <script src="{% static 'v2/htmx.min.js' %}" crossorigin="anonymous"></script>
  <script src="{% static 'v2/select2.min.js' %}"></script>
  <script src="{% static 'tinymce/tinymce.min.js' %}"></script>
  <script src="{% static 'django_tinymce/init_tinymce.js' %}"></script>
  <script src="{% static 'v2/sidebar.js' %}"></script>

  <script>
    setTimeout(function () {
      document.querySelectorAll('.cv-flash-msg').forEach(function (el) { el.remove(); });
    }, 3000);

    (function () {
      var btn = document.getElementById('user-menu-btn');
      var menu = document.getElementById('user-menu-dropdown');
      if (!btn || !menu) return;
      btn.addEventListener('click', function (e) {
        e.stopPropagation();
        menu.classList.toggle('hidden');
      });
      document.addEventListener('click', function () {
        menu.classList.add('hidden');
      });
    })();
  </script>

  {% block script %}{% endblock %}

</body>
</html>
