<!DOCTYPE html>
<html data-theme="light" lang="fr">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Ploush{% endblock %}</title>
    <link rel="icon" href="{{ asset('images/logo/favicon.svg') }}" type="image/svg+xml">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {# Anti-flash - DOIT être avant tout le reste #}
    <script>
        (function () {
            const saved = localStorage.getItem('mc-theme') || 'light';
            document.documentElement.setAttribute('data-theme', saved);
        })();
    </script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

    {# Variables CSS globales et styles de base #}
    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
    {# Styles du header #}
    <link rel="stylesheet" href="{{ asset('styles/partials/header.css') }}">
    {#Style des flash messages #}
    <link rel="stylesheet" href="{{ asset('styles/partials/flash.css') }}">

    {% block stylesheets %}{% endblock %}

    {% block javascripts %}
        {% block importmap %}{{ importmap('app') }}{% endblock %}
    {% endblock %}
</head>

{# id="page-body" + data-bg pour le changement de fond #}
<body id="page-body">

{% include 'partials/_header.html.twig' %}
<main>
    {% block titlePage %}{% endblock %}

    {% block flash_messages %}
        <div class="flash-container">
            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div class="flash flash-{{ label }}">
                        <span class="flash-body">{{ message }}</span>
                        <button class="flash-close" onclick="this.parentElement.remove()" aria-label="Fermer">✕</button>
                    </div>
                {% endfor %}
            {% endfor %}
        </div>
    {% endblock %}

    {% block main %}{% endblock %}
</main>
</body>
</html>
