{% if is_granted('ROLE_DDD') %}
    {% set extendedTemplate = '@AdminLTE/layout/ddd-layout.html.twig' %}
{% else %}
    {% set extendedTemplate = '@AdminLTE/layout/communeodd-layout.html.twig' %}
{% endif %}

{% extends extendedTemplate %}

{% block page_title %}{% trans %}Liste des cibles spatialisées par commune{% endtrans %}{% endblock %}


{% block page_content %}

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {{ form_start(form) }}
                <div class="form-group row">
                    <div class="col-sm-2">
					    <label class="col-form-label">{% trans %}basics.commune{% endtrans %}</label>
				    </div>
                    <div class="col-10 col-sm-10 col-md-10">
                        {{ form_widget(form.commune) }}
                    </div>
                </div>
                
            {{ form_end(form) }}    
        {% endblock %}
    {% endembed %}

   {% if targets|length > 0 %} 
    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            <table id="targetTable" class="table table-striped">
            <thead>
                <th>{% trans %}basics.code{% endtrans %}</th>
                <th>{% trans %}basics.name{% endtrans %}</th>
                <th>{% trans %}target.goal{% endtrans %}</th>
            </thead>
            <tbody>
            {% for target in targets %}
                <tr>
                    <td>{{ target.code }}</td>
                    <td>{{ target.name }}</td>
                    <td>{{ target.goal.name }}</td>
                </tr>
            {% endfor %}
            </tbody>
            </table>
        {% endblock %}
        
    {% endembed %}
    {% endif %}
{% endblock %}

{% block javascripts %}
    <script>
        $(function () {
            $("#targetTable").DataTable({
                "pageLength": 25
            });
        });
    </script>

    <script src="{{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
{% endblock %}