{% if (pagination |length > 0) %}
    <div class="table-responsive">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>
                    <span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('productBase.sku') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Sku', 'productBase.sku') }}
                </th>
                <th>
                    <span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('productBase.name') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Name', 'productBase.name') }}
                </th>
                <th>
                    <span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('quantity') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Quantity', 'quantity') }}
                </th>
                <th>
                    <span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('productBase.cost') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Cost', 'productBase.cost') }}
                </th>
                <th>
                    <span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('productBase.stock') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Stock', 'productBase.stock') }}
                </th>
                <th>
                    Actions
                </th>
            </tr>
            </thead>
            {% for baseProduct in pagination %}
                <tr data-id="{{ baseProduct.id }}">
                    <td>{{ baseProduct.productBase.sku }}</td>
                    <td>{{ baseProduct.productBase.name }}</td>
                    <td>{{ baseProduct.quantity }}</td>
                    <td>{{ baseProduct.productBase.cost }}</td>
                    <td>{{ baseProduct.productBase.stock }}</td>
                    <td class="text-center"><a
                                href="#" class="fa fa-trash text-danger fa-lg delete-sub-product" data-toggle="tooltip" data-placement="top">

                        </a>
                    </td>
                </tr>
            {% endfor %}
        </table>
    </div>
    <div class="navigation">
        {{ knp_pagination_render(pagination) }}
    </div>
{% else %}
    <p>This product is not a combination yet</p>
{% endif %}
{% block javascripts %}
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>
{% endblock %}