{% extends "default/datatable.html.twig" %}
{% block custom_css %}
    {{parent()}}
    <link href="{{asset('assets/dist/css/pages/file-upload.css')}}" rel="stylesheet">
    <link href="{{asset('assets/node_modules/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet">
    <link href="{{asset('assets/node_modules/select2/dist/css/select2.min.css')}}" rel="stylesheet">
    <link href="{{asset('assets/node_modules/switchery/dist/switchery.min.css')}}" rel="stylesheet">
    <link href="{{asset('assets/node_modules/bootstrap-select/bootstrap-select.min.css')}}" rel="stylesheet">
    <link href="{{asset('assets/node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css')}}" rel="stylesheet">
    <link href="{{asset('assets/node_modules/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css')}}" rel="stylesheet">
    <link href="{{asset('assets/node_modules/multiselect/css/multi-select.css')}}" rel="stylesheet">
    <link href="{{asset('assets/dist/css/pages/form-icheck.css')}}" rel="stylesheet">
{% endblock %}
{% block ajout %}
    {% if app.user.hasright(right_add) %}
        <a data-bs-toggle="modal" data-bs-target="#restrict-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'>
                    <input type="checkbox" id="myChk_0" value="check">           
                </th>
                <th class=''>ID</th>
                <th class='export'>{{'Form.Name' | trans}}</th>
                <th class='export'>{{'Form.Countries' | trans}}</th>
                <th class='export'>{{'Form.Description' | trans}}</th>
                <th class='nosort size-50'>{{'Table.Action' | trans}}</th>
            </tr>
        </thead>
        <tbody>
            {% for d in datas %}
                <tr>
                    <td>
                        <input type="checkbox" id="myChk_1" value="check">
                    </td>
                    <td>{{ d.id }}</td>
                    <td>{{ d.name }}</td>
                    <td>
                        {% for c in d.countries %}
                            {{ c | country_name ~", "}}
                        {% endfor %}
                    </td>
                    <td>{{ d.description }}</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) %}
                        <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-trash"></i> {{'Table.Delete' | trans}}</button>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {% include 'restriction/modal.html.twig' %}
{% endblock %}
{% block initialisation %}
    {{parent()}}
    <script type="text/javascript">
        //Open modal on document .ready
        $(window).on('load', function() {
            if( '{{form_action}}' == 'restriction_edit'){
                {# En mode modification, ouverture automatique du modal #}
                $('#restrict-modal').modal('show');
            }
        });
        $('#restrict-modal').on('hidden.bs.modal', function () {
            window.location.replace("{{ path('restriction') }}");
        })
    </script>
{% endblock %}
{% block custom_js %}
    {{parent()}}
    <script type="text/javascript" src="{{asset('assets/dist/js/pages/jasny-bootstrap.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/switchery/dist/switchery.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/select2/dist/js/select2.full.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/icheck/icheck.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/icheck/icheck.init.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/dff/dff.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/node_modules/multiselect/js/jquery.multi-select.js')}}"></script>
{% endblock %}