{% extends "base.html.twig" %}
{% block menuTop %}
    <div class="col-lg-6 col-xs-12" >
        <div class="container" id="menuTop">
        {% if (idproyectosp == null) %}
            <div class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
            </div>
        {% else %}
            <div class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModuleMx",{'idproyectos':idproyectosp,'idmodule':idmodule, 'idproyecto':idproyectos})) }}
            </div>
        {% endif %}
        </div>
    </div>
{%endblock %}


{%block dashboard %}
    <script>
        $(function () {

            var pagerOptions = {
                // target the pager markup - see the HTML block below
                container: $(".pager"),
                // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                // table row set to a height to compensate; default is false
                fixedHeight: false,
                // remove rows from the table to speed up the sort of large tables.
                // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                removeRows: true,
                // go to page selector - select dropdown that sets the current page
                cssGoto: '.gotoPage'
            };

            // initial sort set using sortList option
            $(".table1").tablesorter({
                theme: 'blue',
                // sort on the first column and second column in ascending order
                sortList: [[0, 1]],
                widgets: ["zebra", "filter"],
                headers: false
            }).tablesorterPager(pagerOptions);
            // initial sort set using data-sortlist attribute (see HTML below)




        });
    </script>
    <div class="col-lg-12 col-xs-12 col-md-12">
        <div  class="col-md-10 col-lg-10 col-xs-12 col-lg-offset-1 col-md-offset-1">


            <div id="pager" class="pager col-lg-12 col-xs-12 col-md-12">
                <form>

                    <div class="col-md-offset-4 col-lg-4 col-lg-offset-4 col-md-4">
                        <img src="{{asset('tablesorter-master/addons/pager/icons/first.png')}}" class="first"/>
                        <img src="{{asset('tablesorter-master/addons/pager/icons/prev.png')}}" class="prev"/>
                        <span class="pagedisplay"></span>
                        <img src="{{asset('tablesorter-master/addons/pager/icons/next.png')}}" class="next"/>
                        <img src="{{asset('tablesorter-master/addons/pager/icons/last.png')}}" class="last"/>
                        </div>
                    <div class="col-md-offset-4 col-lg-4 col-lg-offset-4 col-md-4">
                        <select class="pagesize form-control" title="Select page size">
                            <option selected="selected" value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>


                    </div>
                </form>
            </div>

            <div style="text-align: right">
                <a href="{{ path('newProv',{'idproyectos': idproyectos, 'idmodule':idmodule, 'idsubmodulo':idsubmodulo}) }}">
                    <button class="btn btn-success" title="Agregar Proveedor" data-toggle="tooltip" data-placement="left" >
                            <span class="glyphicon glyphicon-plus-sign" ></span>
                    </button>
                </a>
            </div>
            <table class="table table-bordered col-lg-12 col-xs-12 col-md-12 tablesorter table-hover table1">
                <thead>
                <th>Proveedor</th>
                <th>Email</th>
                <th>Vendor</th>
                <th>Nit</th>
                <th>{{'user.phone' | trans}}</th>
                <th>Editar</th>
                </thead>
                <tbody>
                {% for proveedor in proveedores %}
                    <tr>
                        <td>{{ proveedor.nombre }}</td>
                        <td>{{ proveedor.email }}</td>
                        <td>{{ proveedor.razonSocial }}</td>
                        <td>{{ proveedor.nit }}</td>
                        <td>{{ proveedor.telefono }}</td>
                        <td>
                            <a href="{{ path('editProv',{'idproyectos': idproyectos, 'idmodule':idmodule, 'idsubmodulo':idsubmodulo, 'idproveedor': proveedor.idproveedor }) }}">
                                <button class="btn btn-primary" title="Editar Proveedor" data-toggle="tooltip" data-placement="left" >
                                    <span class="glyphicon glyphicon-edit"></span>
                                </button>
                            </a>

                        </td>
                    </tr>
                {%  endfor %}
                </tbody>

            </table>

        </div>
    </div>
{%  endblock %}