<h1>{{ heading_title }}</h1>
<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 mb-3">
    <input type="text" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" id="input-search" class="form-control mb-1"/>
    <div class="form-check">
      <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 mb-3">
    <select name="category_id" id="input-category" class="form-select mb-1">
      <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">
      <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 text-end">
    <button type="button" id="button-search" class="btn btn-primary">{{ button_search }}</button>
  </div>
</div>
<hr/>
<h2>{{ text_search }}</h2>
{% if products %}
  <div id="display-control" class="row">
    <div class="col-md-3">
      <div class="mb-3">
        <a href="{{ compare }}" id="compare-total" class="btn btn-primary d-block"><i class="fa-solid fa-arrow-right-arrow-left"></i> <span class="d-inline d-md-none d-lg-inline">{{ text_compare }}</span></a>
      </div>
    </div>
    <div class="col-md-1 d-none d-md-block">
      <div class="btn-group">
        <button type="button" id="button-list" class="btn btn-light" title="{{ button_list }}"><i class="fa-solid fa-table-list"></i></button>
        <button type="button" id="button-grid" class="btn btn-light" title="{{ button_grid }}"><i class="fa-solid fa-table-cells"></i></button>
      </div>
    </div>
    <div class="col-md-4 offset-md-1 col-6">
      <div class="input-group mb-3">
        <label for="input-sort" class="input-group-text">{{ text_sort }}</label> <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 class="col-md-3 col-6">
      <div class="input-group mb-3">
        <label for="input-limit" class="input-group-text">{{ text_limit }}</label> <select id="input-limit" class="form-select" onchange="location = this.value;">
          {% for limits in limits %}
            <option value="{{ limits.href }}"{% if limits.value == limit %} selected{% endif %}>{{ limits.text }}</option>
          {% endfor %}
        </select>
      </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 mb-3">{{ product }}</div>
    {% endfor %}
  </div>
  <div class="row">
    <div class="col-sm-6 text-start">{{ pagination }}</div>
    <div class="col-sm-6 text-end">{{ results }}</div>
  </div>
{% else %}
  <p>{{ text_no_results }}</p>
{% endif %}
