<!DOCTYPE html>
<html lang="{{ site.config.language | default(value='en') }}" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ site.config.base_url | safe }}/style.css">
    <script>
      (function() {
        var theme = localStorage.getItem('theme');
        if (theme === 'light') {
          document.documentElement.classList.remove('dark');
        }
      })();
    </script>
    <title>{% block title %}{{ site.config.title }}{% endblock %}</title>
    {% if site.config.description %}
    <meta name="description" content="{{ site.config.description }}">
    {% endif %}
    <link rel="alternate" type="application/rss+xml" title="{{ site.config.title }} RSS" href="{{ site.config.base_url }}/rss.xml">
    <link rel="alternate" type="application/atom+xml" title="{{ site.config.title }} Atom" href="{{ site.config.base_url }}/atom.xml">
    {% block head %}{% endblock %}
    {% if math %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
      onload="renderMathInElement(document.body,{delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}]});"></script>
    {% endif %}
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-200">
    {% include "partials/header.html" %}

    <main class="max-w-6xl mx-auto px-4 pt-24 pb-12 min-h-[calc(100vh-4rem)]">
        {% block content %}{% endblock %}
    </main>

    {% include "partials/footer.html" %}

    <script>
      var toggle = document.getElementById('theme-toggle');
      if (toggle) toggle.addEventListener('click', function() {
        var html = document.documentElement;
        if (html.classList.contains('dark')) {
          html.classList.remove('dark');
          localStorage.setItem('theme', 'light');
        } else {
          html.classList.add('dark');
          localStorage.setItem('theme', 'dark');
        }
      });
    </script>
</body>
</html>
