{{header}}
<section class="container-fluid order-list">
  {{breadcrumbs}}
  <div class="row">
    <div class="col-xs-12 col-md-3 hidden-md-down">
      <div class="content-box js-fixed-on-top">
        {{ account }}
      </div>
    </div>
    <div class="col-xs">
      <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 orders %}
        {% for order in orders %}
          <div class="paper bottom-padding-large left-padding-large top-margin-medium {{order.type_status}}">
            <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">{{ text_order_id }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ order.order_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_status }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ order.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">{{ order.date_added }}</span>
                </div>
              </div>
              <div class="col-xs-6">
                <div class="content-box top-padding-large right-padding-large">
                  {% if order.total_pontos > 0 %}
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_total_pontos }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ order.total_pontos }}</span>
                  {% else %}
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_total }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ order.total }}</span>
                  {% endif %}
                </div>
              </div>
              <div class="col-xs-12">
                <div class="content-box top-padding-large right-padding-large flex">
                  {% for image in order.images %}
                    <div class="right-margin-small">
                      <img src="{{ image }}" alt="" class="visible-block">
                    </div>
                  {% endfor %}
                  {% if order.products > 0 %}
                    <div class="rel" style="width:80px;height:80px;">
                      <span class="text-medium text-dark text-bold center-middle-absolute">+{{ order.products }}</span>
                    </div>
                  {% endif %}
                </div>
              </div>
              <div class="col-xs-12">
                <div class="content-box top-padding-medium right-padding-large flex">
                  <a href="{{order.href}}" class="btn-default btn-medium right-margin-small top-margin-small">
                    <span>{{ text_order_view }}</span>
                  </a>
                  {% if order.fidelity == false %}
                    <a href="{{order.reorder}}" class="btn-default btn-medium btn-outline top-margin-small">
                      <span>{{ text_order_repurchase }}</span>
                    </a>
                  {% endif %}
                </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_order_title}}</span>
          <a href="{{home}}" class="btn-default btn-medium top-margin-medium bottom-margin-x-large">
            <span>{{text_empty_order_button}}</span>
          </a>
        </div>
      {% endif %}
    </div>
    {% if column_right %}
      <div class="hidden-md-down col-md-3">
        {{ column_right }}
      </div>
    {% endif %}
  </div>
</section>
{{footer}}
