<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token }}">
    <title>{{ title }}</title>
    {% block style %}
        <link rel="stylesheet" href='{% static "css/variables.css" %}'>
        <link rel="stylesheet" href='{% static "css/main.css" %}'>
    {% endblock %}
    <link rel="icon" type="image/png" href='{% media "favicon/favicon.ico" %}'>
</head>
<body>

    {% if debug %}
        <div class="debug-banner">
            <strong>Debug Mode Enabled</strong>
        </div>
    {% endif %}


    {% block header %}
        <header>
            <img src='{% media "toshiro.avif" %}' alt="Logo">
        </header>
    {% endblock %}

    <main>
        {% block content %}
        <div class="content">
            <div>
                <h1>{{ title }}</h1>
                <p>More information about the application.</p>
                <a href="https://runique.io/" target="_blank">Visit the Runique website</a>
            </div>
        </div>

        {% block messages %}
            {% messages %}
        {% endblock %}
    {% endblock %}

    </main>
    <footer>
        {% block footer %}
            <a href="{% link "inscription" %}">Sign up!</a>
            <a href="{% link "about" %}">About</a>
            <p>&copy; 2026 My Web Application</p>
        {% endblock %}
    </footer>
</body>
