{{ header }}
<section class="container-fluid">
  {% if content_top %}
    {{ content_top }}
  {% 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">
          <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">{{ heading_title }}</span>
        </div>

        {% if returns %}
          <div class="paper padding-large vertical-margin-medium flex flex-row center-xs">
            <a href="{{ new_devolution }}" class="btn-default btn-medium">
              <span>{{ text_new_devolution }}</span>
            </a>
          </div>
          {% for return in returns %}
            <div class="paper bottom-padding-large left-padding-large bottom-margin-medium">
              <div class="row no-space-xs">
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">Status</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ return.status }}</span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_date_added }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ return.date_added }}</span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_return_id }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ return.return_id }}</span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_order_id }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ return.order_id }}</span>
                  </div>
                </div>
                <div class="col-xs-12">
                  <div class="content-box flex flex-row">
                    <a href="{{ return.href }}" class="btn-default btn-medium top-margin-large">
                      <span>Detalhes da devolução</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
          <div class="top-border-gray top-padding-medium top-margin-medium">{{ pagination }}</div>
        {% else %}
          <div class="padding-large paper top-margin-medium flex flex-row center-xs">
            <span class="full-width text-center text-x-large text-dark top-margin-x-large">{{ text_empty }}</span>
            <a href="{{ new_devolution }}" class="btn-default btn-medium top-margin-medium bottom-margin-x-large">
              <span>{{ text_new_devolution }}</span>
            </a>
          </div>
        {% endif %}

      </div>
    </div>
    {% if column_right %}
      <div class="col-md-3 hidden-md-down">
        {{ column_right }}
      </div>
    {% endif %}
  </div>

  {% if content_bottom %}
    {{ content_bottom }}
  {% endif %}
</section>

{{ footer }}
