---
layout: default
---
<div class="container" data-controller="pagefind">
  <header>
    <h1 class="pb-3 text-primary">{{ page.type | capitalize }}: {{ page.title | default: '' | escape }}</h1>
  </header>

  <div class="mb-3">
    {% render 'search_box_with_filters.html',
      url: page.url,
      categories: site.data.pagefind.categories,
      tags: site.data.pagefind.tags,
      status: site.data.pagefind.status,
      topics: site.data.pagefind.topics,
      sort: site.data.pagefind.sort,
      value: page.title,
      name: page.type
    %}
  </div>

  <div
    data-pagefind-target="container"
    class="row row-cols-1 row-cols-md-2 w-100 g-0"
  >
    {% for post in page.posts %}
      {% render 'card_search.html', **post %}
    {% endfor %}
  </div>

  {% render 'sutty/placeholder.html', controller: 'pagefind' %}

  <section data-pagefind-target="empty" class="mx-auto" hidden>
    <h2>No results</h2>
  </section>

  <section data-pagefind-target="searching" class="mx-auto" hidden>
    <h2>Searching...</h2>
  </section>
</div>