{% extends 'front.html.twig' %}
{% block title %} {{ 'page.be.title5'|trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}
    <!-- breadcrumb area start -->
    <section class="breadcrumb-area" id="home">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-area-content">
                        <h2>{{ 'page.be.title6'|trans }} </h2>
                        <ul>
                            <li><a href="{{ path('front_home')}}">{{ 'title.Ac'|trans }}</a></li>
                            <li class="active"><a href="#">{{ 'page.be.title6'|trans }} </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->

    <!-- offices section start -->
    <section class=" ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-50">

                        {% if app.request.locale == 'ar' %}
                            <h2>{{ 'page.be.title8'|trans }}<span class="title-span"> {{ 'page.be.title7'|trans }} </span>
                                <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                            </h2>
                        {% elseif app.request.locale == 'fr' %}
                            <h2>{{ 'page.be.title7'|trans }}<span class="title-span"> {{ 'page.be.title8'|trans }} </span>
                                <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                            </h2>
                        {% else %}
                            <h2>{{ 'page.be.title7'|trans }}<span class="title-span"> {{ 'page.be.title8'|trans }} </span>
                                <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                            </h2>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row" align="center">

                {% for level1 in levels1 %}

                    <div class="col-lg-12" align="center">
                        <div class="single-team-member col-lg-3" align="center">
                            <div class="team-member-img">
                                <img  class="imgBe" src="{{ asset('uploads/offices/'~level1.id~'/'~level1.path) }}" alt="BE">
                            </div>
                            <div class="team-member-info NomBe">
                                <a href="#"><h4>{{ level1.title }}</h4></a>
                                <a href="#"><h4>{{ level1.description }}</h4></a>
                                {% if level1.cv is null%}
                                {% else %}
                                    <a href="{{ asset('uploads/offices/'~level1.id~'/'~level1.cv) }}" target="_blank"><h4>{{ 'be.doc'|trans }} <i class=" icofont {% if app.request.locale == 'ar' %} icofont-circled-left   {% else %} icofont-circled-right {% endif %}"></i> </h4></a>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                {% endfor %}

                <div class="col-lg-3"></div>

                {% for level2 in levels2 %}

                    <div class="col-lg-3">
                        <div class="single-team-member" align="center">
                            <div class="team-member-img">
                                <img class="imgBe" src="{{ asset('uploads/offices/'~level2.id~'/'~level2.path) }}" alt="BE">
                            </div>
                            <div class="team-member-info NomBe">
                                <a href="#"><h4>{{ level2.title }}</h4></a>
                                <a href="#"><h4>{{ level2.description }}</h4></a>
                                {% if level2.cv is null%}
                                {% else %}
                                    <a href="{{ asset('uploads/offices/'~level2.id~'/'~level2.cv) }}" target="_blank"><h4>{{ 'be.doc'|trans }}  <i class="icofont {% if app.request.locale == 'ar' %}  icofont-circled-left   {% else %} icofont-circled-right {% endif %}"></i></h4></a>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                {% endfor %}
                <div class="col-lg-3"></div>

                {% for level3 in levels3 %}

                    <div class="col-lg-3">
                        <div class="single-team-member" align="center">
                            <div class="team-member-img">
                                <img  class="imgBe" src="{{ asset('uploads/offices/'~level3.id~'/'~level3.path) }}" alt="BE">
                            </div>
                            <div class="team-member-info NomBe ">
                                <a href="#"><h4>{{ level3.title }}</h4></a>
                                <a href="#"><h4>{{ level3.description }}</h4></a>
                                {% if level3.cv is null%}
                                {% else %}
                                    <a href="{{ asset('uploads/offices/'~level3.id~'/'~level3.cv) }}" target="_blank"><h4>{{ 'be.doc'|trans }}  <i class="icofont {% if app.request.locale == 'ar' %}  icofont-circled-left   {% else %} icofont-circled-right {% endif %}"></i></h4></a>
                                {% endif %}
                            </div>
                        </div>
                    </div>


                {% endfor %}
            </div>
        </div>
    </section>
    <!-- testimonial section end -->

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="{{ asset('maps/jquery.vmap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('maps/jquery.vmap.tunisia.fr.js')}}" charset="utf-8"></script>
    <script>
        jQuery(document).ready(function () {
            jQuery('#vmap').vectorMap({
                map: 'tunisia',
                onRegionClick: function (element, code, region) {
                    var message = 'You clicked "'
                        + region
                        + '" which has the code: '
                        + code.toUpperCase();

                    alert(message);
                }
            });
        });
    </script>
{% endblock %}