{# Base layout for paginated tablesorter tables.
 # Requires tablesorter-custom.css for proper styling of pager elements.
#}

{# Set some default values for the child template. #}
{% set table = {
        'id': "uf-table",
        'sortlist': "[[0, 0]]"
    } | merge(table)
%}

{#
   Global search field for the table.  By default, only shown in mobile sizes.
   To customize this behavior, see core/assets/userfrosting/css/userfrosting.css
#}
{% block table_search %}
    <div class="form-group has-feedback uf-table-search js-uf-table-search">
        <input type="search" class="form-control" data-column="all">
        <i class="fa fa-search form-control-icon" aria-hidden="true"></i>
    </div>
{% endblock %}
<div class="table overlay-wrapper">
    {% block table %}
        {# Define your table skeleton in this block in your child template #}
    {% endblock %}

    {% block table_cell_templates %}
        {# Define your Handlebars cell templates in this block in your child template #}
    {% endblock %}

    {% block table_info %}
        <div class="uf-table-info js-uf-table-info" data-message-empty-rows="{{translate('NO_RESULTS')}}">
        </div>
    {% endblock %}

    {% block table_pager_controls %}
        <div class="pager pager-lg tablesorter-pager js-uf-table-pager no-print" data-output-template="{{translate('PAGINATION.OUTPUT')}}">
            <span class="pager-control first" title="{{translate("PAGINATION.FIRST")}}"><i class="fa fa-angle-double-left"></i></span>
            <span class="pager-control prev" title="{{translate("PAGINATION.PREVIOUS")}}"><i class="fa fa-angle-left"></i></span>
            <span class="pagedisplay"></span> {# this can be any element, including an input #}
            <span class="pager-control next" title="{{translate("PAGINATION.NEXT")}}"><i class="fa fa-angle-right"></i></span>
            <span class="pager-control last" title= "{{translate("PAGINATION.LAST")}}"><i class="fa fa-angle-double-right"></i></span>
            <br><br>
            {{translate("PAGINATION.GOTO")}}: <select class="gotoPage"></select> &bull; {{translate("PAGINATION.SHOW")}}:
            <select class="pagesize">
            {% for count in pager.take|default([5, 10, 50, 100]) %}
                <option value="{{count}}">{{count}}</option>
            {% endfor %}
            </select>
        </div>
    {% endblock %}
    {% block table_overlay %}
        {% if site.uf_table.use_loading_transition %}
            <div class="overlay js-uf-table-overlay hidden">
                <i class="fa fa-refresh fa-spin"></i>
            </div>
        {% endif %}
    {% endblock %}
</div>