{% extends 'base.html' %}

{% block title %} - All sets{% endblock %}

{% block main %}
{% if collection | length %}
<div class="container-fluid">
  <div class="row row-cols-lg-auto g-1 justify-content-center align-items-center pb-2">
    <div class="col-12 flex-grow-1">
      <label class="visually-hidden" for="grid-search">Search</label>
      <div class="input-group">
        <span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-md-inline"> Search</span></span>
        <input id="grid-search" data-search-exact="name,number,parts,searchPurchaseLocation,searchStorage,theme,year" data-search-list="searchOwner,searchTag" class="form-control form-control-sm" type="text" placeholder="Set, name, number of parts, theme, year, owner, purchase location, storage, tag" value="">
      </div>
    </div>
    <div class="col-12">
      <div class="input-group">
        <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#grid-sort" aria-expanded="{% if config['SHOW_GRID_SORT'] %}true{% else %}false{% endif %}" aria-controls="grid-sort">
          <i class="ri-sort-asc"></i> Sort
        </button>
      </div>
    </div>
    <div class="col-12">
      <div class="input-group">
        <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#grid-filter" aria-expanded="{% if config['SHOW_GRID_FILTERS'] %}true{% else %}false{% endif %}" aria-controls="grid-filter">
          <i class="ri-filter-line"></i> Filters
        </button>
      </div>
    </div>
  </div>
  {% include 'set/sort.html' %}
  {% include 'set/filter.html' %}
  <div class="row" data-grid="true" id="grid">
  {% for item in collection %}
    <div class="col-md-6 col-xl-3 d-flex align-items-stretch">
      {% with index=loop.index0 %}
        {% include 'set/card.html' %}
      {% endwith %}
    </div>
  {% endfor %}
  </div>
</div>
{% else %}
  {% include 'set/empty.html' %}
{% endif %}
{% endblock %}