{{ header }}
<header class="background-white bottom-margin-large" data-info='{"mercadolivre_status": {{ mercadolivre_status }} }'>
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs js-header-notifications">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
                <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
                <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          {% if mkt_sinc_order and showMarketplaceLinks %}
            <div>
              <span class="js-order-mkt text-warning visible-inline-block cursor-pointer">{{ mkt_sinc_order }}</span>
              <i class="js-refresh fas fa-sync-alt hidden"></i>
            </div>
          {% endif %}
          {% if error_warning %}<div class="warning full-width">{{ error_warning }}</div>{% endif %}
          {% if success %}<div class="success full-width">{{ success }}</div>{% endif %}
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="content-box flex end-xs middle-xs">
        {% if filter_count >= 1 %}
          <a class="text-small text-primary text-decoration-none horizontal-padding-large" href="index.php?route=sale/order&token={{ token }}">
            {{ text_cleaning_filters }} ({{ filter_count }})
          </a>
        {% endif %}
        <button type="button" class="btn-default btn-medium-square btn-primary js-suspended-side-control" id="suspended-side-filter">
          <i class="fas fa-filter"></i>
          <span>{{ button_filter }}</span>
        </button>
      </div>
    </div>
  </div>
  {% if orders %}
    <div class="row">
      <div class="col-xs-12">
        {% for order in orders %}
          <div
               class="content-box background-white shadow-small hover:shadow-large bottom-margin-small
               {% if order.erro_pedido.status %}
                  border-error
               {% elseif order.warning_order.status%}
                  border-warning
               {% endif %}"
          >
            <a href="{{ order.href }}" class="visible-block text-decoration-none">
              <div class="row no-space-xs middle-xs top-padding-medium horizontal-padding-medium">
                <div class="col-xs-12 col-md-1">
                  <div class="content-box bottom-padding-medium flex between-xs">
                    <span class="text-small text-dark text-bold visible-block full-width">#{{ order.order_id }}</span>
                    <span class="text-small text-gray">{{ order.date_added }}</span>
                  </div>
                </div>
                <div class="col-xs-12 col-md-3">
                  <div class="content-box bottom-padding-medium">
                    <span class="text-small text-dark visible-block">{{ order.customer }}</span>
                    {% if order.listapresente_status and order.order_id in pedidos_de_lista %}
                      <span class="text-small text-gray">{{ text_order_made_gift_list }}</span>
                    {% endif %}
                  </div>
                </div>
                <div class="col-xs-12 col-md-2">
                  <div class="content-box bottom-padding-medium">
                    {% if order.type_status == constant('Type_OrderStatus::Tp_Positiva') %}
                      <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success">{{ order.status }}</span>
                      <span class="text-small text-gray visible-block">{{ order.date_modified }}</span>
                    {% elseif order.type_status == constant('Type_OrderStatus::Tp_Negativa') %}
                      <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error">{{ order.status }}</span>
                      <span class="text-small text-gray visible-block">{{ order.date_modified }}</span>
                    {% else %}
                      <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-gray text-gray">{{ order.status }}</span>
                      <span class="text-small text-gray visible-block">{{ order.date_modified }}</span>
                    {% endif %}
                  </div>
                </div>
                <div class="col-xs-4 col-md-1">
                  <div class="content-box bottom-padding-medium">
                    <span class="text-small text-dark visible-block">{{ order.total }}</span>
                  </div>
                </div>
                <div class="col-xs-4 col-md-1">
                  <div class="content-box bottom-padding-medium">
                    <span class="text-small text-dark">{{ order.totalItens }} {{ order.totalItens == 1 ? text_item : text_items }}</span>
                  </div>
                </div>
                <div class="col-xs">
                  <div class="content-box bottom-padding-medium">
                    <span class="text-small text-dark visible-block">{{ order.payment_method }}</span>
                    {% if order.shipping_method %}
                      <span class="text-small text-gray">{{ order.shipping_method }}</span>
                    {% endif %}
                  </div>
                </div>
                <div class="col-xs-width-auto">
                  <div class="content-box bottom-padding-medium">
                    <img src="{{ order.img }}" alt="">
                  </div>
                </div>
              </div>
            </a>

            {% if  order.erro_pedido.status %}
              <div class="background-error vertical-padding-small horizontal-padding-medium top-border-error">
                <span class="text-small text-error">{{ order.erro_pedido.message }}</span>
              </div>
            {% elseif order.warning_order.status %}
              <div class="background-warning vertical-padding-small horizontal-padding-medium top-border-warning">
                <span class="text-small text-warning">{{ order.warning_order.message }}</span>
                <a href="{{ order.warning_order.url }}">{{ text_click_here }}</a>
              </div>
            {% endif %}


          </div>
        {% endfor %}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box">
          {{ pagination }}
        </div>
      </div>
    </div>
  {% else %}
    <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">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>
    </div>
  {% endif %}
