{%extends "base.html.twig"%}

{%block title%} Presentation | {{parent()}} {%endblock%}

{%block body%}
<div class="">
    <div class="page-header page-header-small mt-0" style="background: rgba(0,0,0,0.3)">
        <!-- antonio mardi 17 septembre -->
        <div class="page-header-image" data-parallax="true"
            style="background-image: url('{{asset(section2.getWebPath())}}');">
        </div>
        <!--endmodif-->
        <div class="container pt-0 pb-0">
            {% if app.request.hasPreviousSession %}
                {% for type, messages in app.session.flashbag.all %}
                    {% for message in messages %}
                    <div class="al1">
                        <div class="alert alert-{{type}} alert-dismissable mb-0">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            {{ message|raw }}
                        </div>
                    </div>
                    {% endfor %}
                {% endfor %}
            {% endif %}
        </div>
        <div class="content-center">
            <div class="container">
                <h2 class="title" style="font-size: 40px; font-weight: 700">
                    {{section2.title}}
                </h2>
            </div>
        </div>
    </div>
    <div class="bg-gray">
        <div class="container">
            <ul class="breadcrumb mb-0 pl-0">
                <li class="breadcrumb-item">
                    <a class="link-gray" href="{{ path('imax_site_homepage') }}">Home</a>
                </li>
                <li class="breadcrumb-item active">
                    {{section2.title}}
                </li>
            </ul>
        </div>
    </div>

    <div class="section section-about-us mt-4">
        <div class="container">
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto text-center">
                    <h2 class="title">Who we are?</h2>
                    <h5 class="description">The laboratory 646-06 allows to reinvent the mobile networks to have a solution and maximum exploitation. </h5>
                </div>
            </div>
            <div class="separator separator-primary"></div>
            <div class="section-story-overview">
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <p class="blockquote blockquote-primary text-center">
                            {{section2.subtitle2}}
                            <small><a href="https://youtu.be/-P0dBJB1qVg" class="text-decoration-none">{{section2.text2}}</a></small>
                        </p>
                        <!-- First image on the left side -->
                        <div class="image-container image-left" style="background-image: url(../images/lab1.jpg); background-size: cover; background-position: center; height: 400px">
                        </div>
                    </div>
                    <div class="col-md-5 text-justify">
                        <!-- First image on the right side, above the article -->
                        <div class="image-container image-right mb-3"
                            style="background-image: url('../images/lab2.jpg');background-size: cover; background-position: center; height: 300px">
                        </div>
                        <h3>{{section2.subtitle1}}</h3>
                        <p>{{section2.text1}}</p>
                        <h3>{{section2.subtitle3}}</h3>
                        <p>{{section2.text3}}</p>
                        <h3>{{section2.subtitle4}}</h3>
                        <p>{{section2.text4}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ***OUR TEAM***
        ******************** -->
    <div class="testimonials-1 section-image mt-2 pt-3 pb-5" style="background: rgba(0,0,0,0.1)">
        <div class="container">
            <div class="row">
                <div class="col-md-6 ml-auto mr-auto mt-3 text-center">
                    <h2 class="title">Our litle team</h2>
                    <h4 class="description">Our jobeurs are to your service</h4>
                </div>
            </div>
            <div class="row mt-4">
                {%for teamlabo in teams%}
                <div class="col-md-4">
                    <div class="card card-testimonial">
                        <div class="card-avatar">
                            <a href="">
                                {%if teamlabo.img is not null%}
                                <img class="img img-raised" src="{{asset(teamlabo.getWebPath())}}" width="100%" height="125px" max-height="125px">
                                {%else%}
                                <img class="img img-raised" src="{{asset('images/avatar.png')}}" width="100%" height="125px" max-height="125px">
                                {%endif%}
                            </a>
                        </div>
                        <div class="d-flex flex-column">
                            <div class="mt-2 font-size-1">
                                {%if teamlabo.icon is not null%}
                                    {{teamlabo.icon | raw}}
                                {%endif%}
                            </div>
                        </div>
                        <div class="d-flex flex-column">
                            <div class="text-dark font-weight-medium mt-3">
                                {%if teamlabo.jobsFacts is not null%}
                                    {{teamlabo.jobsFacts | raw}}
                                {%endif%}
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="card-description">
                                {{teamlabo.persoDescription}}
                            </p>
                        </div>
                        <div class="icon icon-primary">
                            <i class="fa fa-quote-right"></i>
                        </div>
                        <div class="card-footer">
                            <h4 class="card-title">{{teamlabo.fullname}}</h4>
                            <p class="category">{{teamlabo.infoPersonal}}</p>
                        </div>
                    </div>
                </div>
                {%endfor%}
            </div>
        </div>
    </div>
    <div class="section section-contact-us text-center">
        <div class="container mt-5 mb-5">
            <h2 class="title">Want to work with us?</h2>
            <p class="description">Your project is very important to us. <br>To assure your demand, click the boutton below please so that your demand is valid <br> but if you are already member, immediately sign in.</p>
            <div class="row">
                <div class="col-lg-6 text-center ml-auto mr-auto col-md-8">
                    <div class="send-button">
                        {%if is_granted('IS_AUTHENTICATED_FULLY')%}
                        <a href="{{path('imax_site_contact')}}" class="btn btn-info btn-round btn-block btn-lg">
                            Send Message
                        </a>
                        {%else%}
                        <a data-toggle="modal" data-target="#modalSignUp" href="#" class="btn btn-info btn-round btn-block btn-lg">
                            Send Message
                        </a>
                        {%endif%}
                    </div>
                </div>
            </div>
        </div>
        <!-- ******MODAL****** 
             ************************ -->
        {% if is_granted('IS_AUTHENTICATED_FULLY') == 0 %}
        <div class="modal fade" id="modalSignUp" role="dialog" style="padding-right: 17px">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div data-modal="modalSignIn" style="display: block;">
                        <div class="modal-header">
                            <h4 class="modal-title">Sign Up as customer</h4>
                            <button aria-label="Fermer" arria-hidden="true" class="close" data-dismiss="modal" type="button"> &times; </button>
                        </div>
                        <div class="modal-body facebook-content">
                            <div class="mb-3" data-component="facebook-login">
                                <a class="btn btn-block btn-lg btn-social btn-facebook" data-fb-login-btn="" href="#">
                                    <span class="fab fa-facebook" style="padding-top: 0; margin-top: 0"></span>
                                    <div class="font-size-4">Sign Up with Facebook</div>
                                </a>
                            </div>
                            <div class="strike mb-3"><span>OR</span></div>
                            <div class="new_signup_form" style="text-align: left">
                                {{ form_start(form) }}
                                {{ form_errors(form) }}
                                <div class="form-group">
                                    {{ form_errors(form.civility) }}
                                    {{ form_widget(form.civility) }}
                                </div>
                                <div class="form-group">
                                    {{ form_errors(form.surname) }}
                                    {{ form_widget(form.surname) }}
                                </div>
                                <div class="form-group">
                                    {{ form_errors(form.name) }}
                                    {{ form_widget(form.name) }}
                                </div>
                                <div class="form-group">
                                    {{ form_errors(form.email) }}
                                    {{ form_widget(form.email) }}
                                </div>
                                {{form_errors(form.plainPassword.first)}}
                                <div class="form-group">
                                    {{form_widget(form.plainPassword.first)}}
                                </div>
                                <div class="form-group">
                                    {{form_widget(form.plainPassword.second)}}
                                </div>
                                <div class="mt-3 mb-2">
                                    {{form_widget(form.submit)}}
                                </div>
                                <div class="">
                                    {{form_widget(form.state)}}
                                    {{form_errors(form.state)}}
                                    {{form_label(form.state)}}
                                </div>
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {%endif%}
    </div>
{%endblock%}