{% if (pagination |length > 0) %}
    <div class="table-responsive">
        <table class="table table-hover table-bordered table-sm">
            <thead>
            <tr>
                <th>
                    <span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('sku') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Sku', 'sku') }}
                </th>
                <th>
                    <span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('name') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Name', 'name') }}
                </th>
                <th>
                    Quantity
                </th>
                <th>
                    Add
                </th>
            </tr>
            </thead>
            {% for product in pagination %}
                <tr data-id="{{ product.id }}">
                    <td>{{ product.sku }}</td>
                    <td>{{ product.name }}</td>
                    <td style="width: 20%;">
                        <div class="form-group">
                            <input type="number" min="1" class="form-control" required="required" id="quantityVal{{ product.id }}" >
                        </div>
                    </td>
                    <td class="text-center">
                        <a href="#"
                           class="fa fa-plus-circle fa-lg add-sub-product" data-toggle="tooltip" data-placement="top" title="Add product to the combination">
                        </a>
                    </td>
                </tr>
            {% endfor %}
        </table>
    </div>
    <div class="navigation">
        {{ knp_pagination_render(pagination) }}
    </div>
{% else %}
    <p>No products registered for the given seller</p>
{% endif %}