Add recipe delete button to frontend

src/humulus/templates/_macros.html

@@ -13,9 +13,14 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -#}
-{% macro render_field_with_errors(field, size='') %}
+
+{#
+  Macro for rendering WTF fields.
+  field is a FormField, and class is an additional class that gets added onto the field.
+#}
+{% macro render_field_with_errors(field, class='') %}
 <div class="form-group">
-    {{ field.label }} {{ field(class_='form-control ' + size, **kwargs)|safe }}
+    {{ field.label }} {{ field(class_='form-control ' + class, **kwargs)|safe }}
     {% if field.errors %}
       {% for error in field.errors %}
         <div class="container">
@@ -25,3 +30,43 @@
     {% endif %}
   </div>
 {% endmacro %}
+
+{#
+  Macro to render a delete button that triggers a modal.
+  content goes inside the button. class is an additional class to add on the button.
+  id is the ID of the deleteModal.
+#}
+{% macro render_delete_button(content, id, class='') %}
+<button type="button" class="btn {{ class }}" data-toggle="modal" data-target="#{{ id }}">
+  {{ content }}
+</button>
+{% endmacro %}
+
+{#
+  Macro to render a delete modal. Starts as hidden.
+  path is the path to send the delete POST request to. id is the id of the modal.
+  name is used in the delete confirmation.
+#}
+{% macro render_delete_modal(path, id, name) %}
+<div class="modal fade" id="{{ id }}" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Delete {{ name }}</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          Are you sure you want to delete "{{ name }}"?
+        </div>
+        <div class="modal-footer">
+          <form action="{{ path }}" method="post">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
+            <button title="Delete" type="submit" name="delete{{ id }}" class="btn btn-danger">Yes</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endmacro %}

src/humulus/templates/recipes/info.html

@@ -13,11 +13,15 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -#}
-{% from "_macros.html" import render_field_with_errors %}
+{% from "_macros.html" import render_field_with_errors, render_delete_button, render_delete_modal %}
 
 {% extends '_base.html' %}
 {% block title %}{{ recipe.name }}{% endblock %}
 
 {% block body %}
 <div class="row"><h1>{{ recipe.name }}</h1></div>
+<div class="row">
+  {{ render_delete_button('Delete Recipe', 'deleteRecipe', 'btn-sm btn-danger') }}
+</div>
+{{ render_delete_modal(url_for('recipes.delete', id=recipe._id), 'deleteRecipe', recipe.name) }}
 {% endblock %}