---
layout: "default"
---
<div class="container py-5 mb-100" data-controller="pagefind" data-pagefind-indexed-value="indexed_recipe">
  {% render 'sutty/title.html', title: page.title, class: 'pt-5 pb-3', h: '1', description: page.description %}

  {% if site.recipes == empty %}
    <h1>Error: No recipes were processed</h1>
  {% else %}
    <div class="mb-3">
      <form
        class="w-100 mr-4"
        action="{{ page.url | component_escape }}"
        method="get"
        data-pagefind-target="form"
        data-action="pagefind#search:prevent"
      >
        {% render 'forms/hidden.html', id: 'layout', value: 'recipe' %}
        <div class="row row-cols-1 row-cols-lg-5">
          <div class="col mb-3">
            {% render 'forms/select.html', id: 'categories', items: site.data.pagefind.app_categories %}
          </div>
          <div class="col mb-3">
            {% render 'forms/select.html', id: 'rating', items: site.data.pagefind.rating %}
          </div>
          <div class="col mb-3">
            <input type="search" class="form-control w-100" placeholder="" name="q">
          </div>
          <div class="col mb-3">
            {% render 'forms/select.html', id: 'sort', items: site.data.pagefind.sort %}
          </div>
        </div>
      </form>
    </div>
    <div
      class="row row-cols-1 row-cols-lg-2 g-0 w-100"
      data-pagefind-target="container"
    >
      {% for recipe in site.recipes %}
        {% assign icon = recipe.metadata.icon | default: 'public/59c6b7ef75334ab1dd8d9a1c9bf/default.png' %}
        {% assign image = 'path,description' | create_hash: icon, recipe.description %}
        <div class="col">
          {% render 'card_recipe.html', title: recipe.title, description: recipe.description, image:, star: recipe.metadata.features.status, url: recipe.url %}
        </div>
      {% endfor %}
    </div>
  {% endif %}

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

  <section data-pagefind-target="empty" class="mx-auto" hidden>
    <h2>{{ page.empty }}</h2>
  </section>

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