feat: overhaul templating system

templates/components/plant.html

@@ -0,0 +1,37 @@
+{% macro info(plant) %}
+<div class="plant_info">
+    <h2>{{ plant.name }}</h2>
+    <h3>Species</h3>
+    <p>{{ plant.species }}</p>
+    <h3>Description</h3>
+    <p>{{ plant.description }}</p>
+</div>
+{% endmacro info %}
+
+{% macro li(plant) %}
+<li>
+    <a hx-get="/plants/{{ plant.id }}" hx-target="#content" hx-push-url="true">{{ plant.name }}</a> ({{ plant.species }})
+</li>
+{% endmacro li %}
+
+{% macro list(plants) %}
+<div id="plants">
+    <ul>
+    {% for plant in plants %}
+        {{ self::li(plant=plant) }}
+    {% endfor %}
+    </ul>
+</div>
+{% endmacro %}
+
+{% macro form(target="#plants > ul") %}
+<form hx-post="/plants" hx-target="{{ target }}" hx-swap="beforeend">
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="name"></br>
+    <label for="species">Species:</label>
+    <input type="text" id="species" name="species"></br>
+    <label for="description">Description:</label>
+    <textarea id="description" name="description" rows=4></textarea></br>
+    <input type="submit">
+</form>
+{% endmacro %}