{{ header }}
<section class="container-fluid">
  {{ breadcrumbs }}
  <div class="row">
    <div class="col-xs-12 col-md-3">
      <div class="content-box js-fixed-on-top-content-left">
        {{ account }}
      </div>
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs bottom-padding-large">
          <a href="{{ back }}" class="padding-small text-x-large text-dark">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">{{ heading_title }}</span>
        </div>
        <div class="row">
          <div class="col-xs-12 col-md-8">
            {% if extracts %}
              {% for extract in extracts %}
                <div class="border-gray 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="text-small text-gray">{{ extract.text_operacao }}</span>
                        <span class="text-medium visible-block text-bold" style="color: {{ extract.operacao == type_operecao.Tp_Credito ? '#5cb85c;' : '#d9534f;' }}">
                          <i class="fas fa-arrow-{{ extract.operacao == type_operecao.Tp_Credito ? 'up' : 'down' }}"></i>{{ extract.saldo }} {{ text_pts }}
                        </span>
                      </div>
                    </div>
                    <div class="col-xs-6">
                      <div class="content-box top-padding-large right-padding-large">
                        <span class="text-small text-gray visible-block">{{ extract.data_emissao is defined ? text_traded : text_expire }}</span>
                        <span class="text-medium text-dark text-bold visible-block">{{ extract.data_emissao is defined ? extract.data_emissao : extract.validade }}</span>
                      </div>
                    </div>
                    {% if extract.indicado %}
                      <div class="col-xs-12 col-md-12">
                        <div class="content-box top-padding-large right-padding-large">
                          <span class="text-small text-gray">{{ text_indicated }}</span>
                          <span class="text-small text-dark text-bold">{{ extract.name_indicado }}</span>
                          <span class="text-small text-gray">{{ text_points_woned }}</span>
                        </div>
                      </div>
                    {% endif %}
                    {% if extract.information %}
                      <div class="col-xs-12 col-md-12">
                        <div class="content-box top-padding-large right-padding-large">
                          <span class="text-small text-gray visible-block">{{ extract.information.pedido_link ? text_order_ecommerce : text_order_server }}</span>
                          <span class="text-medium text-dark text-bold visible-block">{{ extract.information.pedido_id }}</span>
                        </div>
                      </div>
                      {% if extract.information.pedido_link %}
                        <div class="col-xs-12 col-md-6">
                          <div class="content-box top-padding-large right-padding-large">
                            <a class="btn-default btn-medium btn-outline" href="{{ extract.information.pedido_link }}">
                              <span>{{ text_order_detail }}</span>
                            </a>
                          </div>
                        </div>
                      {% endif %}
                    {% endif %}
                  </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_extract}}</span>
                <a href="{{home}}" class="btn-default btn-medium top-margin-medium bottom-margin-x-large">
                  <span>{{text_empty_extract_button}}</span>
                </a>
              </div>
            {% endif %}
          </div>

          <div class="col-xs-12 col-md-4">
            <div class="js-fixed-on-top-content-right">
              <div class="paper padding-large bottom-margin-medium">
                <div class="flex between-xs">
                  <span class="text-gray text-small">{{ text_points }}</span>
                  <span class="text-dark text-bold text-medium">{{ customer_total_points }}</span>
                </div>
                <a href="{{ url_resgatar_pontos }}" class="btn-default btn-large btn-full dark top-margin-medium">
                  <span>{{ text_trade_points }}</span>
                </a>
              </div>
              <div class="paper padding-large bottom-margin-medium">
                <form id="FormExtract" method="get" action="{{ action }}">
                  {% for key, operation in Type_LoyaltyOperacao.getRemoveArray([Type_LoyaltyOperacao.Tp_Todos]) %}
                    <label class="checkbox checkbox-medium">
                      <input class="checkbox-entry" type="checkbox" name="operacao" value="{{ key }}" {{ ftr_geral.isChecked(key, operacao, Type_LoyaltyOperacao.Tp_Todos) }}>
                      <span class="checkbox-text">{{ operation }}</span>
                    </label>
                  {% endfor %}
                  {% for key, range_days in Type_LoyaltyRange.getEnumList() %}
                    <label class="radio radio-medium">
                      <input class="radio-entry js-range" type="radio" name="range" value="{{ key }}" {{ ftr_geral.isChecked(key, range, Type_LoyaltyRange.Tp_Quinze) }}>
                      <span class="radio-text">{{ range_days }}</span>
                    </label>
                  {% endfor %}
                  <label class="field field-medium vertical-padding-x-small">
                    <div class="field-entry-group">
                      <div class="flex-grow-1">
                        <input class="field-entry mask-date date-filter" type="text" name="datainicial" value="{{ datainicial }}" placeholder="Data Inicio">
                      </div>
                      <div class="flex-grow-1">
                        <input class="field-entry mask-date date-filter" type="text" name="datafinal" value="{{ datafinal }}" placeholder="Data Fim">
                      </div>
                    </div>
                  </label>
                  <div class="top-margin-medium">
                    <button class="btn-default btn-full btn-medium" type="submit">
                      <span>Filtrar</span>
                    </button>
                  </div>
                </form>
              </div>
              <div class="link-default text-medium visible-block text-center padding-small vertical-padding-medium">
                <a class="text-small text-center" href="{{ action }}">{{ text_clear }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{{ footer }}