{% extends 'front.html.twig' %}
{% block title %} {{ 'page.reg.title' | trans }} {% 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.reg.title2'|trans }} </h2>
                        <ul>
                            <li><a href="{{ path('front_home')}}">{{ 'title.Ac'| trans }}</a></li>
                            <li class="active"><a href="#">{{ 'page.reg.title3'|trans }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->
    <!-- about section start -->
    <section class="our-about 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.reg.title4'|trans }} <span class="title-span">{{ 'page.reg.title5'|trans }}</span> {{ 'page.reg.title6'|trans }}</h2>

                            {% else %}
                                <h2>{{ 'page.reg.title4'|trans }} <span class="title-span">{{ 'page.reg.title5'|trans }}</span> {{ 'page.reg.title6'|trans }}</h2>

                                {% endif %}


                                <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="video-popup">
                        <div id="vmap" style="width: 250px; height: 637px;" align="left"></div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="table-responsive">
                        <table  id="dt-example-responsive" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                            <tr>
                                <th width="35%" >{{'tab.t1' | trans}}</th>
                                <th>{{'tab.t2' | trans}}</th>
                                <th width="18%">{{'tab.t3' | trans}}</th>
                                <th>{{'tab.t4' | trans}} </th>
                                <th>{{'tab.t5' | trans}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% if presidents is defined and presidents != null %}
                            {% for president in presidents %}
                            <tr>
                                <td>{{ president.name }} {{ president.surname }}</td>
                                <td>{{ president.country }}</td>
                                <td>{{ president.fax }}</td>
                                <td>{{ president.tel }}</td>
                                <td><span class="label label-sm label-warning">{{ president.email }}</span></td>
                            </tr>
                            {% endfor %}
                            {% endif %}
                            </tbody>
                        </table>
                    </div>


                </div>

            </div>
        </div>
    </section>
    <!-- about section end -->


{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.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>#}

    {%  if app.request.locale == 'ar' %}
        <script type="text/javascript" src="{{ asset('maps/jquery.vmap.tunisia.ar.js')}}" charset="utf-8"></script>
    {% elseif app.request.locale == 'fr' %}
        <script type="text/javascript" src="{{ asset('maps/jquery.vmap.tunisia.fr.js')}}" charset="utf-8"></script>
    {% elseif app.request.locale == 'en' %}
        <script type="text/javascript" src="{{ asset('maps/jquery.vmap.tunisia.en.js')}}" charset="utf-8"></script>
    {% endif %}
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script>
        jQuery(document).ready(function () {
            $('#dt-example-responsive').DataTable({
                "lengthChange": false,
                // "lengthMenu": [[7,10, 25, 50, -1], [7,10, 25, 50, "All"]],
                "pageLength": 7,

                "ordering": false,
                "info":     false
                }
            );

            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 %}