2 files changed, 69 insertions, 0 deletions
diff --git a/templates/components/app.html b/templates/components/app.html
new file mode 100644
index 0000000..6a4c83a
--- /dev/null
+++ b/templates/components/app.html
@@ -0,0 +1,48 @@
+<!-- Renders the main part of the app, including recipes, filters, pagination -->
+
+<div class="app">
+  <h3>Filter by tag</h3>
+  <form
+    class="tags"
+    hx-post="/recipes/search"
+    hx-trigger="change"
+    hx-include="#search"
+    hx-target=".app"
+    hx-swap="innerHTML"
+    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>
diff --git a/templates/components/header.html b/templates/components/header.html
new file mode 100644
index 0000000..e69cedf
--- /dev/null
+++ b/templates/components/header.html
@@ -0,0 +1,21 @@
+<header>
+  <nav>
+    <ul>
+      <li><a href="/">index.cooking</a></li>
+      <li><a href="/about">about</a></li>
+      {% if not session.username %}
+      <li><a href="/signup">sign up</a></li>
+      <li><a href="/login">login</a></li>
+      {% endif %} {% if session.username %}
+      <li><a href="/home">recipes</a></li>
+      {% endif %}
+    </ul>
+    {% if session.username %}
+    <ul>
+      <li>
+        <a href="/account">{{ session.username }} (account)</a>
+      </li>
+    </ul>
+    {% endif %}
+  </nav>
+</header>