<!-- Renders the main part of the app, including recipes, filters, pagination -->

<div class="app">
  <div style="display: flex;">
    <h3 style="margin-right:10px;">Filter by tag</h3>
    <img src={{url_for("static", filename="images/bars.svg")}} class="htmx-indicator" id="spinner-3" alt="loading indicator "/>
  </div>
  <form
    class="tags"
    hx-post="/recipes/search"
    hx-trigger="change"
    hx-include="#search"
    hx-target=".app"
    hx-swap="innerHTML"
    hx-indicator="spinner-3"
    id="facets"
  >
    {% for facet in facets %}
    <label
      ><input
        type="checkbox"
        name="choice-{{ loop.index }}"
        value="{{ facet.name }}"
        {%
        if
        facet.checked
        %}
        checked
        {%
        endif
        %}
      />{{ facet.name }}</label
    >
    {% endfor %}
  </form>
  <hr />

  {% if recipes|length > 0 %}
  <ul class="recipes">
    {% for recipe in recipes %}
    <li>
      <a href="/recipe/{{recipe._id}}">{{ recipe.title }}</a>
      <span>{{ recipe.author }}</span>
    </li>
    {% endfor %}
  </ul>

  {% else %}
  <p><i>No recipes found</i></p>
  {% endif %}
  <div></div>
</div>