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

{%block title%} About us | {{parent()}} {%endblock%}

{%block body%}
<div class="wrapper">
    <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" style="background-image: url('{{asset(section3.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="row">
                <div class="col-md-8 ml-auto mr-auto">
                    <h1 class="title">{{section3.title}}</h1>
                    <h4>{{section3.description}}</h4>
                </div>
            </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">
                    {{section3.title}}
                </li>
            </ul>
        </div>
    </div>
    <div class="section mt-4">
        <div class="about-description text-center">
            <div class="features-3">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 mr-auto ml-auto">
                            <h2 class="title">
                                {%if section3.subtitle1 is not null%}
                                    {{section3.subtitle1}}
                                {%endif%}
                            </h2>
                            <h4 class="description">
                                {%if section3.text1 is not null%}
                                    {{section3.text1 | raw}}
                                {%endif%}
                            </h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="info info-hover">
                                <div class="icon icon-success icon-circle">
                                {%if section1 is not null%}
                                {{section1.img1 | raw}}
                                {%endif%}
                              </div>
                              <h4 class="info-title">
                                {%if section1 is not null%}
                                {{section1.subtitle1}}
                                {%endif%}
                              </h4>
                              <p class="description">
                                {%if section1 is not null%}
                                {{section1.text1}}
                                {%endif%}
                              </p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="info info-hover">
                                <div class="icon icon-info icon-circle">
                                {%if section1 is not null%}
                                {{section1.img2 | raw}}
                                {%endif%}
                              </div>
                              <h4 class="info-title">
                                {%if section1 is not null%}
                                {{section1.subtitle2}}
                                {%endif%}
                              </h4>
                              <p class="description">
                                {%if section1 is not null%}
                                {{section1.text2}}
                                {%endif%}
                              </p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="info info-hover">
                                <div class="icon icon-primary icon-circle">
                                    {%if section1 is not null%}
                                    {{section1.img3 | raw}}
                                    {%endif%}
                                </div>
                                <h4 class="info-title">
                                    {%if section1 is not null%}
                                    {{section1.subtitle3}}
                                    {%endif%}
                                </h4>
                                <p class="description">
                                    {%if section1 is not null%}
                                    {{section1.text3}}
                                    {%endif%}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="separator-line separator-primary"></div>

        <div class="projects-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 ml-auto mr-auto text-center">
                        <h2 class="title">
                            {%if section3 is not null%}
                                {{section3.subtitle2}}
                            {%endif%}
                        </h2>
                        <h4 class="description">
                            {%if section3 is not null%}
                                {{section3.text2 | raw}}
                            {%endif%}
                        </h4>
                        <div class="section-space"></div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-4 ml-auto mt-4">
                        <div class="card card-background card-background-product card-raised">
                            <img src="{{asset(section4.img1 | raw)}}" alt="{{section4.subtitle1}}" style="max-height:500px" width="100%">
                        </div>
                    </div>
                    <div class="col-md-5 mr-auto">
                        <div class="info info-horizontal">
                            <div class="icon icon-danger">
                                <i class="now-ui-icons ui-2_chat-round"></i>
                            </div>
                            <div class="description">
                                <h4 class="info-title">
                                    {%if section4.subtitle1 is not null%}
                                       {{section4.subtitle1}}
                                    {%endif%}
                                </h4>
                                <p class="description">
                                    {%if section4.text1 is not null%}
                                       {{section4.text1 | raw}}
                                    {%endif%}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-5 ml-auto">
                        <div class="info info-horizontal">
                            <div class="description">
                                <h4 class="info-title mt-0">
                                    {%if section4.subtitle2 is not null%}
                                        {{section4.subtitle2}}
                                    {%endif%}
                                </h4>
                                <p class="description">
                                    {%if section4.text2 is not null%}
                                        {{section4.text2 | raw}}
                                    {%endif%}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mr-auto">
                        <div class="card card-background card-background-product card-raised">
                            <img src="{{asset(section4.img2 | raw)}}" alt="{{section4.subtitle2}}" width="100%" style="max-height:500px">
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-4 ml-auto mt-4">
                        <div class="card card-background card-background-product card-raised">
                            <img src="{{asset(section4.img3 | raw)}}" alt="{{section4.subtitle3}}" width="100%" style="max-height:500px">
                        </div>
                    </div>
                    <div class="col-md-5 mr-auto">
                        <div class="info info-horizontal">
                            <div class="icon icon-danger">
                                <i class="now-ui-icons ui-2_chat-round"></i>
                            </div>
                            <div class="description">
                                <h4 class="info-title">
                                    {%if section4.subtitle3 is not null%}
                                       {{section4.subtitle3}}
                                    {%endif%}
                                </h4>
                                <p class="description">
                                    {%if section4.text3 is not null%}
                                       {{section4.text3 | raw}}
                                    {%endif%}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-5 ml-auto">
                        <div class="info info-horizontal">
                            <div class="description">
                                <h4 class="info-title mt-0">
                                    {%if section4.subtitle4 is not null%}
                                        {{section4.subtitle4}}
                                    {%endif%}
                                </h4>
                                <p class="description">
                                    {%if section4.text4 is not null%}
                                        {{section4.text4 | raw}}
                                    {%endif%}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mr-auto">
                        <div class="card card-background card-background-product card-raised">
                            <img src="{{asset(section4.img4 | raw)}}" alt="{{section4.subtitle4}}" width="100%" style="max-height:500px">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ****FIN D EQUIPE**** -->
        <hr class="my-5">
        <div class="about-office">
            <div class="container">
                <div class="row text-center">
                    <div class="col-md-8 ml-auto mr-auto">
                        <h2 class="title">Our demonstration</h2>
                        <h4 class="description">
                            Here are some pictures of our project.
                        </h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 mt-4">
                        <img class="rounded img-raised" alt="" src="{{asset('images/lab6.jpg')}}" width="100%" height="100%" style="max-height: 280px">
                    </div>
                    <div class="col-md-4 mt-4">
                        <img class="rounded img-raised" alt="" src="{{asset('images/lab7.jpg')}}" width="100%" height="100%" style="max-height: 280px">
                    </div>
                    <div class="col-md-4 mt-4">
                        <img class="rounded img-raised" alt="" src="{{asset('images/lab8.png')}}" width="100%" height="100%" style="max-height: 280px">
                    </div>
                    <div class="col-md-6 mt-4">
                        <img class="rounded img-raised" alt="" src="{{asset('images/lab9.png')}}" width="100%" height="100%" style="max-height: 412px">
                    </div>
                    <div class="col-md-6 mt-4">
                        <img class="rounded img-raised" alt="" src="{{asset('images/lab10.png')}}" width="100%" height="100%" style="max-height: 412px">
                    </div>
                    <div class="col-md-8 mt-4" style="display: block; margin: 0 auto">
                        <img class="rounded img-raised" alt="" src="{{asset('images/lab11.png')}}" width="100%" height="100%" style="max-height: 500px">
                    </div>

                </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>
    </div>
{%endblock%}