{% extends 'frontend.html.twig' %}

{% block title %}Qui sommes nous | {{ parent() }}{% endblock %}

{% block body %}
    {% if null != sectionQuiSommesNous %}
        <div id="banner" class="container-fluid " style="background: url({{ vich_uploader_asset(sectionQuiSommesNous, 'imageFile') }})no-repeat center center; background-size:cover; "></div>
        {% else %}
        <div id="banner" class="container-fluid " style="background: url({{ asset('frontend/dist/assets/img/HOMEPAGE_2023.jpg') }})no-repeat center center; background-size:cover; "></div>
    {% endif %}
	
    <div class="navbarCongres">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-dark px-0 d-flex justify-content-between">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCongres" aria-controls="navbarCongres" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCongres">
                    <ul class="navbar-nav d-flex justify-content-end w-100">
                        <li class="nav-item"><a href="#{{ articleHistoire ? articleHistoire.code : 'histoire' }}" class="nav-link">Histoire</a></li>
                        <li class="nav-item"><a href="#{{ articleMission ? articleMission.code : 'missions' }}" class="nav-link">Missions</a></li>
                        <li class="nav-item"><a href="#{{ articleMetier ? articleMetier.code : 'metiers' }}" class="nav-link">Métiers</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="banner__title">Qui sommes-nous ?</h1>
                <div class="d-flex flex-column flex-lg-row justify-content-start align-items-center"></div>
            </div>
        </div>
    </div>
    <div class="container-fluid px-0">
        <div class="row d-flex justify-content-center">
            <div class="col-lg-12">
                <span class="ancre position-relative" id="{{ articleHistoire ? articleHistoire.code : 'histoire' }}"></span>
            </div>
        </div>
        <section class="pt-0">
            <div class="container">	
                <div class="row">
                    <div class="col-12">
                        <h3>{{ articleHistoire ? articleHistoire.title : '' }}</h3>
                        <p>{{ articleHistoire ? articleHistoire.description|raw : '' }}</p>
                    </div>
                </div>
                {{ articleHistoire ? articleHistoire.content|raw : '' }}
                {# <div class="row d-flex justify-content-center align-items-center my-30">
                    
                </div> #}
            </div>
        </section>
        <div class="row d-flex justify-content-center">
            <div class="col-lg-12 position-relative">
                <span class="ancre" id="{{ articleMission ? articleMission.code : 'missions' }}"></span>
            </div>
        </div>
        <section class="bg-grey">
            <div class="container">	
                <div class="row">
                    <div class="col-12">
                        <h3>{{ articleMission ? articleMission.title : '' }}</h3>
                        <p>{{ articleMission ? articleMission.description|raw : '' }}</p> 
                    </div>
                </div>
                {{ articleMission ? articleMission.content|raw : '' }}
                {# <div class="row d-flex justify-content-start align-items-center my-30">
                    
                </div> #}
            </div>
        </section>
        <div class="row d-flex justify-content-center">
            <div class="col-lg-12 position-relative">
                <span class="ancre" id="{{ articleMetier ? articleMetier.code : 'metiers' }}"></span>
            </div>
        </div>
        <section>
            <div class="container">	
                <div class="row">
                    <div class="col-lg-12">
                        <h3>{{ articleMetier ? articleMetier.title : '' }}</h3>
                        <p>{{ articleMetier ? articleMetier.description|raw : '' }}</p>
                        <div class="row">
                            {{ articleMetier ? articleMetier.content|raw : '' }}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}