{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
                <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
                <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
        </div>
        {% if success %}
          <div class="success full-width">{{ success }}</div>
        {% endif %}
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div class="row bottom-xs">
    <div class="col-xs-12 col-md-6">
      <label class="field field-medium">
        <span class="field-label">{{ column_name ~ ':' }}</span>
        <input class="field-entry" type="text" name="filter_name" value="{{ filter_name }}" id="filter-name"/>
      </label>
    </div>
    <div class="col-xs-12 col-md-4">
      <label class="field field-medium">
        <span class="field-label">{{ column_model ~ ':' }}</span>
        <input class="field-entry" type="text" name="filter_model" value="{{ filter_model }}" id="filter-model"/>
      </label>
    </div>
    <div class="col-xs-12 col-md">
      <div class="content-box flex end-xs">
        <button class="btn-default btn-medium-square btn-primary top-margin-medium js-btn-filter">
          <i class="fas fa-filter"></i>
          <span>{{ button_filter }}</span>
        </button>
      </div>
    </div>
  </div>

  {% if products %}
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box background-white bottom-border-gray padding-medium top-margin-small">
          <div class="row no-space-xs middle-xs">
            <div class="col-xs-7">
              <span class="text-small text-dark text-bold">{{ column_name }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_model }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_viewed }}</span>
            </div>
            <div class="col-xs">
              <span class="text-small text-dark text-bold">{{ column_percent }}</span>
            </div>
          </div>
        </div>
        {% for product in products %}
          <div class="content-box background-white padding-medium bottom-border-gray">
            <div class="row no-space-xs middle-xs">
              <div class="col-xs-7">
                <span class="text-small text-dark">{{ product.name }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ product.model }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ product.viewed }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-dark">{{ product.percent }}</span>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box">
          {{ pagination }}
        </div>
      </div>
    </div>
  {% else %}
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center top-margin-medium">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>
    </div>
  {% endif %}
</div>

{{ footer }}