<!DOCTYPE html>
<html lang="en" data-theme="{{ initial_theme|default('light') }}" data-theme-preference="{{ user_theme|default('system') }}">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>{% block title %}Minne{% endblock %}</title>


  <!-- Preload critical assets -->
  <link rel="preload" href="/assets/htmx.min.js" as="script">
  <link rel="preload" href="/assets/style.css" as="style">

  <!-- Core styles -->
  <link rel="stylesheet" href="/assets/style.css">

  <!-- Scripts -->
  <script src="/assets/htmx.min.js" defer></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      htmx.config.globalViewTransitions = true;
      htmx.config.selfRequestsOnly = false;
    });
  </script>
  <script src="/assets/htmx-ext-sse.js" defer></script>
  <script src="/assets/theme-toggle.js" defer></script>
  <script src="/assets/toast.js" defer></script>
  <script src="/assets/marked.min.js" defer></script>
  <script src="/assets/knowledge-graph.js" defer></script>
  <script src="/assets/design-polish.js" defer></script>
  <script src="/assets/modal.js" defer></script>
  <script src="/assets/admin-prompt-reset.js" defer></script>

  <!-- Global View Transition -->
  <meta name="view-transition" content="same-origin" />

  <!-- Icons -->
  <link rel="icon" href="/assets/icon/favicon.ico">
  <link rel="apple-touch-icon" href="/assets/icon/apple-touch-icon.png" media="(device-width: 320px)">

  <!-- PWA -->
  <link rel="manifest" href="/assets/manifest.json">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  {% block head %}{% endblock %}

</head>

{% block body %}{% endblock %}

</html>