<!DOCTYPE html>
<html lang="en" data-theme="light">

<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 src="/assets/theme-toggle.js" defer></script>
  <script src="/assets/toast.js" defer></script>
  <script src="/assets/htmx-head-ext.js" defer></script>
  <script src="/assets/marked.min.js" defer></script>
  <script src="/assets/knowledge-graph.js" defer></script>

  <!-- 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>
<script>
  (function wait_for_htmx() {
    if (window.htmx) {
      htmx.config.globalViewTransitions = true;
    } else {
      setTimeout(wait_for_htmx, 50);
    }
  })();

</script>

{% block body %}{% endblock %}

<script defer>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.marked && !window.markedGlobalOptionsSet) {
      marked.setOptions({
        breaks: true,
        gfm: true,
        headerIds: false,
        mangle: false,
        smartLists: true,
        smartypants: true,
        xhtml: false
      });
      window.markedGlobalOptionsSet = true;
    }
    renderAllMarkdown();
  });
  document.body.addEventListener('htmx:afterSettle', renderAllMarkdown);

  function renderAllMarkdown() {
    if (!window.marked) return;
    document.querySelectorAll('.markdown-content[data-content]').forEach(el => {
      const raw = el.getAttribute('data-content') || '';
      if (el.dataset.renderedContent !== raw) {
        el.innerHTML = marked.parse(raw);
        el.dataset.renderedContent = raw;
      }
    });
  }
  window.renderAllMarkdown = renderAllMarkdown;
</script>

</html>