{% extends "head_base.html" %}

{% block body %}

<body class="relative">
  <div id="main-content-wrapper" class="drawer lg:drawer-open">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <!-- Page Content -->
    <div class="drawer-content flex flex-col h-screen">
      <!-- Navbar -->
      {% include "navigation_bar.html" %}
      <!-- Main Content Area -->
      <main class="flex flex-col flex-1 overflow-y-auto">
        {% block main %}{% endblock %}
        <div class="p32 min-h-[10px]"></div>
      </main>
      {% block overlay %}{% endblock %}
    </div>
    <!-- Sidebar -->
    {% if user %}
    {% include "sidebar.html" %}
    {% endif %}
  </div> <!-- End Drawer -->
  <div id="modal"></div>
  <div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2"></div>

  <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>
</body>
{% endblock %}