{% 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 %}Usuarios{% endblock %}{% block subtitulo %}{{ subtitulo }}{% endblock %}
{% block body %}
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Usuarios del sitio</a></li>
            <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Inscriptos</a></li>
            <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Aguardando confirmación de inscipción</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
                <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">
                                    <th tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1">
                                    </th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">
                                        Nombre
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Browser: activate to sort column ascending">
                                        Apellidos
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Browser: activate to sort column ascending">
                                        Correo
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Platform(s): activate to sort column ascending">
                                        Sociedad
                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                {% for user in usuarios %}
                                    <tr role="row" class="odd">
                                        <td>
                                            <a href="{{path('ver_perfil_publico', {'id': user.id | nzo_encrypt } )}}">
                                                <img src="{{ asset(user.getFoto()) }}" class="imagen-usuario-listado" alt="User Image">
                                            </a>
                                        </td>
                                        <td class="sorting_1">{{ user.nombre }}</td>
                                        <td>{{ user.primerApellido ~' '~ user.segundoApellido }}</td>
                                        <td>{{ user.email }}</td>
                                        <td>{{ user.sociedad }}</td>
                                    </tr>
                                {% endfor %}

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


            <div class="tab-pane" id="tab_2">
                <div class="dataTables_wrapper form-inline dt-bootstrap">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                            <table id="mitabla2" class="table table-bordered table-striped dataTable" role="grid"
                                   aria-describedby="mitabla2_info">
                                <thead>
                                <tr role="row">
                                    <th tabindex="0" aria-controls="mitabla2" rowspan="1"
                                        colspan="1">
                                    </th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">
                                        Nombre
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Browser: activate to sort column ascending">
                                        Apellidos
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Browser: activate to sort column ascending">
                                        Correo
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Platform(s): activate to sort column ascending">
                                        Sociedad
                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                {% for user in inscriptos %}
                                    <tr role="row" class="odd">
                                        <td>
                                            <a href="{{path('ver_perfil_publico', {'id': user.user.id | nzo_encrypt } )}}">
                                                <img src="{{ asset(user.user.getFoto()) }}" class="imagen-usuario-listado" alt="User Image">
                                            </a>
                                        </td>
                                        <td class="sorting_1">{{ user.user.nombre }}</td>
                                        <td>{{ user.user.primerApellido ~' '~ user.user.segundoApellido }}</td>
                                        <td>{{ user.user.email }}</td>
                                        <td>{{ user.user.sociedad }}</td>
                                    </tr>
                                {% endfor %}

                                </tbody>
                                <tfoot>
                                </tfoot>
                            </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_3">
                <div class="dataTables_wrapper form-inline dt-bootstrap">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                            <table id="mitabla3" class="table table-bordered table-striped dataTable" role="grid"
                                   aria-describedby="mitabla3_info">
                                <thead>
                                <tr role="row">
                                    <th tabindex="0" aria-controls="mitabla3" rowspan="1"
                                        colspan="1">
                                    </th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">
                                        Nombre
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Browser: activate to sort column ascending">
                                        Apellidos
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Browser: activate to sort column ascending">
                                        Correo
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                        colspan="1" aria-label="Platform(s): activate to sort column ascending">
                                        Sociedad
                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                {% for user in pendientes %}
                                    <tr role="row" class="odd">
                                        <td>
                                            <a href="{{path('ver_perfil_publico', {'id': user.user.id | nzo_encrypt } )}}">
                                                <img src="{{ asset(user.user.getFoto()) }}" class="imagen-usuario-listado" alt="User Image">
                                            </a>
                                        </td>
                                        <td class="sorting_1">{{ user.user.nombre }}</td>
                                        <td>{{ user.user.primerApellido ~' '~ user.user.segundoApellido }}</td>
                                        <td>{{ user.user.email }}</td>
                                        <td>{{ user.user.sociedad }}</td>
                                    </tr>
                                {% endfor %}

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

        </div>
        <!-- /.tab-content -->
    </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 src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>

    <script>
        $(function () {
            $('#mitabla').DataTable({
                dom: "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                buttons: [
                    { extend: 'copyHtml5', text: 'Copiar' },
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5',
                    { extend: 'print', text: 'Imprimir' },
                ],
                "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"
                    },
                }
            });
            $('#mitabla2').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"
                    }
                }
            });
            $('#mitabla3').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 %}