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

{%endblock %}     

{% block dashboard %}
    <style>
        /* pager wrapper, div */ 
        .pager { 
            padding: 5px; 
        } 
        /* pager wrapper, in thead/tfoot */ 
        td.pager { 
            background-color: #e6eeee; 
        } 
        /* pager navigation arrows */ 
        .pager img { 
            vertical-align: middle; 
            margin-right: 2px; 
        } 
        /* pager output text */ 
        .pager .pagedisplay { 
            font-size: 11px; 
            padding: 0 5px 0 5px; 
            width: 50px; 
            text-align: center; 
        } 

        /*** loading ajax indeterminate progress indicator ***/ 
        #tablesorterPagerLoading { 
            background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat; 
            position: absolute; 
            z-index: 1000; 
        } 

        /*** css used when "updateArrows" option is true ***/ 
        /* the pager itself gets a disabled class when the number of rows is less than the size */ 
        .pager.disabled { 
            display: none; 
        } 
        /* hide or fade out pager arrows when the first or last row is visible */ 
        .pager img.disabled { 
            /* visibility: hidden */ 
            opacity: 0.5; 
            filter: alpha(opacity=50); 
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }
    </style>

    <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: true,
                // 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: false,
                // 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

                widgets: ["zebra", "filter"]
            }).tablesorterPager(pagerOptions);

            // initial sort set using data-sortlist attribute (see HTML below)


        });
    </script>
    <div class="container" id="tableSitios">

        <table   class="tablesorter table1">
            <thead>
                <tr>
                 <th>Id</th>
                <th>Fecha Creacion</th>
                <th>Tipo Reporte</th>
                <th>Rerporte</th>
               
                </tr>
            </thead>
             {% for entity in entities %}
                 <tr>
                  <td>{{ entity.id }}</td>
                  <td>{{ entity.createdAt |date("d/m/Y") }}</td>
                  <td>{{ entity.type }}</td>
                  <td><a href="{{ asset('archivosExcel/')}}{{entity.file}}"><img src="{{ asset('images/excel.png') }}"/></a></td>
                 </tr>
             {%endfor%}
            <tbody>
            </tbody>
        </table> 
                
 {%endblock %}