<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Bienvenue !{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {% block stylesheets %}
        <!-- Bootstrap icons-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
        {% endblock %}
        {% block javascripts %}
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="{{ asset('js/scripts.js') }}"></script>
        {% endblock %}
    </head>
    <body style="background-color: blue;" class="bg-light d-flex flex-column min-vh-100">

    {% block menu %}
        <!-- Navigation -->
        <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: rgb(10, 20, 32);">
            <div class="container-fluid">
                <a class="navbar-brand" href="/">
                    <img src="{{ asset('media/fractal.png') }}" alt="Fractal" width="50" height="50" />
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <!-- Centrer le menu -->
                    <ul class="navbar-nav justify-content-center w-100 mb-2 mb-md-0">
                        {{ render_bootstrap_menu('main') }}
                        {% if app.user %}
                            {{ render_bootstrap_menu('account') }}
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="{{ path('app_membre_fractal_show', {'id': app.user.membreFractal.id}) }}">Mon Compte</a>
                            </li>
                            {% if 'ROLE_ADMIN' in app.user.roles %}
                                {{ render_bootstrap_menu('admin') }}
                            {% endif %}
                        {% else %}
                            {{ render_bootstrap_menu('anonymousaccount') }}
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
    {% endblock %}

    {%  block alerts %}
            {% for type, messages in app.flashes %}
                {% for message in messages %}
                    {%if type == 'error'%} {% set type = 'danger' %} {%endif%}
                    {%if type == 'message'%} {% set type = 'info' %} {%endif%}
                    <div class="alert alert-{{ type }} alert-dismissible" role="alert">
                        <div>{{ message|raw }}</div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %} {# messages #}
            {% endfor %} {# type, messages #}
        {% endblock %} {# alerts #}
        {% block body %}
        <div class="container body-container pt-5 mt-5">

            <main>
        
              {# Ici la partie utile que les gabarits des pages vont surcharger #}
                {% block main %}
                <div class="row">
                    <div class="col-md-12">
                        <p>
                            <i>MAIN</i>
                        </p>
                    </div>
                </div>
                {% endblock %} {# main #}

            </main>
        
        </div> <!-- /.body-container -->
        
                {% block footer %}
                <footer class="text-center text-lg-start bg-black text-muted mt-auto" style="background-color: rgba(36,44,50,255);">
                    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
                        Application Collection Fractal
                        <small><br><small><small>Inspiré du rendu de Timothée Mathubert</small></small></small>
                    </div>

                </footer>
                {% endblock %} {# footer #}
        
        {% endblock %}
    </body>
</html>
