{% extends "base.html" %}

{% block css %}
    {{super()}}
    <link href="{{ get_url(path="plants.css", trailing_slashes=false) | safe }}" rel="stylesheet">
{% endblock css %}

{% block content %}
<h1 class="title">
  {{ section.title }}
</h1>
<div class="plants-list">
  <!-- If you are using pagination, section.pages will be empty. You need to use the paginator object -->  
  {% for page in section.pages %}
  <div class="plant-item">
    {% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
    {% set image = resize_image(path=data.image.url, width=256, height=128, op="fill") %}
    <a class="plant-link" href="{{ page.permalink | safe }}">
      <img class="plant-image" src="{{ image.url }}" alt="{{ data.image.alt }}">
      <h2 class="plant-title">{{ page.title }}</h2>
    </a>
  </div>
  {% endfor %}
</div>
{% endblock content %}