{# @var paginator \Pagerfanta\Pagerfanta #}

<div {{ attributes }}>
    {% include "@SolidInvoiceCore/flash.html.twig" %}

    <div class="card">
        <div class="card-body p-0">
            {% if this.title is not empty %}
                <h5 class="ml-3 mt-3">{{ this.title|trans }}</h5>
            {% endif %}
            <div class="row m-1 pt-2">
                <div class="col">
                    {% if grid.batchActions|length > 0 %}
                        <div class="">
                            <div class="btn-group" role="group" aria-label="Batch Actions">
                                {% for action in grid.batchActions %}
                                    {% set id = 'modal_' ~ action.getLabel|u.snake %}
                                    <button type="button" class="btn btn-sm btn-{{ action.getColor|default('secondary') }}"{% if action.shouldConfirm %} data-toggle="modal" data-target="#{{ id }}"{% endif %}>
                                        {% if action.getIcon is not empty %}
                                            {{ icon(action.getIcon) }}
                                        {% endif %}
                                        {{ action.getLabel|trans }}
                                    </button>
                                    {% if action.shouldConfirm %}
                                        {% component BootstrapModal with {id: id} %}
                                            {% block modal_header %}
                                                <h5>{{ 'Confirm'|trans }}</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            {% endblock %}
                                            {% block modal_body %}
                                                {{ action.getConfirmMessage|default('Are you sure you want to perform this action on the selected items?')|trans|nl2br }}
                                            {% endblock %}
                                            {% block modal_footer %}
                                                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'Close'|trans }}</button>
                                                <button type="button" class="btn btn-primary" data-action="live#action" data-live-action-name-param="{{ action.getLabel }}"
                                                        data-live-action-param="debounce(300)|executeBatchAction">{{ 'Confirm'|trans }}</button>
                                            {% endblock %}
                                        {% endcomponent %}
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
                <div class="col-3 float-right d-flex justify-content-between">
                    <div class="input-group mb-3">
                        <input type="search" name="q" class="form-control form-control-sm" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2" value="{{ queryParams.q|default('') }}" data-model="search">
                        <div class="input-group-append">
                            <button class="btn btn-sm btn-outline-secondary" type="submit">
                                {{ icon('search') }}
                            </button>
                        </div>
                    </div>
                    {% if grid.filters|length > 0 %}
                        <div class="ml-2">
                            <div class="dropdown dropleft">
                                <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{{ this.filters == [] ? ' class="text-black-50"' }}>
                                    {{ icon('filter') }}
                                </a>
                                <div class="dropdown-menu p-4 max-content">
                                    {{ form(form) }}
                                    <a href="#" data-action="live#action:prevent" data-live-action-param="clearFilters">
                                        {{ icon('cancel') }} Clear
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover table-sm" {{ stimulus_controller('checkbox-select-all') }}>
                    <thead>
                    <tr>
                        {% if grid.batchActions|length > 0 %}
                            <th width="1%">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input position-static" {{ stimulus_target('checkbox-select-all', 'checkboxAll')}} data-model="selectedAll"  />
                                </div>
                            </th>
                        {% endif %}
                        {% for column in grid.columns %}
                            <th>
                                {% if column.isSortable %}
                                    <a href="#" class="d-block" data-model="sort" data-value="{{ column.getSortableField }},{{ sortDir is same as('asc') ? 'desc' : 'asc'}}" data-action="live#update:prevent">
                                        {{ column.getLabel|trans }}
                                        {% if sortField is same as column.getSortableField %}
                                            <span class="float-right">
                                                {{ icon(sortDir is same as('asc') ? 'caret-down' : 'caret-up') }}
                                            </span>
                                        {% endif %}
                                    </a>
                                {% else %}
                                    {{ column.getLabel|trans }}
                                {% endif %}
                            </th>
                        {% endfor %}
                        {% if grid.actions|length > 0 %}
                            <th width="1%">
                                {{ 'Actions'|trans }}
                            </th>
                        {% endif %}
                    </tr>
                    </thead>
                    <tbody>
                    {% if paginator.nbResults is same as(0) %}
                        <tr>
                            <td colspan="{{ grid.columns|length + 2 }}" class="text-center">
                                {{ 'No results found.'|trans }}
                            </td>
                        </tr>
                    {% else %}
                        {% for row in paginator %}
                        <tr>
                            {% if grid.batchActions|length > 0 %}
                                <td>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input position-static" {{ stimulus_target('checkbox-select-all', 'checkbox')}} value="{{ this.entityId(row) }}" data-model="selectedItems" />
                                    </div>
                                </td>
                            {% endif %}
                            {% for column in grid.columns %}
                                <td>{{ this.renderfield(column, row)|sanitize_html }}</td>
                            {% endfor %}

                            {% if grid.actions|length > 0 %}
                                <td style="white-space: nowrap;">
                                    {% for action in grid.actions %}
                                        {% set params = {} %}

                                        {% for p, v in action.parameters %}
                                            {% set params = params|merge({(p): attribute(row, v)}) %}
                                        {% endfor %}

                                        <a href="{{ path(action.getRoute, params) }}">
                                            {{ icon(action.getIcon) }}&nbsp;{{ action.getLabel|trans }}
                                        </a>
                                        &nbsp;&nbsp;
                                    {% endfor %}
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer p-2 d-flex justify-content-between">
            <p class="tile-subtitle-p tile-subtitle-footer mb-0">
                Showing {{ paginator.currentPageOffsetStart }} - {{ paginator.currentPageOffsetEnd }} of {{ paginator.nbResults }} results
            </p>
            <p class="tile-subtitle-p tile-subtitle-footer mb-0 m-auto">
                <select class="form-control" data-model="perPage">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="{{ paginator.nbResults }}">All</option>
                </select>
            </p>
            <p class="tile-subtitle-p tile-subtitle-footer mb-0 ml-auto">
                {{ pagerfanta(paginator, '', {'prev_message': '〈', 'next_message': '〉', 'routeName': '_home'}) }}
            </p>
        </div>
    </div>
</div>
