{% extends '::base2.html.twig' %}
{% block title %}Gestion des Comptes - Consulter{% endblock %}
{% block stylesheets %}{{ parent() }}{% endblock %}

{% block body %}

<div class="page-wrapper">
    <!-- BEGIN HEADER -->
    <div class="page-header navbar navbar-fixed-top">
        {% include 'admin/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 'admin/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_administrator_compte_liste') }}">Gestion des Comptes</a>
                            <i class="fa fa-circle"></i>
                        </li>
                        <li>
                            <a href="{{ path('millesima_administrator_compte_consult', {'id' : compte.id}) }}">Consulter
                                Compte {{ compte.raisonSociale }}</a>
                        </li>
                    </ul>
                </div>
                <!-- END PAGE BAR -->

                <!-- BEGIN PAGE TITLE-->
                <h1 class="page-title"> Compte {{ compte.raisonSociale }}
                    <small>Consulter</small>
                </h1>
                <!-- END PAGE TITLE-->

                <!-- BEGIN PAGE HEADER-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light bordered">
                            <div class="portlet-title">
                                <div class="font-red-sunglo">
                                    {#<div class="portlet-title">
                                        <div class="caption">
                                            <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/images/' ~ 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="font-weight: 600;" class="col-md-6">Raison
                                                                Sociale</label>
                                                            <div style="color: black;"
                                                                 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="font-weight: 600;" class="col-md-6">Matricule
                                                                Fiscale</label>
                                                            <div style="color: black;"
                                                                 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="font-weight: 600;"
                                                                   class="col-md-6">Phone</label>
                                                            <div style="color: black;" 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="font-weight: 600;"
                                                                   class="col-md-3">Email</label>
                                                            <div style="color: black;"
                                                                 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="font-weight: 600;" class="col-md-3">Site
                                                                Web</label>
                                                            <div style="color: black;"
                                                                 class="col-md-9">{{ compte.sitWeb }}</div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <label style="font-weight: 600;"
                                                                   class="col-md-3">Adresse</label>
                                                            <div style="color: black;"
                                                                 class="col-md-9">{{ compte.address }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-actions">
                                                <div class="row">
                                                    <div class="col-md-offset-5 col-md-9">
                                                        <a href="{{ path('millesima_administrator_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>
                            </div>
                        </div>
                        <!-- END INFO COMPTE-->

                        <!-- BEGIN USER COMPTE-->
                        {% if compte.utilisateurs is not empty %}
                            <div class="portlet light bordered">
                                <div class="portlet box">
                                    <div class="portlet-title font-red-sunglo">
                                        <div class="caption">
                                            <i class="fa fa-cogs"></i>Gestion des Utilisateurs Compte
                                        </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_administrator_compte_user_edit', {'salt' : user.salt}) }}"
                                                                       class="btn green-jungle btn-xs">
                                                                        <i class="fa fa-pencil"></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 user 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_administrator_compte_user_delete', {'salt' : user.salt}) }}" class="btn btn-danger ">Disabled </a>
                                                                            {% else %}
                                                                                <a href="{{ path('millesima_administrator_compte_user_delete', {'salt' : user.salt}) }}" 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 class="form-actions">
                                                <div class="row">
                                                    <div class="col-md-offset-4 col-md-12">
                                                        <a href="">
                                                            <button type="submit" value="" class="col-md-3 btn green">Ajouter un utilisateur compte</button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>#}
                                        </div>
                                        <!-- END FORM-->

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

                        <!-- BEGIN COMPTE FACTURATION-->
                        {% if compte.compteFacturation is not empty %}
                            <div class="portlet light bordered">
                                <div class="portlet box">
                                    <div class="portlet-title font-red-sunglo">
                                        <div class="caption">
                                            <i class="fa fa-cogs"></i>Gestion des Comptes de facturations
                                        </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_administrator_compte_facturation_edit', {'id' : compteFact.id}) }}"
                                                                       class="btn green-jungle btn-xs">
                                                                        <i class="fa fa-pencil"></i>
                                                                    </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 facturation compte ?</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_administrator_compte_facturation_delete', {'id' : compteFact.id }) }}" class="btn btn-danger ">Disabled</a>
                                                                            {% else %}
                                                                                <a href="{{ path('millesima_administrator_compte_facturation_delete', {'id' : compteFact.id }) }}" class="btn btn-success">Enabled</a>
                                                                            {% endif %}
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- modal -->
                                                        {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            {#<div class="form-actions">
                                                <div class="row">
                                                    <div class="col-md-offset-4 col-md-12">
                                                        <a href="">
                                                            <button type="submit" value="" class="col-md-3 btn green">Ajouter un compte de facturation</button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>#}
                                        </div>
                                        <!-- END FORM-->

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

                        <!-- BEGIN DEPARTEMENT-->
                        {% if compte.departement is not empty %}
                            <div class="portlet light bordered">
                                <div class="portlet box">
                                    <div class="portlet-title font-red-sunglo">
                                        <div class="caption">
                                            <i class="fa fa-cogs"></i>Gestion des Département
                                        </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_administrator_departement_edit', {'id' : dep.id}) }}"
                                                                       class="btn green-jungle btn-xs">
                                                                        <i class="fa fa-pencil"></i>
                                                                    </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 Departement?</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_administrator_departement_delete', {'id' : dep.id }) }}" class="btn btn-danger ">Disabled</a>
                                                                            {% else %}
                                                                                <a href="{{ path('millesima_administrator_departement_delete', {'id' : dep.id }) }}" class="btn btn-success ">Enabled</a>
                                                                            {% endif %}
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- modal -->
                                                        {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            {#<div class="form-actions">
                                                <div class="row">
                                                    <div class="col-md-offset-4 col-md-12">
                                                        <a href="">
                                                            <button type="submit" value="" class="col-md-3 btn green">Ajouter un compte de facturation</button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>#}
                                        </div>
                                        <!-- END FORM-->

                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        <!-- END DEPARTEMENT-->
                    </div>
                </div>
                <!-- END PAGE HEADER-->

                <!-- BEGIN PAGE FOOTER-->
                <div class="row">
                    <div class="col-md-offset-4 col-md-6">
                        <a href="{{ path('millesima_administrator_compte_liste') }}">
                            <button type="submit" value="" style="background-color: #a01616;color: white;" class="col-md-8 btn">
                                Retour à liste des 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>
        //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_administrator_ajax_get_demandeur_by_account', {
                'id': $("#add_demandeur").attr('id-compte'),
                'idU': $("#add_demandeur").attr('id-user')
            });
            {% 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_administrator_ajax_get_acheteur_by_account', {
                'id': $("#add_acheteur").attr('id-compte'),
                'idU': $("#add_acheteur").attr('id-user')
            });
            {% 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 %}