{# templates/adminpanel/base.html #}
{% load static %}
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{% block pagetitle %}Dashboard{% endblock %} | {{ SITE_NAME }}</title>

  <!-- Bootstrap LTR + fallback -->
  <link id="bs-css" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  <script>
  window.addEventListener('load',function(){
    const el=document.getElementById('bs-css');let bad=false;
    try{bad=!el||!el.sheet||!el.sheet.cssRules||el.sheet.cssRules.length===0}catch(e){bad=true}
    if(bad){const l=document.createElement('link');l.rel='stylesheet';l.href='{% static "vendor/bootstrap.min.css" %}';document.head.appendChild(l)}
  });
  </script>

  <!-- Admin styles -->
  <link rel="stylesheet" href="{% static 'adminpanel/admin.css' %}">
  {% block extra_head %}{% endblock %}
</head>
<body class="bg-light">

  <!-- Topbar -->
  <nav class="navbar navbar-expand-lg admin-topbar">
    <div class="container-fluid">
      <button class="btn btn-light border-0 d-lg-none me-2" data-bs-toggle="offcanvas" data-bs-target="#adminSidebar" aria-controls="adminSidebar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand fw-bold text-white" href="/admin/">
        Admin • {{ SITE_NAME }}
      </a>

      <div class="ms-auto d-flex align-items-center gap-2">
        <a class="btn btn-light btn-sm" href="/" target="_blank">View site</a>
        <a class="btn btn-outline-light btn-sm" href="/admin/logout/">Logout</a>
      </div>
    </div>
  </nav>

  <div class="container-fluid py-3">
    <div class="row g-3">
      <!-- Sidebar -->
      <aside class="col-12 col-lg-2">
        <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="adminSidebar" aria-labelledby="adminSidebarLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="adminSidebarLabel">Menu</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body p-0">
            <nav class="admin-sidebar list-group list-group-flush">
              {% block sidebar %}
              <a class="list-group-item list-group-item-action {% if request.path == '/admin/' %}active{% endif %}" href="/admin/">Dashboard</a>
              <a class="list-group-item list-group-item-action" href="/admin/products/">Products</a>
              <a class="list-group-item list-group-item-action" href="/admin/categories/">Categories</a>
              <a class="list-group-item list-group-item-action" href="/admin/orders/">Orders</a>
              <a class="list-group-item list-group-item-action" href="/admin/users/">Users</a>
              <a class="list-group-item list-group-item-action" href="/dj-admin/">Django Admin</a>
              {% endblock %}
            </nav>
          </div>
        </div>
      </aside>

      <!-- Main -->
      <main class="col-12 col-lg-10">
        {% if messages %}
          {% for m in messages %}
            <div class="alert alert-{{ m.tags|default:'info' }} shadow-sm">{{ m }}</div>
          {% endfor %}
        {% endif %}

        {% block header %}
        <div class="d-flex align-items-center justify-content-between mb-3">
          <h1 class="h5 m-0">{% block page_header %}Dashboard{% endblock %}</h1>
          {% block header_actions %}{% endblock %}
        </div>
        {% endblock %}

        {% block content %}{% endblock %}
      </main>
    </div>
  </div>

  <!-- Footer -->
  <footer class="text-center text-muted small py-4 border-top bg-white">
    © {{ SITE_NAME }}
  </footer>

  <!-- Bootstrap JS + fallback -->
  <script id="bs-js" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
  window.addEventListener('load',function(){
    if(!window.bootstrap){
      const f=document.createElement('script');
      f.src='{% static "vendor/bootstrap.bundle.min.js" %}';
      document.body.appendChild(f);
    }
  });
  </script>

  <script src="{% static 'adminpanel/admin.js' %}"></script>
  {% block extra_scripts %}{% endblock %}
</body>
</html>
