{% set body_classes = body_class(['header-fixed', 'header-animated', 'header-dark', 'header-transparent', 'sticky-footer']) %}
{% set grid_size = theme_var('grid-size') %}
{% set compress = theme_var('production-mode') ? '.min.css' : '.css' %}
{% use 'blocks/base.html.twig' %}
<!DOCTYPE html>
<html lang="{{ grav.language.getActive ?: grav.config.site.default_lang }}">
<head>
{% block head deferred %}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://use.typekit.net/qpi5siq.css">
    <link rel="icon" type="image/x-icon" href="{{ url('theme://images/favicon.jpg') }}">
  <title>{{ site.title }}</title>
{% endblock head %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ url('theme://css/reset.css') }}">
    <link rel="stylesheet" href="{{ url('theme://css/style.css') }}">
    <link rel="stylesheet" media="screen and (max-width: 667px)" href="{{ url('theme://css/phone.css') }}">
{% endblock %}

{% block javascripts %}
    {% do assets.addJs('theme://js/player-and-archiveplayer.js', {group:'bottom'}) %}
    {% do assets.addJs('theme://js/changement-page.js', {group:'bottom'}) %}
    {% do assets.addJs('theme://js/affichage-info-archives.js', {group:'bottom'}) %}
{% endblock %}

{% block assets deferred %}
    {{ assets.css()|raw }}
    {{ assets.js()|raw }}
{% endblock %}
</head>

<body id="top" class="{% block body_classes %}{{ body_classes }}{% endblock %}">
    <div id="page-wrapper">
    {% block header %}
        <div id="header">
            <div id="name">
                <button class="nav-home" onclick="showPage('home', this)">Radio Garage</button>
            </div>
            <div id="navigation">
                <div id="archives-button">
                    <button class="nav-btn" onclick="showPage('archives', this)">Archives</button>
                </div>
                <div id="apropos-button">
                    <button class="nav-btn" onclick="showPage('about', this)">À propos</button>
                </div>
            </div>
        </div>
    {% endblock %}

        <section id="start">
            {% block body %}
                <section id="body-wrapper" class="section">
                    <section class="container {{ grid_size }}">
                        {% block messages %}
                            {% include 'partials/messages.html.twig' ignore missing %}
                        {% endblock %}
                        {{ block('content_surround') }}
                    </section>
                </section>
            {% endblock %}
        </section>

    </div>

    {% block about %}
        <div id="about" class="page" style="display:none;">
            <div id="apropos-box">
            
                <div id="info-apropos">
                    <div id="presentation">
                        <h3 class="title-apropos">Présentation</h3>
                            <p class="text-apropos">
                                Web radio 100% auto-gérée par les étudiantxes et membres de l’ésadhar Le Havre–Rouen, créée en 2025. <br>
                                Radio Garage encourage toutes les formes de création sonores et radiophoniques, la documentation et l’archivage des temps forts de l’école et est ouverte aux contributions ponctuelles comme longues durées.
                            </p>
                        </div>
                        <div id="gestionmaintenance">
                            <h3 class="title-apropos">Gestion et maintenance</h3>
                                <p class="text-apropos">
                                    La gestion et la maintenance de Radio Garage se fait par cycle et par groupe d’au moins 3 personnes.<br>
                                    Les missions sont les suivantes :<br>
                                    Maintient et actualisation du site web<br>
                                    Gestion de la mise en ligne des pièces sonores<br>
                                    Gestion et coordination des contributeurxices<br>
                                    Organisation d’événements<br>
                                    Gestion du compte Instagram et de la communication interne.<br>
                                    <br>
                                    Pour cette année de lancement, ces missions sont assurées par :<br>
                                    Méline Grellier (étudiante en 4ESP)<br>
                                    Louise Fantozzi (étudiante en 4DGI)
                                </p>
                        </div>
                        <div id="contact">
                            <h3 class="title-apropos">Contact</h3>
                            <p class="text-apropos">
                                Pour toutes envie de contributions, de discussion ou autre, pour nous contacter c’est par ici : <a href="mailto:radio.garage@outlook.fr" target="_blank">radio.garage@outlook.fr</a> ou par là : <a href="https://www.instagram.com/radio__garage/" target="_blank">@radio__garage</a>
                            </p>
                        </div>
                            
                    </div>

                    <div id="logoandcredits">
					    <p>
						    Web design, logo et identité : <a href="">Méline Grellier</a> et <a href="">Louise Fantozzi</a><br>
						    Développement : <a href="">Odilon Aouatah</a><br>
						    Typographie : Covik Sans Mono
					    </p>
					    <img src="{{ url('theme://images/radiogarage_logo.jpg') }}" id="logo">
    			    </div>
            </div>
        </div>
    {% endblock %}

    {# {% block mobile %}
    <div class="mobile-container">
        <div class="overlay" id="overlay">
            <div class="mobile-logo">
                {% include 'partials/logo.html.twig' with {mobile: true} %}
            </div>
            <nav class="overlay-menu">
                {% include 'partials/navigation.html.twig' with {tree: true} %}
            </nav>
        </div>
    </div>
    {% endblock %} #}

{% block bottom %}
    {{ assets.js('bottom')|raw }}
{% endblock %}

</body>
</html>
