<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>{% block title %}BizTrack{% endblock %}</title>

  {% load static %}
  <link rel="stylesheet" href="{% static 'css/main.css' %}"/>
  <script src="{% static 'js/htmx.min.js' %}" defer></script>
</head>
<body class="bg-base-200 min-h-screen">

  <div class="drawer lg:drawer-open">
    <input id="sidebar-toggle" type="checkbox" class="drawer-toggle"/>

    <!-- Page content -->
    <div class="drawer-content flex flex-col">

      <!-- Navbar -->
      {% include 'partials/navbar.html' %}

      <!-- Flash messages -->
      <div class="px-6 pt-4">
        {% for message in messages %}
          <div role="alert" class="alert {% if message.tags == 'error' %}alert-error{% elif message.tags == 'success' %}alert-success{% else %}alert-info{% endif %} mb-3">
            <span>{{ message }}</span>
          </div>
        {% endfor %}
      </div>

      <!-- Main content -->
      <main class="flex-1 p-6">
        {% block content %}{% endblock %}
      </main>

    </div>

    <!-- Sidebar -->
    {% include 'partials/sidebar.html' %}

  </div>
<script>
  // Auto-dismiss alerts after 4 seconds
  setTimeout(() => {
    document.querySelectorAll('.alert').forEach(el => {
      el.style.transition = 'opacity 0.5s';
      el.style.opacity = '0';
      setTimeout(() => el.remove(), 500);
    });
  }, 4000);
</script>
{% block extra_js %}{% endblock %}
</body>
</html>
