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

{% block localstyle %}
    {% if fgprint is defined and fgprint %}
        table { font-size:10px;}
        th,td {
            border: 1px solid #37474F;
        }
        thead {
	        display: table-header-group;
        }
        tr { page-break-inside: avoid; }     
        .homecard  {width: 100% }   
    {%endif%}
{% endblock %}


{% block body %}
    <h1 class="page-header">
    MES CONGES
    </h1>

    <div class="custom-control custom-switch float-right">
    <input type="checkbox" class="custom-control-input" id="switchactive" {% if app.session.get('activeholiday') %} checked {% endif %}>
    <label class="custom-control-label" for="switchactive">Congès à Valider</label>
    </div>
    <div style="height:30px;">
    </div>

    <div class="card homecard">
        <div class="card-header">
            Mes Congés
        </div>            
        
        <div class="card-body">
            <div class="dataTable_wrapper">
                <table class="table table-striped table-bordered table-hover small" id="dataTables" style="width:100%">
                    <thead>
                        <th>Utilisateur</th>
                        <th>Tâche</th>
                        <th>Début</th>
                        <th>Fin</th>
                        <th>Durée</th>
                    </thead>

                    {% for user in users %}
                        {% for event in user.holidays %}
                            <tr id="row-{{event.id}}">
                                <td>
                                    {{ user.user.displayname }}
                                </td>

                                <td>
                                    {{ event.task }}
                                </td>

                                <td>
                                    {{ event.start|date("d/m/Y H:i") }}
                                </td>

                                <td>
                                    {{ event.end|date("d/m/Y H:i") }}
                                </td>

                                <td>
                                    {{ event.duration }}
                                </td>

                            </tr>
                            
                        {% endfor %}
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
    
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        {% if not fgprint is defined or not fgprint %}
            $('.table ').DataTable({
                columnDefs: [ { "targets": "no-sort", "orderable": false }, { "targets": "no-string", "type" : "num" } ],
                responsive: true,
                iDisplayLength: 100,
                order: [[ 0, "asc" ]]
            });
        {%else%}
            $('#dataTables').removeClass("table table-striped table-bordered table-hover small dataTable no-footer");        
        {% endif %}
    });

    function myprint() {
        href=document.location.href;
        document.location.href=href+"?fgprint=true";
    }     

    $('#switchactive').change(function() {
        window.location="{{ path('app_holiday_activeholiday' )}}";
    });

{% endblock %}