  {% if orders %}
    <div class="row no-space-xs stretch-xs vertical-padding-large rel">
    <div class="overlay-abs overlay-white-6 hidden" id="loading"></div>
      <div class="col-xs-12">
        <div class="row no-space-xs middle-xs">
          <div class="col-xs-12 col-md-9">
            <div class="content-box">
              <span class="text-x-large text-dark">{{ text_latest_sales }}</span>
            </div>
          </div>
          {% if contrlProcVenda %}
            <div class="col-xs-12 col-md-3">
              <div class="field-group visible-inline-block">
                <label class="field-label">Filtros:</label>
                <select class="field-entry field-entry-medium js-status-proccess">
                  <option value="">Todos</option>
                  {% for process in contrlProcVenda %}
                    <option value="{{ process.key }}" {{ process.selected }}>{{ process.value }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="col-xs-12">
        <div class="content-box top-margin-large">
          <div class="row small-space-xs js-sales-order-cards">
            {% for order in orders %}
              <div class="col-xs-6 col-sm-4 col-md-3">
                <a href="{{ order.href }}" class="content-box visible-block text-decoration-none background-white shadow-small hover:shadow-large">
                  <div class="flex between-sm left-xs top-padding-large">
                    <span class="text-small text-dark text-bold visible-block horizontal-padding-large">#{{ order.order_id }}</span>
                    <span class="text-small text-gray visible-block horizontal-padding-large">{{ order.date_added }}</span>
                  </div>
                  <div class="padding-large">
                    <span class="text-x-large text-success text-bold visible-block bottom-padding-large">{{ order.total }}</span>
                    <span class="text-small text-dark visible-block">{{ order.customer }}</span>
                    <span class="text-small text-gray visible-block">{{ order.status }}</span>
                    <span class="text-small text-primary text-decoration-none visible-block top-padding-large">{{ text_more_details }}</span>
                  </div>
                </a>
              </div>
            {% endfor %}
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center no-cards-message hidden">
                <span class="text-medium text-gray">{{ text_no_results }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% if contrlProcVenda %}
        <div class="col-xs-12">
          <div class="content-box vertical-padding-large">
            <div class="row no-space-xs end-xs">
              <a class="text-primary cursor-pointer text-decoration-none js-view-all-btn" href="{{ linkFilterProcessVenda }}">Ver todos</a>
            </div>
          </div>
        </div>
      {% endif %}
    </div>
  {% endif %}