</div>

<form class="js-filter">
  <div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-filter">
    <div class="horizontal-padding-large top-padding-large bottom-padding-small flex between-xs middle-xs js-suspended-side-close">
      <span class="text-x-large text-dark">{{ text_filters }}</span>
      <i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
    </div>
    <div class="adm-suspended-side-content js-filter-accordion">
      <div class="top-padding-medium right-padding-large bottom-padding-small left-margin-large bottom-border-gray cursor-pointer adm-filter-accordion-control js-accordion-control">
        <span class="text-small text-dark text-uppercase">{{ text_general }}</span>
        <i class="fas fa-angle-down text-medium padding-small"></i>
      </div>
      <div class="padding-large js-accordion-content">
        <div class="field-group">
          <label class="field-label" for="filter_order_id">{{ column_order_id }}</label>
          <input class="field-entry field-entry-medium mask-number" type="text" id="filter_order_id" name="filter_order_id" value="{{ filter_order_id }}" />
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_customer">{{ column_customer }}</label>
          <input class="field-entry field-entry-medium" type="text" id="filter_customer" name="filter_customer" value="{{ filter_customer }}" />
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_order_payment_method">{{ column_payment }}</label>
          <select class="field-entry field-entry-medium" id="filter_order_payment_method" name="filter_order_payment_method">
            <option value="*">{{ text_all }}</option>
            {% for payment_method in payment_methods %}
              <option value="{{ payment_method.code }}" {{ payment_method.status }} >{{ payment_method.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_order_shipping_method">{{ column_shipping }}</label>
          <select class="field-entry field-entry-medium" id="filter_order_shipping_method" name="filter_order_shipping_method">
            <option value="*">{{ text_all }}</option>
              {% for shipping_method in shipping_methods %}
                <option value="{{ shipping_method.code }}" {{ shipping_method.status }}>{{ shipping_method.name }}</option>
              {% endfor %}
          </select>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_order_status_id">{{ column_status }}</label>
          <select class="field-entry field-entry-medium" id="filter_order_status_id" name="filter_order_status_id">
            <option value="*">{{ text_all }}</option>
            <option value="0" {% if filter_order_status_id == '0' %} selected {% endif %}>{{ text_missing }}</option>
            {% for order_status in order_statuses %}
              <option value="{{ order_status.order_status_id }}" {{ order_status.status }}>{{ order_status.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_total">{{ column_total }}</label>
          <div class="field-entry-group">
            <select class="field-entry field-entry-medium" name="filter_content_total">
              {% for key, value in content_total %}
                <option value="{{ value.id }}" {{ value.status }} >{{ value.name }}</option>
              {% endfor %}
            </select>
            <input class="field-entry field-entry-medium mask-money2" type="text" id="filter_total" name="filter_total" value="{{ filter_total }}"/>
          </div>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_subtotal">{{ column_subtotal }}</label>
          <div class="field-entry-group">
            <select class="field-entry field-entry-medium" name="filter_content_subtotal">
              {% for key, value in content_subtotal %}
                <option value="{{ value.id }}" {{ value.status }} >{{ value.name }}</option>
              {% endfor %}
            </select>
            <input class="field-entry field-entry-medium mask-money2" type="text" id="filter_subtotal" name="filter_subtotal" value="{{ filter_subtotal }}" size="4"/>
          </div>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_date_added">{{ column_date_added }}</label>
          <input class="field-entry field-entry-medium date" type="text" id="filter_date_added" name="filter_date_added" value="{{ filter_date_added }}" />
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_date_modified">{{ column_date_modified }}</label>
          <input class="field-entry field-entry-medium date" type="text" id="filter_date_modified" name="filter_date_modified" value="{{ filter_date_modified }}" />
        </div>

        {% if showECommerceLinks %}
          <div class="field-group top-margin-medium">
            <label class="field-label" for="filter_order_payment_method">{{ text_origem_pedido }}</label>
            <select class="field-entry field-entry-medium" id="filter_origem_pedido" name="filter_origem_pedido">
              <option value="*"></option>
              {% for type_origem_sistema in type_origem_sistema %}
                <option value="{{ type_origem_sistema.id }}" {{ type_origem_sistema.status }} >{{ type_origem_sistema.name }}</option>
              {% endfor %}
            </select>
          </div>
        {% endif %}

        {% if listapresente_status %}
          <div class="field-group top-margin-medium">
            <span class="text-small text-dark text-bold visible-block">{{ text_gift_list }}</span>
            <label class="radio radio-medium radio-inline">
              <input class="radio-entry" type="radio" name="filter_lp" value="*" {% if filter_lp is defined %} checked {% endif %}>
              <span class="radio-text">{{ text_both }}</span>
            </label>
            {% for key, value in dsimdnao_filter_lp %}
              <label class="radio radio-medium radio-inline">
                <input class="radio-entry" type="radio" name="filter_lp" value="{{ value.id }}" {{ value.status }}>
                <span class="radio-text">{{ value.name }}</span>
              </label>
            {% endfor %}
          </div>
        {% endif %}
      </div>
      {% if showMarketplaceLinks %}
        <div class="top-padding-medium right-padding-large bottom-padding-small left-margin-large bottom-border-gray cursor-pointer adm-filter-accordion-control js-accordion-control">
          <span class="text-small text-dark text-uppercase">{{ text_marketplace }}</span>
          <i class="fas fa-angle-down text-medium padding-small"></i>
        </div>
        <div class="padding-large js-accordion-content">
          <div class="field-group">
            <label class="field-label" for="filter_date_added">{{ text_mkt_order_id }}</label>
            <input class="field-entry field-entry-medium" type="text" name="filter_mkt_order_id" value="{{ filter_mkt_order_id }}" />
          </div>
          <div class="field-group top-margin-medium">
            <label class="field-label" for="filter_order_payment_method">{{ text_integracao }}</label>
            <select class="field-entry field-entry-medium" id="filter_integracao" name="filter_integracao">
              <option value="*"></option>
              {% for type_integracao in type_integracao %}
                <option value="{{ type_integracao.id }}" {{ type_integracao.status }} >{{ type_integracao.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field-group top-margin-medium">
            <label class="field-label" for="filter_order_payment_method">{{ text_marketplace }}</label>
            <select class="field-entry field-entry-medium" id="filter_marketplace" name="filter_marketplace">
              <option value="*"></option>
              {% for type_marketplace in type_marketplace %}
                <option value="{{ type_marketplace.id }}" {{ type_marketplace.status }} >{{ type_marketplace.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      {% endif %}
    </div>
    <div class="padding-large">
      <button type="submit" class="btn-default btn-medium btn-full btn-primary">
        <span>{{ button_filter }}</span>
      </button>
    </div>
  </div>
</form>

{{ footer }}
