{% extends "porto-corporate-layout.html.twig" %}

{% block stylesheets %}

    {{ parent() }}

    {{ encore_entry_link_tags('accueil-style') }}

{% endblock %}

{% block pageheader %}{% endblock %}

{% block container_class %} container-fluid px-0 py-2 {% endblock %}

{% block pagecontent %}

    {% if app.user is null %}
        <style>
            .header-nav-features {display: none !important;}
        </style>
    {% endif %}

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                {% for flashMessage in app.session.flashbag.get('error') %}
                    <div class="alert alert-danger alert-dismissible" >
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        {{ flashMessage|raw }}
                    </div>
                {% endfor %}
                {% for flashMessage in app.session.flashbag.get('notice') %}
                    <div class="alert alert-success alert-dismissible" >
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        {{ flashMessage|raw }}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {% if bandeauAccueilAsset is not null %}

        <style>
            .bandeau-container {width: 100%; height: 35vw; background-image: url('{{bandeauAccueilAsset}}'); background-size: 100% auto; background-repeat: no-repeat;}
            .bandeau-h1 {font-size: 4.5vw; position: relative; top: 6.5vw;}
            .bandeau-h2 {font-size: 2.5vw; position: relative; top: 12vw;}
            @media (max-width: 800px) {
                .bandeau-h1 {top: 3.5vw;}
                .bandeau-h2 {top: 6vw;}
            }
            @media (max-width: 500px) {
                .bandeau-container {height: 43vw;}
                .bandeau-h1 {top: 1vw;}
                .bandeau-h2 {top: 3vw;}
            }
        </style>


        <div class="bandeau-container">
            <h1 class="bandeau-h1 text-center color-bandeau-accueil">{{titrePrincipal}}</h1>
            {% if titresSecondaires|length > 0 %}
                <h2 class="bandeau-h2 text-center color-bandeau-accueil" id="toggle-title">{{titresSecondaires[0]}}</h2>
            {% endif %}
        </div>

    {% endif %}


{% endblock %}

{% block javascript %}

    {{ parent() }}

    <script>

        var titres_secondaires = new Array();
        {% if titresSecondaires is defined and titresSecondaires is iterable %}
            {% for titre in titresSecondaires %}
                titres_secondaires.push("{{titre}}");
            {% endfor %}
        {% endif %}

    </script>

    {{ encore_entry_script_tags('accueil-script') }}

    <script>


        $(document).ready(function() {
        });

    </script>

{% endblock %}