<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{{ site_name }}{% endblock %}</title>

    <!-- Description for search engines -->
    {% if page and page.description %}
    <meta name="description" content="{{ page.description }}">
    {% endif %}

    <!-- Open Graph (Facebook, LinkedIn, etc.) -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ page.title if page else site_name }}">
    {% if page and page.description %}
    <meta property="og:description" content="{{ page.description }}">
    {% endif %}
    <meta property="og:url" content="{{ site_url }}{{ page.url if page else '/' }}">
    {% if page and page.image %}
    <meta property="og:image" content="{% if page.image.startswith('http') %}{{ page.image }}{% else %}{{ site_url }}{{ page.image }}{% endif %}">
    {% elif default_og_image %}
    <meta property="og:image" content="{{ site_url }}{{ default_og_image }}">
    {% endif %}
    <meta property="og:site_name" content="{{ site_name }}">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ page.title if page else site_name }}">
    {% if page and page.description %}
    <meta name="twitter:description" content="{{ page.description }}">
    {% endif %}
    {% if page and page.image %}
    <meta name="twitter:image" content="{% if page.image.startswith('http') %}{{ page.image }}{% else %}{{ site_url }}{{ page.image }}{% endif %}">
    {% elif default_og_image %}
    <meta name="twitter:image" content="{{ site_url }}{{ default_og_image }}">
    {% endif %}

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/main.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css">

    <!-- Atom Feed autodiscovery -->
    {% if feed_enabled %}
    <link rel="alternate" type="application/atom+xml" title="{{ feed_title or site_name }}" href="{{ site_url }}/feed.xml">
    {% endif %}
</head>
<body>
    <nav class="top-nav">
        {% for nav_item in header_nav %}
            {% if not loop.first %}<span class="nav-separator">·</span>{% endif %}
            <a href="{{ nav_item.url }}">
                {% if nav_item.logo %}
                    <img src="{{ nav_item.logo }}" alt="{{ nav_item.logo_alt | default(nav_item.label) }}" class="nav-logo">{{ nav_item.label }}
                {% else %}
                    {{ nav_item.label }}
                {% endif %}
            </a>
        {% endfor %}
    </nav>

    <article>
        {% block content %}{% endblock %}
    </article>

    <div class="footer-separator"></div>

    <footer>
        <p class="footer-text">
            {% if footer.author_name %}
            &copy; {{ footer.copyright_year }} <a href="/{{ footer.author_link }}">{{ footer.author_name }}</a>
            {% else %}
            &copy; {{ footer.copyright_year }}
            {% endif %}
        </p>
    </footer>

    <!-- KaTeX for math rendering -->
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            renderMathInElement(document.body, {
                delimiters: [
                    {left: '$$', right: '$$', display: true},
                    {left: '$', right: '$', display: false}
                ],
                throwOnError: false,
                ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
                ignoredClasses: ['no-katex']
            });
        });
    </script>
</body>
</html>
