{% extends 'base.html.twig' %}

{% block title %}Herbarium - Espèces{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

<div class="example-wrapper">
    <h1>Liste des espèces</h1>

    <dl>
        {% for specie in species %}
            <dt>
                <a href={{ "http://" ~ app.request.host ~ ":8000" ~ "/species/" ~ specie.getId }}>
                🌿 {{ specie.getVernacularName }}
                </a>
            </dt>
            <dd >
                🔬 Nom Scientifique : {{ specie.getScientificName }}<br/>
                📍 Region : {{ specie.getRegion }}
            </dd><br/>
        {% endfor %}
    </dl>

</div>
{% endblock %}