{{ header }}
<div class="bg-white">
  <div class="breadcrumb-container">
    <div class="container">
    <div class="row">
    <div class="col-sm-12 col-md-5 col-lg-4">
        <h3 class="home-title">{{ heading_title }}</h3>
      </div>
      </div>
      </div>
  </div>
<div id="product-search" class="container manucom">
  <div class="row row-responsive">{{ column_left }}
    <div id="content" class="col">{{ content_top }}
      <div class="row">
        <div class="col"><label for="input-search" class="col-form-label">{{ entry_search }}</label></div>
      </div>
      <div class="row row-cols-1 row-cols-md-2">
        <div class="col">
          <input type="text" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" id="input-search" class="form-control mb-3"/>
          <div class="form-check mb-2">
            <input type="checkbox" name="description" value="1" id="input-description" class="form-check-input"{% if description %} checked{% endif %}/> <label for="input-description" class="form-check-label">{{ entry_description }}</label>
          </div>
        </div>
        <div class="col">
          <select name="category_id" id="input-category" class="form-select mb-3">
            <option value="0">{{ text_category }}</option>
            {% for category_1 in categories %}
              <option value="{{ category_1.category_id }}"{% if category_1.category_id == category_id %} selected{% endif %}>{{ category_1.name }}</option>
              {% for category_2 in category_1.children %}
                <option value="{{ category_2.category_id }}"{% if category_2.category_id == category_id %} selected{% endif %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
                {% for category_3 in category_2.children %}
                  <option value="{{ category_3.category_id }}"{% if category_3.category_id == category_id %} selected{% endif %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </select>
          <div class="form-check mb-2">
            <input type="checkbox" name="sub_category" value="1" id="input-sub-category" class="form-check-input"{% if sub_category %} checked{% endif %}/> <label for="input-sub-category" class="form-check-label">{{ text_sub_category }}</label>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button type="button" id="button-search" class="custom-btn btn btn-primary">{{ button_search }}</button>
        </div>
      </div>
      <hr/>
      <h3 class="search_heading mb-3">{{ text_search }}</h3>
      {% if products %}
        <div id="display-control" class="product-list-top">
          <div class="row justify-content-between">
            <div class="col-lg-2 d-lg-inline-block d-md-block d-sm-block btn-list-grid">
              <div class="btn-group btn-group-sm">
                <button type="button" id="grid-view" class="btn btn-light" data-bs-toggle="tooltip" title="{{ button_grid }}"><i class="fa-solid fa-table-cells"></i></button>
                <button type="button" id="list-view" class="btn btn-light" data-bs-toggle="tooltip" title="{{ button_list }}"><i class="fa-solid fa-table-list"></i></button>
              </div>
            </div>
            {# <div class="compare-total col-lg-3"><a href="{{ compare }}" id="compare-total">{{ text_compare }}</a></div> #}
            <div class="pagination-right text-end col-sm-7">
                        <div class="show-wrapper">
                            <div class="col-md-1 text-end show">
                                <label for="input-limit" class="control-label">{{ text_limit }}</label>
                            </div>
                            <div class="col-md-2 text-end limit">
                                <ul id="input-limit" class="pagination-show" onchange="location = this.value;">
                                    {% for limits in limits %}
                                    <li>
                                    <a href="{{ limits.href }}"{% if limits.value == limit %} selected{% endif %}>
                                        {{ limits.text }}
                                    </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <div class="sort-by-wrapper">
                            <div class="col-md-2 text-end sort-by">
                                <label for="input-sort" class="control-label">{{ text_sort }}</label>
                            </div>
                            <div class="col-md-3 text-end sort">
                                <div class="select-wrapper">
                                    <select id="input-sort" class="form-select" onchange="location = this.value;">
                                        {% for sorts in sorts %}
                                        <option value="{{ sorts.href }}"{% if sorts.value == '%s-%s'|format(sort, order) %} selected{% endif %}>
                                            {{ sorts.text }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
          </div>
        </div>
        <div id="product-list" class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4">
          {% for product in products %}
            <div class="col">{{ product }}</div>
          {% endfor %}
        </div>
         <div class="row pagi category-pagination" style="margin: 30px 0;">
          <div class="col-sm-6 text-start">{{ results }}</div>
          <div class="col-sm-6 text-end">{{ pagination }}</div>
        </div>
      {% else %}
        <p>{{ text_no_results }}</p>
      {% endif %}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
</div>
<script type="text/javascript"><!--
$('#button-search').bind('click', function () {
    url = 'index.php?route=product/search&language={{ language }}';

    var search = $('#input-search').prop('value');

    if (search) {
        url += '&search=' + encodeURIComponent(search);
    }

    var category_id = $('#input-category').prop('value');

    if (category_id > 0) {
        url += '&category_id=' + encodeURIComponent(category_id);
    }

    var sub_category = $('#input-sub-category:checked').prop('value');

    if (sub_category) {
        url += '&sub_category=1';
    }

    var filter_description = $('#input-description:checked').prop('value');

    if (filter_description) {
        url += '&description=1';
    }

    location = url;
});

$('#input-search').bind('keydown', function (e) {
    if (e.keyCode == 13) {
        $('#button-search').trigger('click');
    }
});

$('#input-category').on('change', function () {
    $('#input-sub-category').prop('disabled', (this.value == '0' ? true : false));
});

$('#input-category').trigger('change');
//--></script>
{{ footer }}