{{ header }}
<div class="ftr-container ftr-in-space--n">
	<div class="ftr-grid ftr-grid--between ftr-in-space--n ftr-out-space--l">
		<div>
			<span class="ftr-text--s ftr-text--grey">{{ text_points }}</span>
			<span class="ftr-text--s ftr-text--dark ftr-text--bold">{{ 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>
			<i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
		</a>
	</div>
	<hr>
	<div class="ftr-inline-block ftr-in-space--n ftr-out-space--l">
		<span class="ftr-text--s">{{ t_filters }} </span>
		{% if filter_active %}
			<a href="{{ action }}" class="ftr-text--s ftr-text--primary">{{ text_clear }}</a>
		{% endif %}
	</div>
	<div class="ftr-js-filters ftr-in-space--n ftr-out-space--v-l ftr-in-space--l-l">
		<span class="ftr-chip ftr-out-space--r-l ftr-js-swipe-content-display ftr-js-specification">Filtros</span>
		<form id="form-extract" method="get" action="{{ action }}" class="ftr-swipe-content ftr-js-swipe-content js-form-no-submit" style="right: -100vw;">
			<div class="ftr-swipe-content__header ftr-grid">
				<div>
					<i class="material-icons ftr-js-close">&#xE5CD;</i>
					<span class="ftr-text--s ftr-out-space--l-s">Filtros</span>
				</div>
			</div>
			<div class="ftr-swipe-content__main ftr-swipe-content__main--with-btn ftr-in-space--v-n">
				{% for key, operation in Type_LoyaltyOperacao.getRemoveArray([Type_LoyaltyOperacao.Tp_Todos]) %}
					<input class="ftr-check ftr-js-specification__input" id="operacao{{key}}" type="checkbox" name="operacao" value="{{ key }}" {{ ftr_geral.isChecked(key, operacao, Type_LoyaltyOperacao.Tp_Todos) }}>
					<label class="ftr-check-label ftr-block" for="operacao{{key}}">
						<span class="ftr-check-label__text">{{ operation }}</span>
					</label>
				{% endfor %}
				<hr>
				{% for key, range_days in Type_LoyaltyRange.getEnumList() %}
					<input class="ftr-radio ftr-js-specification__input" id="range-{{key}}" type="radio" name="range" value="{{ key }}" {{ ftr_geral.isChecked(key, range, Type_LoyaltyRange.Tp_Quinze) }}>
					<label class="ftr-radio-label ftr-block" for="range-{{key}}">
						<span class="ftr-radio-label__text">{{ range_days }}</span>
					</label>
				{% endfor %}
        <label class="ftr-field {{ (error_datainicial) ? 'error' : '' }}">
          <input type="text" id="datainicial" name="datainicial" class="ftr-field__entry ftr-js-field__entry date-filter mask-date" value="{{ datainicial }}">
          <span class="ftr-field__text">Data Inicio</span>
          {% if error_datainicial %}
            <span class="ftr-field__error">{{ error_datainicial }}</span>
          {% endif %}
        </label>
        <label class="ftr-field {{ (error_datafinal) ? 'error' : '' }}">
          <input type="text" id="datafinal" name="datafinal" class="ftr-field__entry ftr-js-field__entry date-filter mask-date" value="{{ datafinal }}">
          <span class="ftr-field__text">Data Fim</span>
          {% if error_datafinal %}
            <span class="ftr-field__error">{{ error_datafinal }}</span>
          {% endif %}
        </label>
			</div>
			<div class="ftr-swipe-content__btn ftr-js-close">
				<button type="submit" name="Filtrar" class="ftr-btn ftr-h--full ftr-background--primary ftr-js-ripple-effect ftr-js-specification__button">
					Aplicar
				</button>
			</div>
		</form>
	</div>
</div>
<section>
	<div class="ftr-in-space--l">
		<span class="ftr-text--s ftr-text--upper">{{ heading_title }}</span>
	</div>
	{% if extracts %}
		{% for extract in extracts %}
			<div class="ftr-card ftr-in-space--n ftr-in-space--v-xs">
				<div class="ftr-grid ftr-grid--middle ftr-h--full ftr-in-space--v-m ftr-js-ripple-effect">
					<i class="material-icons ftr-in-space--l-l" style="color: {{ extract.operacao == type_operecao.Tp_Credito ? '#5cb85c;' : '#d9534f;' }}">
						{{ extract.operacao == type_operecao.Tp_Credito ? '&#xe5d8;' : '&#xe5db;' }}
					</i>
					<div class="ftr-grid ftr-grid--between ftr-in-space--h-l" style="flex-grow: 1;">
						<div>
							<span class="ftr-block ftr-text--s ftr-text--grey">{{ extract.text_operacao }}</span>
							<span class="ftr-block ftr-text--m ftr-text--dark ftr-text--bold" style="color: {{ extract.operacao == type_operecao.Tp_Credito ? '#5cb85c;' : '#d9534f;' }}">
								{{ extract.saldo }}
								{{ text_pts }}
							</span>
						</div>
						<div>
							<span class="ftr-block ftr-text--s ftr-text--grey">{{ extract.data_emissao is defined ? text_traded : text_expire }}</span>
							<span class="ftr-block ftr-text--m ftr-text--dark ftr-text--bold">{{ extract.data_emissao is defined ? extract.data_emissao : extract.validade }}</span>
						</div>
            {% if extract.indicado %}
              <div class="ftr-h--full ftr-in-space--t-m">
                <div>
                  <span class="ftr-text--s ftr-text--grey">{{ text_indicated }}</span>
                  <span class="ftr-text--s ftr-text--dark ftr-text--bold">{{ extract.name_indicado }}</span>
                  <span class="ftr-text--s ftr-text--grey">{{ text_points_woned }}</span>
                </div>
              </div>
            {% endif %}
						{% if extract.information %}
            <div class="ftr-h--full ftr-in-space--t-m">
							<div>
								<span class="ftr-block ftr-text--s ftr-text--grey">{{ extract.information.pedido_link ? text_order_ecommerce : text_order_server }}</span>
								<span class="ftr-block ftr-text--m ftr-text--dark ftr-text--bold">{{ extract.information.pedido_id }}</span>
							</div>
							{% if pedido_link %}
								<div>
									<a class="btn-default btn-medium btn-outline" href="{{ extract.information.pedido_link }}">
										<span>{{ text_order_detail }}</span>
									</a>
								</div>
							{% endif %}
            </div>
						{% endif %}
					</div>
				</div>
			</div>
		{% endfor %}

		{% if (pagination and paginationajax == false) %}
			<div class="ftr-pagination ftr-width--full">
				{{ pagination }}
			</div>
		{% endif %}

	{% else %}
		<div class="ftr-card ftr-in-space--xl ftr-text--center">
			<i class="material-icons ftr-text--xl ftr-block ftr-text--primary">&#xe8b0;</i>
			<span class="ftr-text--m ftr-in-space--xl">{{text_empty_extract}}</span>
			<a href="{{home}}" class="ftr-btn ftr-inline ftr-background--primary ftr-js-ripple-effect">
				{{text_empty_extract_button}}
			</a>
		</div>
	{% endif %}
</section>
{{ footer }}
