{% 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 name(plant) %}
<a hx-get="/plants/{{ plant.id }}" hx-target="#content" hx-push-url="true">{{ plant.name }} (<em>{{ plant.species }}</em>)</a>
{% endmacro %}

{% macro li(plant) %}
<li>
    {{ self::name(plant=plant) }} 
</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">
    <input type="text" id="name" name="name" placeholder="My super cool plant"></br>
    <input type="text" id="species" name="species" placeholder="Philodendron Candens"></br>
    <textarea id="description" name="description" rows=2 placeholder="An additional description"></textarea></br>
    <input type="submit" value="Add plant">
</form>
{% endmacro %}