{# This is the base of every page that you will create #}

<!DOCTYPE html>
<html lang="{{ site.lang or 'en' }}" data-theme="{{ site.theme or 'light' }}" data-bs-theme="{{ site.theme or 'light' }}">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="color-scheme" content="{{ site.theme or 'light' }}">

      {#╔══════════════════╗
        ║    PAGE DATA     ║
        ╚══════════════════╝#}

        {% set pageKey = title %}
        {% set pageData = pages[pageKey] %}

      {#╔══════════════════╗
        ║       SEO        ║
        ╚══════════════════╝#}

        <link rel="canonical" href="{{ pageData.seo.canonical or (site.url + page.url) }}"/>
        <title>{{ pageData.seo.title or title or site.title }}</title>
        <meta name="description" content="{{ pageData.seo.description or site.description }}">
        <meta name="keywords" content="{{ pageData.seo.keywords or site.keywords }}">
        <meta name="author" content="{{ site.author.fullName }}">

        {% if pageData.seo.noindex %}
        <meta name="robots" content="noindex, follow">
        {% endif %}

        {# Open Graph #}
        <meta property="og:title" content="{{ pageData.seo.title or title or site.title }}">
        <meta property="og:description" content="{{ pageData.seo.description or site.description }}">
        <meta property="og:type" content="website">
        <meta property="og:url" content="{{ site.url }}{{ page.url }}">
        <meta property="og:image" content="{{ site.url }}{{ site.logo }}">
        <meta property="og:site_name" content="{{ site.siteName }}">

        {# Twitter Card #}
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="{{ pageData.seo.title or title or site.title }}">
        <meta name="twitter:description" content="{{ pageData.seo.description or site.description }}">
        <meta name="twitter:image" content="{{ site.url }}{{ site.logo }}">

      {#╔══════════════════════════════════════════╗
        ║   JSON-LD — Structured data for SEO/AI   ║
        ╚══════════════════════════════════════════╝#}

        <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebPage",
            "name": {{ (pageData.seo.title or title or site.title) | dump }},
            "description": {{ (pageData.seo.description or site.description) | dump }},
            "url": {{ (site.url + page.url) | dump }},
            "author": {
                "@type": "Person",
                "name": {{ site.author.fullName | dump }},
                "url": {{ site.author.website | dump }}
            },
            "publisher": {
                "@type": "Organization",
                "name": {{ site.siteName | dump }},
                "logo": {
                    "@type": "ImageObject",
                    "url": {{ (site.url + site.logo) | dump }}
                }
            }
        }
        </script>

      {#╔══════════════════╗
        ║     FAVICON      ║
        ╚══════════════════╝#}

        <link rel="icon" type="image/svg+xml" href="{{ '/assets/brand/favicon.svg' | url }}">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/brand/favicon-32.png' | url }}">
        <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/brand/apple-touch-icon.png' | url }}">

      {#╔══════════════════╗
        ║       CSS        ║
        ╚══════════════════╝#}

        {# Syntax highlighting for code blocks #}
        <link rel="stylesheet" href="{{ '/css/prism.css' | url }}">

        {# Global CSS #}
        <link rel="stylesheet" href="{{ '/css/global.css' | url }}"/>

        {# Page CSS #}
        <link rel="stylesheet" href="{{ ('/css/pages/' + title + '.css') | url }}"/>

        {# Per-page CDN CSS #}
        {% if pageData and pageData.cdn and pageData.cdn.css %}
            {% for link in pageData.cdn.css %}
                <link rel="stylesheet" href="{{ link }}">
            {% endfor %}
        {% endif %}

    </head>

    <body>

        {% include "global/header.njk" ignore missing %}

        <main>
            {{ content | safe }}
        </main>

        {% include "global/footer.njk" ignore missing %}

      {#╔══════════════════╗
        ║     SCRIPTS      ║
        ╚══════════════════╝#}

        {# Framework — uncomment the one you are using #}
        {# Bootstrap JS #}
        <script src="{{ '/js/bootstrap.bundle.min.js' | url }}" defer></script>

        {# Bulma — no JS needed #}

        {# Per-page CDN JS #}
        {% if pageData and pageData.cdn and pageData.cdn.js %}
            {% for script in pageData.cdn.js %}
                <script src="{{ script }}" defer></script>
            {% endfor %}
        {% endif %}

        {# Page JS #}
        <script src="{{ ('/js/pages/' + title + '.js') | url }}"></script>

    </body>

</html>