{% extends "base.html" %} {% block title %} home {% endblock %} {% block heading
%}recipes{% endblock %} {% block content %}
<h3>add new recipe</h3>
<form
  hx-post="/recipes/add"
  hx-trigger="submit load"
  hx-target=".app"
  hx-swap="innerHTML"
  hx-indicator="#spinner"
  hx-target-422="#form-error"
  hx-target-5*="#form-error"
>
<div style="display: flex; align-items: center; margin-bottom: 15px;"}>
  <input type="url" name="url" class="border-2 border-black" style="margin-bottom: 0px; margin-right: 10px;"/>
  <img src={{url_for("static", filename="images/bars.svg")}} class="htmx-indicator" id="spinner" alt="loading indicator "/>
</div>
  <button type="submit" class="cursor-pointer">Submit</button>
  <div id="form-error"></div>
</form>

<h3>search for recipes 🔎</h3>
<div style="display: flex; align-items: center; margin-bottom: 15px;"}>
  <input
    type="text"
    hx-trigger="input"
    hx-post="/recipes/search"
    hx-target=".app"
    hx-include="#facets"
    hx-indicator="#spinner-2"
    name="q"
    class="border-2 border-black"
    id="search"
    style="margin-bottom: 0px; margin-right: 10px;"
  />
  <img src={{url_for("static", filename="images/bars.svg")}} class="htmx-indicator" id="spinner-2" alt="loading indicator "/>
</div>

{% include "/components/app.html" %} {% endblock %}