{% extends "base.html" %}

{% block scripts %}

<script src={{ url_for("static", filename="scripts/index.js") }} defer></script>

{% endblock %}

{% 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 class="inline-block">Ingredients<span id="copy-ingredients" class="cursor">📋</span></h2>
  <ul id="ingredients">
    {% for ingredient in single_recipe.ingredients %}
    <li>{{ ingredient }}</li>
    {% 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 }}"
  hx-target="#delete-message"
  hx-swap="innerHTML"
>
  Delete recipe
</button>
<p id="delete-message"></p>
{% endblock %}