<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% load static %}

    <title>PartirDeZero {% block title %}{% endblock %}</title>

    <meta name="description" content="{% block description %}Apprendre le développement web et la programmation en partant de zéro.{% endblock %}">

    <meta name="author" content="PartirDeZero">

    <link rel="canonical" href="{% block canonical %}{{ request.build_absolute_uri }}{% endblock %}">

    <meta property="og:title" content="{% block og_title %}{{ self.title }}{% endblock %}">
    <meta property="og:description" content="{% block og_description %}Apprendre le développement web et la programmation.{% endblock %}">
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{% block og_image %}/settings/logo.png{% endblock %}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary_large_image">
    <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=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{% static 'css/app.css' %}">
    <link id="theme-css" rel="stylesheet" href="{% static 'css/colors_dark.css' %}">
    <link rel="stylesheet" href="{% static 'highlight/styles/agate.min.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'favicon.ico' %}">

    {% block extra_head %}{% endblock %}

    <script src="{% static 'js/functions.js' %}" defer></script>
    <script>
        // Theme bootstrap: apply saved preference ASAP to avoid flash
        (function() {
            try {
                var stored = localStorage.getItem('pdz-theme');
                var prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
                var theme = stored || (prefersLight ? 'dark' : 'light');
                document.documentElement.setAttribute('data-theme', theme);
                if (theme === 'light') {
                    var link = document.getElementById('theme-css');
                    if (link) link.href = "{% static 'css/colors_light.css' %}";
                }
            } catch (e) {}
        })();
    </script>
    <script src="{%static 'highlight/highlight.min.js' %}"></script>
    <script defer>hljs.highlightAll();</script>
</head>
<body>
    {% block header %}
        {% include "partials/_header.html" %}
    {% endblock %}

    <main>
        {% if messages %}
            <ul class="flash_messages">
                {% for message in messages %}
                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}

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

    {% block footer %}
        {% include "partials/_footer.html" %}
    {% endblock %}
</body>
</html>