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

{% block stylesheets %}
<style>
    

    
</style>
{% endblock %}


{% block body %}

<div class="container-fluid">

          <!-- Body -->
    <div class="header-body">
        <div class="row align-items-end">
            <div class="col">

                <!-- Pretitle -->
                <h6 class="header-pretitle">
                  {{date}}
                </h6>

                <!-- Title -->
                <h2 class="header-title">
                  Prévoyance
                </h2>

            </div>
            <div class="col-auto">

                <ul class="nav">
                    {# SELECTOR #}
                    {% for date in selector %} 
                    <li class="nav-item">
                    <small>  <a class="nav-link switch nb-1" aria-current="page"  href="{{ path('app_prevention', {insertion: date.insertion|date('Y-m-d')}) }}">{{ date.periode }}</a> </small>
                    </li>                   
                    {% endfor %}
                </ul>

            </div>
        </div> <!-- / .row -->
    </div> <!-- / .header-body -->
</div>
<br>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm">
            {# TAB #}
            <div class="small" id="prevoyance">Chargement des données en cours..</div>
        </div>
    </div>
</div>   

{% endblock %}


{% block javascripts %}
    <script>
        var table = $('#prevoyance').initDataTables({{ datatable_settings(datatable) }}, 
        { 
            searching: true,
            serverSide : true,
            responsive: true,
            processing : true,
            ordering : true,
            autoWidth: false,
            dom:"<'row'<'col-sm-2'B><'col-sm-3'l><'col-sm-4'i><'col-sm-3'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-7'p>>",
            lengthMenu: [[25, 50, 100, 500, 1000, 5000, 10000, -1], [25, 50, 100, 500, 1000, 5000, 10000, "All"]],
            pageLength: 25,
            buttons: [
                {
                    extend: 'excel',
                    text: 'Export Excel',
                    className: 'btn-sm',
                    exportOptions: {
                        modifier: {
                            search: 'applied',
                            order: 'applied'
                        }
                    }
                }
            ],
            initComplete: function() {                
            }
        } );
    </script>
{% endblock %}