{{ header }}
<main id="product-category" class="sutto-catalogue-page">
  <div class="container">
    <ul class="breadcrumb sutto-breadcrumb">
      {% for breadcrumb in breadcrumbs %}<li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>{% endfor %}
    </ul>
    <div class="sutto-catalogue-page__masthead">
      <div>
        <p class="sutto-kicker">SUTTO SHOP</p>
        <h1>{{ heading_title }}</h1>
      </div>
      {% if description %}<div class="sutto-catalogue-page__description">{{ description }}</div>{% endif %}
    </div>
    <aside class="sutto-quote-guidance"><div><p class="sutto-kicker">SUTTO B2B</p><h2>{{ asutto_quote_title|default('Richiedi un’offerta tecnica') }}</h2><p>{{ asutto_quote_description|default('Per applicazioni su misura richiedi una valutazione tecnica dedicata.') }}</p></div><a href="{{ asutto_quote_link|default('#') }}" class="sutto-button sutto-button--orange">{{ asutto_quote_action|default('Richiedi un’offerta') }} <i class="fa-solid fa-arrow-right"></i></a></aside>
    <div class="row">{{ column_left }}
      <div id="content" class="col">{{ content_top }}
        {% if categories %}
          <div class="sutto-subcategories">
            <p class="sutto-kicker">{{ text_refine }}</p>
            <div class="sutto-subcategories__grid">
              {% for category in categories %}<a href="{{ category.href }}"><span>{{ category.name }}</span><i class="fa-solid fa-arrow-right"></i></a>{% endfor %}
            </div>
          </div>
        {% endif %}
        {% if products %}
          <div class="sutto-product-tools">
            <a href="{{ compare }}" id="compare-total" class="sutto-link"><i class="fa-solid fa-arrow-right-arrow-left"></i> {{ text_compare }}</a>
            <div class="btn-group" aria-label="{{ button_grid }}"><button type="button" id="button-list" class="btn btn-light" data-bs-toggle="tooltip" title="{{ button_list }}"><i class="fa-solid fa-table-list"></i></button><button type="button" id="button-grid" class="btn btn-light" data-bs-toggle="tooltip" title="{{ button_grid }}"><i class="fa-solid fa-table-cells"></i></button></div>
            <div class="sutto-select"><label for="input-sort">{{ 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 class="sutto-select"><label for="input-limit">{{ 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 id="product-list" class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
            {% for product in products %}<div class="col mb-3">{{ product }}</div>{% endfor %}
          </div>
          <div class="sutto-pagination"><div>{{ pagination }}</div><div>{{ results }}</div></div>
        {% endif %}
        {% if not categories and not products %}
          <div class="sutto-empty-catalogue"><p>{{ text_no_results }}</p><a href="{{ continue }}" class="sutto-button sutto-button--orange">{{ button_continue }}</a></div>
        {% endif %}
        {{ content_bottom }}
      </div>
      {{ column_right }}
    </div>
  </div>
</main>
{{ footer }}