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

{% block title %}Essences{% endblock %}

{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block url %}essences{% endblock %}
{% block m_url %}essences{% endblock %}

{% block loading %}{% endblock %}

{% block main %}
    <div role="main" class="main">

        <section class="page-header page-header-modern bg-color-light-scale-1 page-header-md ">
            <div class="container-fluid">
                <div class="row align-items-center">

                    <div class="col">
                        <div class="row">
                            <div class="col-md-12 align-self-center p-static order-2 text-center">
                                <div class="overflow-hidden pb-2">
                                    <h1 class="text-dark font-weight-bold text-9 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="100">Essences de Bois</h1>
                                </div>
                            </div>
                            <div class="col-md-12 align-self-center order-1">
                                <ul class="breadcrumb d-block text-center appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
									<li><a href="{{ path('app_home') }}">Accueil</a></li>
                                    <li class="active">Essences</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>


		<div class="masonry-loader masonry-loader-showing">
			<div class="masonry row g-0" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}">
				{% include 'essence/list.html.twig' with { species } %}
			</div>
		</div>

    </div>
{% endblock %}

{% block scripts %}
    {{ parent() }}
{% endblock %}