{{ header }}

<section class="container-fluid" id="account-message-info" data-info="{{ success }}">

  {% if error %}
    <div class="warning">{{ error }}</div>
  {% endif %}

  {{ breadcrumbs }}

  <div class="row">
    <div class="col-md-3 hidden-md-down">
      <div class="content-box js-fixed-on-top">
        {{ account }}
      </div>
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs bottom-margin-medium">
          <a href="{{ back }}" class="padding-small text-x-large text-dark hidden-md-up">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">{{ text_material }}</span>
        </div>

        {% if materials %}
          <div class="row stretch-xs">
            {% for material in materials %}
              <div class="col-xs-12 col-md-4">
                <div class="content-box border-gray padding-large">
                  <img src="{{ material.image }}" class="visible-block full-width">
                  <div class="flex top-margin-medium">
                    <!-- <button type="button" class="btn-default btn-medium btn-outline right-margin-small">
                      <span>Compartilhar</span>
                    </button> -->
                    {% if material.download %}
                      <a href="{{ material.download }}" class="btn-default btn-medium-square btn-outline right-margin-small" target="_blank" download>
                        <i class="fas fa-file-download"></i>
                      </a>

                      <a href="https://www.facebook.com/sharer/sharer.php?u={{ material.download }}" class="btn-default btn-medium-square btn-outline right-margin-small" target="_blank">
                        <i class="fab fa-facebook"></i>
                      </a>
                      <a href="https://api.whatsapp.com/send?text={{ material.download }}" class="btn-default btn-medium-square btn-outline" target="_blank">
                        <i class="fab fa-whatsapp"></i>
                      </a>
                    {% endif %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
          <div class="top-border-gray top-padding-medium top-margin-medium">{{ pagination }}</div>
        {% else %}
          <div class="padding-large border-gray text-center ">
            <span class="visible-block text-x-large text-dark vertical-margin-x-large">{{ text_empty }}</span>
          </div>
        {% endif %}

      </div>
    </div>
  </div>
</section>
{{ footer }}