{% extends '::base.html.twig' %}
{% block menuTop %}

{%endblock %}


{% block dashboard -%}

    <style>
        #menuTop {
            margin-top: 20px;
        }
        /* 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;
        }
        .tablesorter-header-inner{
            height: 30px;
        }

        .create{
            padding: 0;
        }
    </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: 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: [],
                widgets: ["zebra", "filter"],
                widgetOptions: {
                    // extra css class applied to the table row containing the filters & the inputs within that row
                    filter_cssFilter: '',
                    // If there are child rows in the table (rows with class name from "cssChildRow" option)
                    // and this option is true and a match is found anywhere in the child row, then it will make that row
                    // visible; default is false
                    filter_childRows: false,
                    // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                    // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                    filter_hideFilters: false,
                    // Set this option to false to make the searches case sensitive
                    filter_ignoreCase: true,
                    // jQuery selector string of an element used to reset the filters
                    filter_reset: '.reset',
                    // Use the $.tablesorter.storage utility to save the most recent filters
                    filter_saveFilters: true
                }
            }).tablesorterPager(pagerOptions);
            // initial sort set using data-sortlist attribute (see HTML below)

        });

    </script>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2">
                <img id="logo" src="{{ asset('images/ericsson.png')  }}"  width="1500" height="50" >

            </div>

        </div>

        <table class="tablesorter table1" data-toggle="table" id="tableSitios">
            <thead>
            <tr>
                <th>ID</th>
                <th>OT</th>
                <th>{{'monitor.etiqueta.region' | trans | upper}}</th>
                <th>SITIO</th>
                <th>{{'ticketDetail.status' | trans}}</th>
                <th>ESPECIALIDAD</th>
                <th>TIPO TRABAJO</th>
                <th>ASP</th>
            </tr>
            </thead>
            <tbody>
            {% for entity in entities %}
                <tr>
                    <td><a href="{{ path('cotizacion_detail', { 'id': entity.ID, 'idproyectos': idproyectos }) }}">{{ entity.ID }}</a></td>
                    <td>{{ entity.OT }}</td>
                    <td>{{ entity.REGION }}</td>
                    <td>{{ entity.SITIO }}</td>
                    <td>{{ entity.estado }}</td>
                    <td>{{ entity.ESPECIALIDAD }}</td>
                    <td>{{ entity.TIPO_TRABAJO }}</td>
                    <td>{{ entity.ASP }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>


        <div id="pager" class="pager">
            <form>
                <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"/>
                <select class="pagesize" title="Select page size">
                    <option  value="25">25</option>
                    <option selected="selected" value="50">50</option>
                    <option value="100">100</option>
                </select>
            </form>
        </div>

    </div>

{% endblock %}