{% load i18n %}

<div class="row">
    <div class="col-md-3">
        <input type="text"
               class="form-control m-b-10"
               data-role="category-filter"
               placeholder="{% trans 'Search category' %}">
        <div data-role="categories" class="category-tree"></div>
    </div>
    <div class="col-md-9" data-role="product-list">
        <div class="row">

            <form class="form-inline m-b-10" data-role="form">
                <input type="hidden"
                       data-role="category-input"
                       name="category">

                <div class="input-group m-r-10">
                    <input type="text"
                           class="form-control"
                           name="bar_code"
                           placeholder="{% trans 'Bar code' %}">
                </div>

                <div class="input-group m-r-10">
                    <input type="text"
                           class="form-control"
                           name="code"
                           placeholder="{% trans 'Сode' %}">
                </div>

                <div class="input-group">
                    <input type="text"
                           class="form-control"
                           name="query"
                           placeholder="{% trans 'Product name' %}">
                </div>
            </form>

            <table class="table table-bordered table-sm" style="margin-bottom: 0;margin-right: 15px;">
                <tr>
                    <td style="width: 20%">{% trans 'Code' %}</td>
                    <td style="width: 40%">{% trans 'Product name' %}</td>
                    <td style="width: 20%">{% trans 'Quantity' %}</td>
                    <td style="width: 20%">{% trans 'Price' %}</td>
                </tr>
            </table>
        </div>
        <div class="row product-list" style="max-height: 250px;overflow-y: scroll;">
            <table class="table table-bordered table-sm">
                <tbody data-role="list-items">
                </tbody>
                <tfoot>
                    <tr class="no-records" data-role="no-items">
                        <td colspan="5">
                            {% trans 'Products not found' %}
                        </td>
                    </tr>
                    <tr data-role="preloader">
                        <td colspan="5">
                            <h3 class="text-center">
                                <i class="fa fa-circle-o-notch fa-spin"></i>
                            </h3>
                        </td>
                    </tr>
                    <tr class="load-more" data-role="load-more">
                        <td colspan="5">
                            <button type="button"
                                    data-role="load-more-btn"
                                    class="btn btn-block btn-info">
                                <i class="fa fa-chevron-down"></i>
                                {% trans 'Load more' %}
                                <i class="fa fa-chevron-down"></i>
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>