{{ header }}
<section class="container-fluid">
  {{ breadcrumbs }}
  <div class="row small-space-xs">
    {% if categories %}
      <div class="col-xs-12">
        <div class="content-box">
          <h2 class="heading-1">{{ heading_title }}</h2>
          <span class="text-medium">{{ text_index }}</span>
        </div>
      </div>

      <div class="col-xs-12">
        <div class="flex">
          {% for key, category in categories %}
            <a href="{{category.name}}" class="btn-default btn-medium-square btn-outline js-manufacturer-index right-margin-small bottom-margin-small">
              <span>{{ category.name }}</span>
            </a>
          {% endfor %}
        </div>
      </div>
      {% for category in categories %}
        {% if category.manufacturer %}
          <div class="col-xs-12">
            <span id="{{category.name}}" class="visible-block text-medium text-bold text-dark">{{ category.name }} | {{ category.manufacturer|length }} {{ text_manufacturer }}</span>
          </div>
          {% for manufacturer in category.manufacturer %}
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
              <a href="{{ manufacturer.href }}" class="flex nowrap-xs middle-xs border-gray padding-medium">
                {% if manufacturer.image %}
                  <div class="right-margin-medium">
                    <img src="{{ manufacturer.image }}" alt="" class="visible-block">
                  </div>
                {% endif %}
                <div class="text-ellipsis">
                  <span class="visible-block text-medium text-bold text-ellipsis bottom-margin-x-small">{{ manufacturer.name }}</span>
                  <span class="visible-block text-small text-gray">{{ manufacturer.total }} {{text_product}}</span>
                </div>
              </a>
            </div>
          {% endfor %}
        {% endif %}
      {% endfor %}
    {% else %}
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 vertical-margin-large">
        <div class="content-box text-center border-gray vertical-padding-x-large">
          <i class="far fa-meh bigger-text-x-large visible-block top-margin-x-large" aria-hidden="true"></i>
          <span class="text-x-large visible-block top-margin-medium">{{ text_empty }}</span>
          <a href="{{continue}}" class="btn-default btn-medium vertical-margin-x-large">
            <span>{{ button_continue }}</span>
          </a>
        </div>
      </div>
    {% endif %}
  </div>
</section>
{{ footer }}
<script type="text/javascript">
  window.waitEvent('scripts_document', function() {
    $('.js-manufacturer-index').on('click', function(event) {
      event.preventDefault();
      var link = $(this).attr('href');
      $('html, body').animate({
        scrollTop: $('#' + link).offset().top
      }, 500);
    });
  });
</script>
