{% extends "default/datatable.html.twig" %}
{% block custom_css %}
    {{parent()}}
    <link href="{{asset('assets/node_modules/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet">
{% endblock %}
{% block ajout %}
    {% if app.user.hasright(right_add) %}
        <a data-bs-toggle="modal" data-bs-target="#variable-modal" href="javascript:void(0)" class="btn btn-success">{{ 'Table.Add' | trans }}</a>
    {% endif %}
{% endblock %}

{% block datatable %}
    <table id="myTable" class="display no-wrap table table-striped table-bordered table-hover border" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th class='nosort size-15' class='hidden'>
                    <input type="checkbox" id="myChk_0" value="check"  class='hidden'>           
                </th>
                <th class='export'>ID</th>
                <th class='export'>{{'Table.Variable.Code' | trans}}</th>
                <th class='export'>{{'Table.Variable.Name' | trans}}</th>
                <th class='export'>{{'Table.Variable.Nature' | trans}}</th>
                <th class='export'>{{'Table.Variable.Statut' | trans}}</th>
                <th class='nosort size-50'>{{'Table.Action' | trans}}</th>
            </tr>
        </thead>
        <tbody>
            {% for d in datas %}
                {% set modality_btn = false %}
                <tr>
                    <td>
                        <input type="checkbox" id="myChk_1" value="check">
                    </td>
                    <td>{{ d.id }}</td>
                    <td>{{ d.code }}</td>
                    <td>{{ d.name }}</td>
                    <td>
                        {% if d.nature == 1 %}
                            {{ 'Form.Variable.Nature.String' | trans}}
                        {% elseif d.nature == 2 %}
                            {{ 'Form.Variable.Nature.Text' | trans}}
                        {% elseif d.nature == 3 %}
                            {{ 'Form.Variable.Nature.Numerique' | trans}}
                        {% elseif d.nature == 4 %}
                            {{ 'Form.Variable.Nature.Date' | trans}}
                        {% elseif d.nature == 5 %}
                            {{ 'Form.Variable.Nature.Time' | trans}}
                        {% elseif d.nature == 6 %}
                            {{ 'Form.Variable.Nature.TimeZone' | trans}}
                        {% elseif d.nature == 7 %}
                            {{ 'Form.Variable.Nature.Boolean' | trans}}
                        {% elseif d.nature == 8 %}
                            {{ 'Form.Variable.Nature.Geo' | trans}}
                        {% elseif d.nature == 9 %}
                            {% set modality_btn = true %}
                            {{ 'Form.Variable.Nature.Choice' | trans}}
                        {% elseif d.nature == 10 %}
                            {{ 'Form.Variable.Nature.File' | trans}}
                        {% elseif d.nature == 11 %}
                            {{ 'Form.Variable.Nature.Country' | trans}}
                        {% endif %}
                    </td>
                    <td id="statut_{{d.id}}">
                        {%if d.active %}
                            {{ 'Form.Active' | trans}}
                        {% else %}
                            {{ 'Form.NoActive' | trans}}
                        {% endif %}
                    </td>
                    <td>
                        {% if app.user.hasright(right_edit) %}
                        <a href="{{path(edit, {'id':d.id})}}" class="edit btn btn-sm waves-effect waves-light btn-outline-info">
                            <i class="ti-pencil"></i> {{'Table.Edit' | trans}}
                        </a>
                        {% endif %}
                        {% if app.user.hasright(right_delete) %}
                            {% if d.active %}
                                <button type="button" class="btn btn-sm waves-effect waves-light btn-outline-danger" id="action_one_{{d.id}}" value-id="{{d.id}}"><i class="ti-na"></i> {{'Table.Deactive' | trans}}</button>
                            {% else %}
                                <button type="button" class="btn btn-sm waves-effect waves-light btn-outline-success" id="action_one_{{d.id}}" value-id="{{d.id}}"><i class="ti-check"></i> {{'Table.Active' | trans}}</button>
                            {% endif %}
                        {% endif %}
                        {% if app.user.hasright(right_add) %}
                            {% if modality_btn %}
                                <a href="{{path(modality, {'id':d.id})}}" class="edit btn btn-sm waves-effect waves-light btn-success">
                                    <i class="ti-layers"></i> {{'Table.Modalities_btn' | trans}}
                                </a>
                            {% endif %}
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {% include 'variable/modal.html.twig' %}
    {% include 'variable/modalImport.html.twig' %} 
{% endblock %}
{% block initialisation %}
    {{parent()}}
    <script type="text/javascript">
        //Open modal on document .ready
        $(window).on('load', function() {
            if( '{{form_action}}' == 'variable_com_edit' || '{{form_action}}' == 'variable_sup_edit'){
                {# En mode modification, ouverture automatique du modal #}
                $('#variable-modal').modal('show');
            } else if ( '{{form_action}}' == 'variable_import'){
                {# En mode importation, ouverture automatique du modal #}
                $('#var-import-modal').modal('show');
            }
        });
        $('#variable-modal').on('hidden.bs.modal', function () {
            if( '{{form_action}}' == 'variable_com_edit'){
                window.location.replace("{{ path('variable_com') }}");
            } else if ('{{form_action}}' == 'variable_sup_edit'){
                window.location.replace("{{ path('variable_sup') }}");
            }
        })
        $('#var-import-modal').on('hidden.bs.modal', function () {
            if( '{{form_action}}' == 'variable_import'){
                window.location.replace("{{ path('variable_com') }}");
            }
        })
    </script>

    <script type="text/javascript" src="{{asset('assets/dist/js/easytimer.min.js')}}"></script> 
    <script type="text/javascript">
        $(document).ready(function() {
            $('#open-modal-wait').click( function () {
                $('#modal-header-1').hide();
                $('#modal-header-2').show();
                $('#modal-body-1').hide();
                $('#modal-body-2').hide();
                $('#modal-body-3').show();
                $('.modal-footer').hide();
                for(i=0;i<10000;i++) {
                    $('#blink').fadeTo('slow', 0.5).fadeTo('slow', 1.0);
                }
                $('#chrono').val('00:00:00:00');
                var timer = new Timer();
                timer.start({precision: 'secondTenths'});
                timer.addEventListener('secondTenthsUpdated', function (e) {
                    $('#chrono').html(timer.getTimeValues().toString(['hours', 'minutes', 'seconds', 'secondTenths']));
                });               
            });
            
        }); 
    </script>
{% endblock %}
{% block custom_js %}
    {{parent()}}
    <script type="text/javascript">
        $( document ).ready(function() {
            
        });

        
    </script>
{% endblock %}