{% extends '::base2.html.twig' %}
{% block title %}Compte {{ compte.raisonSociale }}{% endblock %}
{% block stylesheets %}{{ parent() }}{% endblock %}

{% block body %}

<div class="page-wrapper">
    <!-- BEGIN HEADER -->
    <div class="page-header navbar navbar-fixed-top">
        {% include 'account_executive/header.html.twig' %}
    </div>
    <!-- END HEADER -->

    <!-- BEGIN HEADER & CONTENT DIVIDER -->
    <div class="clearfix"> </div>
    <!-- END HEADER & CONTENT DIVIDER -->

    <!-- BEGIN CONTAINER -->
    <div class="page-container">
        <!-- BEGIN SIDEBAR -->
        <div class="page-sidebar-wrapper">
            <!-- BEGIN SIDEBAR -->
            <div class="page-sidebar navbar-collapse collapse">
                {% include 'account_executive/menuCompte.html.twig' %}
            </div>
            <!-- END SIDEBAR -->
        </div>
        <!-- END SIDEBAR -->

        <!-- BEGIN CONTENT -->
        <div class="page-content-wrapper">
            <!-- BEGIN CONTENT BODY -->
            <div style="background: #eef1f5;" class="page-content">
                <!-- BEGIN PAGE BAR -->
                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li>
                            <a href="{{ path('millesima_account_executive_accueil') }}">Mes Comptes</a>
                            <i class="fa fa-circle"></i>
                        </li>
                        <li>
                            <a href="{{ path('millesima_account_executive_compte_consulter', {'id' : compte.id}) }}">Consulter Compte {{ compte.raisonSociale }}</a>
                        </li>
                    </ul>
                </div>
                <!-- END PAGE BAR -->

                <!-- BEGIN PAGE TITLE-->
                <h1 class="page-title" style="padding-left: 15px;"> Compte {{ compte.raisonSociale }}
                    <small>Info</small>
                </h1>
                <!-- END PAGE TITLE-->

                <!-- BEGIN PAGE HEADER-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="tabbable-line boxless tabbable-reversed">

                            <div class="col-md-12 tab-pane">
                                <!-- BEGIN INFO COMPTE-->
                                <div class="portlet light bordered">
                                    {#<div class="portlet-title">
                                        <div class="caption font-red-sunglo">
                                            <i class="fa fa-gift"></i>Info Compte</div>
                                        <div class="tools"></div>
                                    </div>#}
                                    <div class="portlet-body form">
                                        <!-- BEGIN FORM-->

                                        <div class="form-horizontal">
                                            <div class="row form-body">
                                                <div class="col-md-2">

                                                    <div class="row">
                                                        {% if compte.logo is empty %}
                                                            <img src="{{ asset('uploads/images/common/no_logo.gif') }}"
                                                                 style="width: 90px;margin-left: 25%;" alt="" class="img-responsive"/>
                                                        {% else %}
                                                            <img src="{{ asset('uploads/comptes/' ~ compte.logo) }}"
                                                                 style="width: 90px;margin-left: 25%;" alt="" class="img-responsive"/>
                                                        {% endif %}
                                                    </div>

                                                </div>

                                                <div class="col-md-5">

                                                    <div class="row">
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <label style="color: #29B4B6;" class="col-md-6">Raison Sociale</label>
                                                            <div class="col-md-6">{{ compte.raisonSociale }}</div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <label style="color: #29B4B6;" class="col-md-6">Matricule Fiscale</label>
                                                            <div class="col-md-6">{{ compte.matriculeFiscale }}</div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <label style="color: #29B4B6;" class="col-md-6">Phone</label>
                                                            <div class="col-md-6">TEL: {{ compte.tel }} <br> FAX: {{ compte.fax }}</div>
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="col-md-5">

                                                    <div class="row">
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <label style="color: #29B4B6;" class="col-md-3">Email</label>
                                                            <div class="col-md-9">{{ compte.email }}</div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <label style="color: #29B4B6;" class="col-md-3">Site Web</label>
                                                            <div class="col-md-9">
                                                                <a href="{{ compte.sitWeb }}" target="_blank"> link [lien] </a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <label style="color: #29B4B6;" class="col-md-3">Adresse</label>
                                                            <div class="col-md-9">{{ compte.address }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-actions">
                                                <div class="row">
                                                    <div class="col-md-offset-4 col-md-12">
                                                        <a href="{{ path('millesima_account_executive_compte_edit', {'id' : compte.id})  }}">
                                                            <button type="submit" value="" class="col-md-3 btn submit">Modifier Compte</button>
                                                        </a>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>


                                        <!-- END FORM-->
                                    </div>
                                </div>
                                <!-- END INFO COMPTE-->

                                <!-- BEGIN USER COMPTE-->
                                {% if compte.utilisateurs is not empty %}
                                    <div class="portlet light bordered">
                                        <div class="portlet-title">
                                            <div class="caption font-red-sunglo">
                                            <i class="fa fa-cogs"></i>Gestion des Utilisateurs Compte</div>
                                        <div class="tools">

                                        </div>
                                    </div>
                                    <div class="portlet-body form">
                                        <!-- BEGIN FORM-->
                                        <div class="form-horizontal">
                                            <div class="row form-body">
                                                <div class=" table-responsive" style="overflow: hidden">
                                                    <table class="table" id="myTable1">
                                                        <thead>
                                                            <tr>
                                                                <th> # </th>
                                                                <th> Nom & Prénom </th>
                                                                <th> Mobile </th>
                                                                <th> Tel </th>
                                                                <th> Email </th>
                                                                <th> Rôle </th>
                                                                <th> Action </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                        {% for user in compte.utilisateurs %}
                                                            <tr id-user="{{ user.id }}" id-compte="{{ compte.id }}">
                                                                <td>{{ user.id }} </td>
                                                                <td>{{ user.firstname }} {{ user.lastname }}</td>
                                                                <td>{{ user.phonenumber }}</td>
                                                                <td>{{ user.telnumber }}</td>
                                                                <td>{{ user.email }}</td>
                                                                <td>
                                                                    {% if user.function == 'USER_D' %}
                                                                        Demandeur
                                                                    {% elseif user.function == 'USER_A' %}
                                                                        Acheteur
                                                                    {% else %}
                                                                        Représentant
                                                                    {% endif %}
                                                                </td>
                                                                <td>
                                                                    <a href="{{ path('millesima_account_executive_compte_user_edit', {'salt' : user.salt,'idC':idC}) }}" class="btn green-jungle btn-xs" title="Modifier">
                                                                        <i class="fa fa-pencil"></i>
                                                                    </a>
                                                                    <!--<a data-toggle="modal" data-target="#delete1{{ user.salt }}" class="btn btn-danger btn-xs" title="Supprimer">
                                                                        <i class="fa fa-trash-o"></i>
                                                                    </a>-->
                                                                    {% if user.function == 'USER_D' %}
                                                                        <button type="button" title="Acheteurs" class="btn yellow-haze btn-xs btn-affect-acheteurs" id="add_acheteur" id-compte="" id-user="" data-toggle="modal" data-target="#acheteur-affectation-modal">
                                                                            <i class="fa fa-user" aria-hidden="true"></i>
                                                                        </button>
                                                                    {% endif %}
                                                                    {% if user.function == 'USER_R' %}
                                                                        <button type="button" title="Demandeurs" class="btn yellow-soft btn-xs btn-affect-demandeurs" id="add_demandeur" id-compte="" id-user="" data-toggle="modal" data-target="#demandeur-affectation-modal">
                                                                            <i class="fa fa-user" aria-hidden="true"></i>
                                                                        </button>
                                                                    {% endif %}
                                                                    {% if user.enabled == true %}
                                                                        <a data-toggle="modal" data-target="#delete1{{ user.salt }}" class="btn btn-success btn-xs" title="Supprimer">
                                                                            Enabled
                                                                        </a>
                                                                    {% else %}
                                                                        <a data-toggle="modal" data-target="#delete1{{ user.salt }}" class="btn btn-danger btn-xs" title="Supprimer">
                                                                            Disabled
                                                                        </a>
                                                                    {% endif %}
                                                                </td>
                                                            </tr>
                                                            <!-- modal -->
                                                            <div id="delete1{{ user.salt }}" class="modal fade bs-delete-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                                                <div class="modal-dialog modal-md">
                                                                    <div class="modal-content">

                                                                        <div class="modal-header">
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                                                                            </button>
                                                                            <h4 class="modal-title" id="myModalLabel2">Are you sure you want to {% if user.enabled %} Disabled {% else %} Enabled {% endif %}this utilisateur compte?</h4>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                            {% if user.enabled %}
                                                                                <a href="{{ path('millesima_account_executive_compte_user_delete', {'salt' : user.salt,'idC':idC}) }}" class="btn btn-danger ">Disabled </a>
                                                                            {% else %}
                                                                                <a href="{{ path('millesima_account_executive_compte_user_delete', {'salt' : user.salt,'idC':idC}) }}" class="btn btn-success ">Enabled </a>
                                                                            {% endif %}
                                                                            </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- modal -->
                                                        {% endfor %}
                                                        <!-- Modal Affectation Demandeurs -->
                                                        <div class="modal fade" id="demandeur-affectation-modal" role="dialog">
                                                            <div class="modal-dialog">
                                                                <div class="modal-content">

                                                                    <div class="modal-header">
                                                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                                        <h4 class="modal-title">Affecter des Demandeurs</h4>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <div id="loading"style=" text-align: center;"></div>
                                                                        <div class="row" style="padding-right: 20px;padding-left: 20px;" id="affectation_demandeur_ajax_response"></div>
                                                                    </div>
                                                                    {#<div class="modal-footer">
                                                                        <button class="btn green" id-user="" id="btn-demandeur-affectation">
                                                                            Valider
                                                                        </button>
                                                                    </div>#}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End Modal Affectation Demandeurs -->
                                                        <!-- Modal Affectation Acheteurs -->
                                                        <div class="modal fade" id="acheteur-affectation-modal" role="dialog">
                                                            <div class="modal-dialog">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                                        <h4 class="modal-title">Affecter des Acheteurs</h4>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <div id="loading"style=" text-align: center;"></div>
                                                                        <div class="row" style="padding-right: 20px;padding-left: 20px;" id="affectation_acheteur_ajax_response"></div>
                                                                    </div>
                                                                    {#<div class="modal-footer">
                                                                        <button class="btn green" id-user="" id="btn-acheteur-affectation">
                                                                            Valider
                                                                        </button>
                                                                    </div>#}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End Modal Affectation Acheteurs -->
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- END FORM-->

                                    </div>
                                </div>
                                {% endif %}
                                <!-- END USER COMPTE--->

                                <!-- BEGIN COMPTE FACTURATION-->
                                {% if compte.compteFacturation is not empty %}
                                    <div class="portlet light bordered">
                                        <div class="portlet-title">
                                            <div class="caption font-red-sunglo">
                                            <i class="fa fa-cogs"></i>Gestion des Comptes de facturations</div>
                                        <div class="tools">

                                        </div>
                                    </div>
                                    <div class="portlet-body form">
                                        <!-- BEGIN FORM-->
                                        <div class="form-horizontal">
                                            <div class="row form-body">
                                                <div class=" table-responsive" style="overflow: hidden">
                                                    <table class="table" id="myTable2">
                                                        <thead>
                                                        <tr>
                                                            <th> # </th>
                                                            <th> Raison Sociale </th>
                                                            <th> Matricule Fiscale </th>
                                                            <th> Action </th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        {% for compteFact in compte.compteFacturation %}
                                                            <tr>
                                                                <td> {{ compteFact.id }} </td>
                                                                <td> {{ compteFact.raisonSociale }}</td>
                                                                <td> {{ compteFact.matriculeFiscale }}</td>
                                                                <td>
                                                                    <a href="{{ path('millesima_account_executive_compte_facturation_edit', {'id' : compteFact.id,'idC':idC})  }}" class="btn green-jungle btn-xs">
                                                                        <i class="fa fa-pencil"></i>  Modifier
                                                                    </a>
                                                                    {% if compteFact.enabled == false %}
                                                                        <a data-toggle="modal" data-target="#delete2{{ compteFact.id }}" class="btn btn-danger btn-xs">Disabled</a>
                                                                    {% else %}
                                                                        <a data-toggle="modal" data-target="#delete2{{ compteFact.id }}" class="btn btn-success btn-xs">Enabled</a>
                                                                    {% endif %}

                                                                </td>
                                                            </tr>
                                                            <!-- modal -->
                                                            <div id="delete2{{ compteFact.id }}" class="modal fade bs-delete-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                                                <div class="modal-dialog modal-md">
                                                                    <div class="modal-content">

                                                                        <div class="modal-header">
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                                                                            </button>
                                                                            <h4 class="modal-title" id="myModalLabel2">Are you sure you want to {% if compteFact.enabled %} Disabled  {% else %} Enabled {% endif %}this compte de facturation?</h4>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                            {% if compteFact.enabled == true %}
                                                                                <a href="{{ path('millesima_account_executive_compte_facturation_delete', {'id' : compteFact.id ,'idC':idC}) }}" class="btn btn-danger ">Disabled</a>
                                                                            {% else %}
                                                                                <a href="{{ path('millesima_account_executive_compte_facturation_delete', {'id' : compteFact.id ,'idC':idC}) }}" class="btn btn-success">Enabled</a>
                                                                            {% endif %}
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- modal -->
                                                        {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- END FORM-->
                                    </div>
                                </div>
                                {% endif %}
                                <!-- END COMPTE FACTURATION-->

                                <!-- BEGIN DEPARTEMENT-->
                                {% if compte.departement is not empty %}
                                    <div class="portlet light bordered">
                                        <div class="portlet-title">
                                            <div class="caption font-red-sunglo">
                                            <i class="fa fa-cogs"></i>Gestion des Département</div>
                                        <div class="tools">

                                        </div>
                                    </div>
                                    <div class="portlet-body form">
                                        <!-- BEGIN FORM-->
                                        <div class="form-horizontal">
                                            <div class="row form-body">
                                                <div class=" table-responsive" style="overflow: hidden">
                                                    <table class="table" id="myTable3">
                                                        <thead>
                                                        <tr>
                                                            <th> # </th>
                                                            <th> Nom département </th>
                                                            <th> Action </th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        {% for dep in compte.departement  %}
                                                            <tr>
                                                                <td> {{ dep.id }} </td>
                                                                <td> {{ dep.nom }}</td>
                                                                <td>
                                                                    <a href="{{ path('millesima_account_executive_departement_edit', {'id':dep.id,'idC':idC})  }}" class="btn green-jungle btn-xs">
                                                                        <i class="fa fa-pencil"></i>  Modifier
                                                                    </a>
                                                                    {% if dep.enabled == true %}
                                                                        <a data-toggle="modal" data-target="#delete3{{ dep.id }}" class="btn btn-success btn-xs">Enabled</a>
                                                                    {% else %}
                                                                        <a data-toggle="modal" data-target="#delete3{{ dep.id }}" class="btn btn-danger btn-xs">Disabled</a>
                                                                    {% endif %}
                                                                </td>
                                                            </tr>
                                                            <!-- modal -->
                                                            <div id="delete3{{ dep.id }}" class="modal fade bs-delete-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                                                <div class="modal-dialog modal-md">
                                                                    <div class="modal-content">

                                                                        <div class="modal-header">
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                                                                            </button>
                                                                            <h4 class="modal-title" id="myModalLabel2">Are you sure you want to {% if dep.enabled == true %}Disabled {% else %} Enabled {% endif %}this département?</h4>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                            {% if dep.enabled == true %}
                                                                                <a href="{{ path('millesima_account_executive_departement_delete', {'id' : dep.id,'idC':idC }) }}" class="btn btn-danger ">Disabled</a>
                                                                            {% else %}
                                                                                <a href="{{ path('millesima_account_executive_departement_delete', {'id' : dep.id,'idC':idC }) }}" class="btn btn-success ">Enabled</a>
                                                                            {% endif %}
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- modal -->
                                                        {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- END FORM-->
                                    </div>
                                </div>
                                {% endif %}
                                <!-- END DEPARTEMENT-->
                            </div>

                        </div>
                    </div>
                </div>
                <!-- END PAGE HEADER-->

                <!-- BEGIN PAGE FOOTER-->
                <div class="row">
                    <div class="col-md-offset-4 col-md-6">
                        <a href="{{ path('millesima_account_executive_accueil') }}">
                            <button type="submit" value="" style="background-color: #a01616;color: white;" class="col-md-8 btn">
                                Retour à mes comptes
                            </button>
                        </a>
                    </div>
                </div>
                <!-- END PAGE FOOTER-->

            </div>
            <!-- END CONTENT BODY -->
        </div>
        <!-- END CONTENT -->

    </div>
    <!-- END CONTAINER -->

    <!-- BEGIN FOOTER -->
    <div class="page-footer">
        {% include 'commun/footer.html.twig' %}
    </div>
    <!-- END FOOTER -->
</div>

    {% block javascripts %}
        {{ parent() }}

        <script>

            $(document).ready(function () {
                var $collectionHolder;
                var $addUsersLink = $('<i style="padding-left: 30%;" class="fa fa-plus"></i><a href="#" class="add_users_link">Add Utilisateurs Compte</a>');
                var $newLinkLi = $("div.users").append($addUsersLink);
                jQuery(document).ready(function () {
                    $collectionHolder = $('div.users');
                    $collectionHolder.append($newLinkLi);
                    $collectionHolder.data('index', $collectionHolder.find(':input').length);
                    $addUsersLink.on('click', function (e) {
                        // prevent the link from creating a "#" on the URL
                        e.preventDefault();
                        addUsersForm($collectionHolder, $newLinkLi);
                    });
                });
            });

            function addUsersForm($collectionHolder, $newLinkLi) {
                //console.log($collectionHolder);
                //alert($collectionHolder);

                // Get the data-prototype explained earlier
                var prototype = $collectionHolder.data('prototype');
                // get the new index
                var index = $collectionHolder.data('index');

                // Replace '__name__' in the prototype's HTML to
                // instead be a number based on how many items we have
                var newForm = prototype.replace(/__name__/g, index);

                // increase the index with one for the next item
                $collectionHolder.data('index', index + 1);

                // Display the form in the page in an li, before the "Add an experience" link li
                var $newFormLi = $('<div class="col-md-12"></div>').append(newForm);
                $newLinkLi.before($newFormLi);

                addUsersFormDeleteLink($newFormLi);
            }

            function addUsersFormDeleteLink($tagFormLi) {
                var $removeFormA = $('<a href="#">delete this form</a>');
                $tagFormLi.append($removeFormA);

                $removeFormA.on('click', function (e) {
                    // prevent the link from creating a "#" on the URL
                    e.preventDefault();

                    // remove the li for the tag form
                    $tagFormLi.remove();
                });
            }

            $(document).ready(function () {

                $("[class^='js-multiselect']").multiselect({});

            });
        </script>

        <script>
            //Affectation des demandeurs
            $("button.btn-affect-demandeurs").click(function () {
                $("button.btn-affect-demandeurs").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                $("button.btn-affect-demandeurs").attr('id-user', $(this).closest('tr').attr('id-user'));
                $("button#btn-demandeur-affectation").attr('id-user', $(this).closest('tr').attr('id-user'));
                var URL1 = Routing.generate('millesima_account_executive_ajax_get_demandeur_by_account', {'id' : $("#add_demandeur").attr('id-compte'),'idU' : $("#add_demandeur").attr('id-user') } );
                //alert(URL1);
                {% set loadingSA =  asset('back/assets/global/img/ajax-loading.gif')  %}
                $("#add_demandeur_ajax_response").html("<img src = '{{ loadingSA }}' />");
                var request = $.ajax({
                    url: URL1,
                    method: "POST",
                }).done(function (msg) {
                    $("#affectation_demandeur_ajax_response").html(msg);
                }).fail(function (jqXHR, textStatus) {
                    console.log(textStatus);
                });
            });

            //Affectation des acheteurs
            $("button.btn-affect-acheteurs").click(function () {
                $("button.btn-affect-acheteurs").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                $("button.btn-affect-acheteurs").attr('id-user', $(this).closest('tr').attr('id-user'));
                $("button.btn-acheteur-affectation").attr('id-user', $(this).closest('tr').attr('id-user'));
                var URL2 = Routing.generate('millesima_account_executive_ajax_get_acheteur_by_account', {'id' : $("#add_acheteur").attr('id-compte'),'idU' : $("#add_acheteur").attr('id-user') } );
                //alert(URL2);
                {% set loadingSA =  asset('back/assets/global/img/ajax-loading.gif')  %}
                $("#add_acheteur_ajax_response").html("<img src = '{{ loadingSA }}' />");
                var request = $.ajax({
                    url: URL2,
                    method: "POST",
                }).done(function (msg) {
                    $("#affectation_acheteur_ajax_response").html(msg);
                }).fail(function (jqXHR, textStatus) {
                    console.log(textStatus);
                });
            });
        </script>

        <script  type="text/javascript">
            $(document).ready(function() {
                $('#myTable1').DataTable( {
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
                    }
                } );
            } );
        </script>

        <style type="text/css">
            #myTable1_paginate {
                float: right;
            }
            #myTable1_filter {
                float: right;
            }
            #myTable1_info {
                padding-top: 15px;
            }
        </style>

        <script  type="text/javascript">
            $(document).ready(function() {
                $('#myTable2').DataTable( {
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
                    }
                } );
            } );
        </script>

        <style type="text/css">
            #myTable2_paginate {
                float: right;
            }
            #myTable2_filter {
                float: right;
            }
            #myTable2_info {
                padding-top: 15px;
            }
        </style>

        <script  type="text/javascript">
            $(document).ready(function() {
                $('#myTable3').DataTable( {
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
                    }
                } );
            } );
        </script>

        <style type="text/css">
            #myTable3_paginate {
                float: right;
            }
            #myTable3_filter {
                float: right;
            }
            #myTable3_info {
                padding-top: 15px;
            }
        </style>

    {% endblock %}

{% endblock %}