{% extends "base.html" %} {% block heading %} {{ single_recipe.title }} {%
endblock %} {% block content %}
<article>
  <figure>
    <img src="{{ single_recipe.image }}" alt="{{ single_recipe.title }}" />
    <figcaption><a href="{{ single_recipe.url }}">Source</a></figcaption>
  </figure>
  <h2>Ingredients</h2>
  <ul>
    {% for ingredient in single_recipe.ingredients %}
    <li>{{ ingredient }}</li>
    {% endfor %}
  </ul>
  <h2>Instructions</h2>
  <ul>
    {% for instruction in single_recipe.instructions %}
    <li>{{ instruction }}</li>
    {% endfor %}
  </ul>
</article>
<button
  hx-delete="/recipes/delete/{{ single_recipe._id }}"
  hx-target="#delete-message"
  hx-swap="innerHTML"
>
  Delete recipe
</button>
<p id="delete-message"></p>
{% endblock %}