{% extends '@AdminLTE/layout/suiodd-layout.html.twig' %}

{% block page_title %}{% trans %}activityOSC.title{% endtrans %}{% endblock %}


{% block page_content %}
    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}

            {{ form_start(form) }}
                {{ form_widget(form) }}
            {{ form_end(form) }}

            {% if (is_granted('ROLE_MANAGER') or is_granted('ROLE_DPP')) %}
            <div class="text-right">
                <a href="{{ path('app_suiviOSC_activity_new') }}" class="btn btn-primary text-right">
                    <i class="fa fa-plus"></i> {% trans %}activity.add{% endtrans %}
                </a>
            </div>
            {% endif %}

        {% endblock %}
    {% endembed %}

    {% if activities %}
    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            <table id="activityTable" class="table table-striped">
            <thead>
                <th>{% trans %}basics.code{% endtrans %}</th>
                <th>{% trans %}basics.name{% endtrans %}</th>
                <th>{% trans %}basics.accelerator{% endtrans %}</th>
                <th>{% trans %}basics.expectedCost{% endtrans %}</th>
                {% if (is_granted('ROLE_MANAGER') or is_granted('ROLE_DPP')) %}
                <th style="width: 100px"></th>
                {% endif %}
            </thead>
            <tbody>
            {% for activity in activities %}
                <tr>
                    <td>{{ activity.code }}</td>
                    <td>{{ activity.name }}</td>
                    <td>{{ activity.accelerator.name }}</td>
                    <td>{{ activity.expectedCost }}</td>
                    {% if (is_granted('ROLE_MANAGER') or is_granted('ROLE_DPP')) %}
                    <td class="text-center">
                        <div class="btn-group">
                            <a href="{{ path('app_suiviOSC_activity', { 'id': activity.id }) }}" class="btn btn-sm btn-default" role="button" aria-pressed="true">{% trans %}basics.update{% endtrans %}</a>
                        </div>
                    </td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
            <!--tfoot>
                <tr>
                    <th>{% trans %}basics.code{% endtrans %}</th>
                    <th>{% trans %}basics.name{% endtrans %}</th>
                    <th>{% trans %}basics.action{% endtrans %}</th>
                    <th>{% trans %}basics.programm{% endtrans %}</th>
                    {% if is_granted('ROLE_MANAGER') %}
                        <td style="width: 100px"></td>
                    {% endif %}
                </tr>
            </tfoot-->
            </table>
        {% endblock %}    
    {% endembed %}
    {% endif %}

{% endblock %}

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

            // Setup - add a text input to each footer cell
            $('#activityTable tfoot th').each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="'+title+'" />' );
            } );

            // DataTable
            var activityTable = $('#activityTable').DataTable();

            //"pageLength": 25
        
            // Apply the search
            activityTable.columns().every( function () {
                var that = this;
        
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );

        });*/
    </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 %}