<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}Smart Logger Dashboard{% endblock %}</title>
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
  <!-- Axios CDN -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script type="module" src="../static/js/filter_logs.js"></script>
  <script src="../static/js/api_client.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <!-- Auth & utility scripts -->
  <script>
    async function checkToken() {
      const token = localStorage.getItem("token");
      if (!token) return window.location.href = "/logs/login-page";
      const res = await fetch("/auth/protected-check", {
        headers: {"Authorization": "Bearer " + token}
      });
      if (!res.ok) { localStorage.removeItem("token"); window.location.href="/logs/login-page"; }
    }

    async function logoutUser() {
      const token = localStorage.getItem("token");
      if (!token) return window.location.href="/logs/login-page";
      const res = await fetch("/auth/logout", {method:"GET", headers: {"Authorization":"Bearer "+token}});
      if(res.ok){ localStorage.removeItem("token"); window.location.href="/logs/login-page"; }
      else alert("Logout failed");
    }

    window.onload = checkToken;
  </script>

  {% block extra_head %}{% endblock %}
</head>
<body class="flex h-screen bg-gray-100">
  
  {% include "partials/sidebar.html" %}

  <div class="flex-1 flex flex-col">
    {% include "partials/header.html" %}
    
    <main class="p-4 overflow-auto">
      {% block content %}{% endblock %}
    </main>
  </div>

</body>
</html>
