{% extends "base.html.twig" %}
{% block stylesheets %}
    <link rel="stylesheet"
          href="{{ asset('assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}">
{% endblock stylesheets %}
{% block titulo %}{{ titulo }}{% endblock %}
{% block subtitulo %}{{ subtitulo }}{% endblock %}
{% block body %}
    <div class="box box-default">
        {% if botones is not null %}
            <div class="box-header">
                <div class="btn-group pull-right">
                    {% for boton in botones %}
                    <a href="{{ boton.url }}" class="btn btn-default">{{ boton.texto }}</a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
        <div class="box-body">
            <p>{{ texto_anterior }}</p>
            <div class="dataTables_wrapper form-inline dt-bootstrap">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="table-responsive">
                        <table id="mitabla" class="table table-bordered table-striped dataTable" role="grid"
                               aria-describedby="mitabla_info">
                            <thead>
                            <tr role="row">
                                {% for celda in encabezado %}
                                    <th class="sorting_asc" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-sort="ascending">
                                        {{ celda }}
                                    </th>
                                {% endfor %}
                            </tr>
                            </thead>
                            <tbody>

                            {% for fila in filas %}
                                <tr role="row" class="odd">
                                    {% for celda in fila %}
                                        <td>{{ celda }}</td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}

                            </tbody>
                            <tfoot>

                            </tfoot>
                        </table>
                        </div>

                        <p>{{ texto_posterior }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>




{% endblock body %}
{% block javascripts %}
    <script src="{{ asset('assets/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js') }}"></script>
    <script src="{{ asset('assets/bower_components/fastclick/lib/fastclick.js') }}"></script>
    <script>
        $(function () {
            $('#mitabla').DataTable({
                "language": {
                    "sProcessing": "Procesando...",
                    "sLengthMenu": "Mostrar _MENU_ registros",
                    "sZeroRecords": "No se encontraron resultados",
                    "sEmptyTable": "Ningún dato disponible en esta tabla",
                    "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sSearch": "Buscar:",
                    "sUrl": "",
                    "sInfoThousands": ",",
                    "sLoadingRecords": "Cargando...",
                    "oPaginate": {
                        "sFirst": "Primero",
                        "sLast": "Último",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                }
            });
        })
    </script>
{% endblock javascripts %}