{% extends 'template.html.twig' %}

{% block title %}{{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
{% endblock %}


{% block javascripts  %}
    {{ parent() }}
    <!-- Bootstrap 4 -->
    <script src="{{ asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jszip/jszip.min.js')}}"></script>
    <script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
    <!-- AdminLTE App -->
    <script src="{{ asset('assets/dist/js/adminlte.min.js') }}"></script>
    <script>
        $(function () {
            $("#example1").DataTable({
                "responsive": true, "lengthChange": false, "autoWidth": false,
                {#"buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]#}
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
            $('#example2').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        });
    </script>
    {{ encore_entry_script_tags('app') }}
{% endblock %}

{% block body1 %}

    <div class="col-12">
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="col-2">
                        <a href="{{ path('app_bairro_add') }}" class=" btn" style="background-color: #0d5e42; color: #fff;"><i class="fa fa-plus-circle"></i> Bairro</a>
                    </div>
                </div>

            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Tabela de Bairros</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="example1" class="table table-bordered  table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nome do bairro</th>
                        <th>Comuna</th>
                        <th>Município</th>
                        <th>Província</th>
                        <th>Ações</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for bairro in bairros %}
                        <tr>
                            <td>{{ bairro.id }}</td>
                            <td>{{ bairro.nome }}</td>
                            <td>{{ bairro.Comuna.nome }}</td>
                            <td>{{ bairro.Comuna.Municipio.nome }}</td>
                            <td>{{ bairro.Comuna.Municipio.Provincia.nome}}</td>
                            <td>
                                <a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a>
                                <a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    {# <tfoot>
                     <tr>
                         <th>Rendering engine</th>
                         <th>Browser</th>
                         <th>Platform(s)</th>
                         <th>Engine version</th>
                         <th>CSS grade</th>
                     </tr>
                     </tfoot>#}
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>

{% endblock %}