6 files changed, 67 insertions, 15 deletions
diff --git a/templates/base.html b/templates/base.html
index 64ae319..3181a2f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,9 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>index.cooking - {% block title %}{% endblock %}</title>
     <script src="/static/scripts/htmx.js" defer></script>
+    <script src="/static/scripts/htmx-targets.js" defer></script>
+    {% block scripts %} {% endblock %}
     <link href="/static/style/style.css" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body>
+  <body hx-ext="response-targets">
     {% include "/components/header.html" %}
     <h1>{% block heading %}Some heading!{% endblock %}</h1>
     {% block content %}{% endblock %}
diff --git a/templates/components/app.html b/templates/components/app.html
index 6a4c83a..f2fe587 100644
--- a/templates/components/app.html
+++ b/templates/components/app.html
@@ -1,7 +1,10 @@
 <!-- Renders the main part of the app, including recipes, filters, pagination -->
 
 <div class="app">
-  <h3>Filter by tag</h3>
+  <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"
@@ -9,6 +12,7 @@
     hx-include="#search"
     hx-target=".app"
     hx-swap="innerHTML"
+    hx-indicator="spinner-3"
     id="facets"
   >
     {% for facet in facets %}
diff --git a/templates/pages/account.html b/templates/pages/account.html
index db28632..10a3789 100644
--- a/templates/pages/account.html
+++ b/templates/pages/account.html
@@ -1,5 +1,11 @@
-{% extends "base.html" %} {% block title %} account {% endblock %} {% block
-heading %}
+{% extends "base.html" %} {% block scripts %}
+
+<!-- Conditionally load index.js, as it's only needed on this page -->
+<script
+  src="{{ url_for('static', filename='scripts/index.js') }}"
+  defer
+></script>
+{% endblock %} {% block title %} account {% endblock %} {% block heading %}
 <h1>Hey {{ session.username }} 👋</h1>
 {% endblock %} {% block content %}
 <p>
@@ -13,4 +19,13 @@ heading %}
   <a href="mailto:hello@somwthing.com">here.</a>
 </p>
 <button hx-post="/logout">Logout</button>
+<button id="show-modal">Delete account</button>
+<dialog>
+  <p>
+    Are you sure you want to delete your account? This will erase all your data
+    including your recipes.
+  </p>
+  <button hx-delete="/delete-account">yes</button>
+  <button id="close-modal">cancel</button>
+</dialog>
 {% endblock %}
diff --git a/templates/pages/home.html b/templates/pages/home.html
index 6a5d4cd..c44a017 100644
--- a/templates/pages/home.html
+++ b/templates/pages/home.html
@@ -6,21 +6,33 @@
   hx-trigger="submit load"
   hx-target=".app"
   hx-swap="innerHTML"
+  hx-indicator="#spinner"
+  hx-target-422="#form-error"
+  hx-target-5*="#form-error"
 >
-  <input type="text" name="url" class="border-2 border-black" />
+<div style="display: flex; align-items: center; margin-bottom: 15px;"}>
+  <input type="text" 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>
-<input
-  type="text"
-  hx-trigger="input"
-  hx-post="/recipes/search"
-  hx-target=".app"
-  hx-include="#facets"
-  name="q"
-  class="border-2 border-black"
-  id="search"
-/>
+<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 %}
diff --git a/templates/pages/signup.html b/templates/pages/signup.html
index c706074..99d6021 100644
--- a/templates/pages/signup.html
+++ b/templates/pages/signup.html
@@ -7,6 +7,8 @@
   <input type="text" name="username" id="username" />
   <label for="password">password</label>
   <input type="password" name="password" id="password" />
+  <label for="password-confirm">confirm password</label>
+  <input type="password" name="password-confirm" id="password-confirm" />
   <button type="submit">submit</button>
 </form>
 <p id="message"></p>
diff --git a/templates/pages/single-recipe.html b/templates/pages/single-recipe.html
index 35c03c0..d8c334d 100644
--- a/templates/pages/single-recipe.html
+++ b/templates/pages/single-recipe.html
@@ -12,11 +12,23 @@ endblock %} {% block content %}
     {% endfor %}
   </ul>
   <h2>Instructions</h2>
+  {% if single_recipe.has_subsections %}
+      {% for instruction in single_recipe.instructions %}
+      <h3>{{  instruction.n }}</h3>
+          <ul>
+          {% for i in instruction.i %}
+          <li>{{ i }}</li>  
+          {% endfor %}
+          </ul>
+      {% endfor %}
+  {% else %}
   <ul>
     {% for instruction in single_recipe.instructions %}
     <li>{{ instruction }}</li>
     {% endfor %}
   </ul>
+  {% endif %}
+
 </article>
 <button
   hx-delete="/recipes/delete/{{ single_recipe._id }}"