{{ header }}
{% if error %}
  <div class="warning">{{ error }}</div>
{% endif %}
<div class="ftr-in-space--l">
  <span class="ftr-text--s ftr-text--upper">{{ text_material }}</span>
</div>
{% if materials %}
  <div class="ftr-grid">
    {% for material in materials %}
      <div class="ftr-grid__card">
        <img src="{{ material.image }}" class="ftr-in-space--xl">
        {# <div class="ftr-out-space--t-s">
          <button type="button" class="ftr-btn ftr-inline ftr-h--full ftr-background--primary ftr-js-ripple-effect">
            <span class="ftr-text--s ftr-text--dark ftr-in-space--h-l">{{ text_compartilhar }}</span>
          </button>
        </div> #}
        {% if material.download %}
          <div class="ftr-out-space--t-s">
            <a href="{{ material.download }}" class="ftr-btn ftr-inline ftr-background--primary ftr-js-ripple-effect ftr-out-space--r-s" target="_blank" download>
              <span class="ftr-text--s ftr-text--dark ftr-in-space--h-l">{{ text_download }}</span>
            </a>
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>
  {% if (pagination) %}
    <div class="ftr-pagination ftr-width--full">
      {{ pagination }}
    </div>
  {% endif %}
{% else %}
  <div class="ftr-card ftr-in-space--xl ftr-text--center">
    <span class="ftr-text--m ftr-in-space--xl ftr-block">{{ text_empty }}</span>
    <a href="{{ back }}" class="ftr-btn ftr-inline ftr-background--primary ftr-js-ripple-effect">{{ text_back }}</a>
  </div>
{% endif %}
{{ footer }}
