{% 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 %}