{% load static wagtailcore_tags wagtailuserbar %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>
            {% block title %}
            {% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}
            {% endblock %}
            {% block title_suffix %}
            {% wagtail_site as current_site %}
            {% if current_site and current_site.site_name %}- {{ current_site.site_name }}{% endif %}
            {% endblock %}
        </title>
        {% if page.search_description %}
        <meta name="description" content="{{ page.search_description }}" />
        {% endif %}
        {% firstof og_image default_og_image as resolved_og_image %}
        {% if resolved_og_image %}
        <meta property="og:image" content="{{ resolved_og_image.url }}" />
        <meta property="og:image:width" content="{{ resolved_og_image.width }}" />
        <meta property="og:image:height" content="{{ resolved_og_image.height }}" />
        <meta property="og:image:alt" content="{{ resolved_og_image.alt }}" />
        {% endif %}
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="alternate" type="application/rss+xml" title="DeBuT AI 最新文章 RSS" href="{% url 'article_feed' %}">
        <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
        <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
        {% if ga4_measurement_id %}
        <script async src="https://www.googletagmanager.com/gtag/js?id={{ ga4_measurement_id }}"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '{{ ga4_measurement_id }}');
        </script>
        {% endif %}

        {# Force all links in the live preview panel to be opened in a new tab #}
        {% if request.in_preview_panel %}
        <base target="_blank">
        {% endif %}

        {# Global stylesheets #}
        <link rel="stylesheet" type="text/css" href="{% static 'css/mysite.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/footer.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/subscribe_fab.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/contact_form.css' %}">

        {% block extra_css %}
        {# Override this in templates to add extra stylesheets #}
        {% endblock %}
    </head>

    <body class="{% block body_class %}{% endblock %}">
        {% wagtailuserbar %}

        {% include "includes/header.html" %}

        <main class="site-main">
            <div class="site-container">
                {% block content %}{% endblock %}
            </div>
        </main>

        {% include "includes/footer.html" %}
        {% include "includes/contact_form.html" %}
        {% include "includes/subscribe_fab.html" %}
        
        {# Global javascript #}
        <script type="text/javascript" src="{% static 'js/mysite.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/header.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/contact_form.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/subscribe_fab.js' %}"></script>
        {# Instagram embed script to render IG oEmbeds #}
        <script async src="https://www.instagram.com/embed.js"></script>

        {% block extra_js %}
        {# Override this in templates to add extra javascript #}
        {% endblock %}
    </body>
</html>
