{{ header }}
	<header class="background-white bottom-margin-large">
		<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">
						<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>
						<div class="flex flex-row middle-xs">
							<button type="button" class="btn-default btn-outline btn-medium right-margin-small js-submit-main-form">
								<span>{{ button_delete }}</span>
							</button>
							<a href="{{ insert }}" class="btn-primary btn-default btn-medium">
								<span>{{ button_insert }}</span>
							</a>
						</div>
						{% if error_warning %}
							<div class="text-small text-error background-error padding-medium rounded-x-small full-width">{{ error_warning }}</div>
						{% endif %}
						{% if success %}
							<div class="text-small text-success background-success padding-medium rounded-x-small full-width">{{ success }}</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</header>
	<div class="container-fluid">
		<div id="root">
			<base-manual class="top-margin-medium" title="Sobre o Módulo:">
				<div><h2 class="text-small">Cupons</h2><br>
					<p class="text-small">
					Este módulo tem como objetivo permitir a configuração de "descontos" para compras feitas pelos clientes,
					utilizando códigos promocionais. Ao inserir o código promocional fornecido pelo administrador da loja,
					o cliente receberá automaticamente o desconto correspondente em sua compra.
					</p>
				</div>
			</base-manual>
		</div>
		<div class="row no-space-xs">
			<div class="col-xs-12">
				<div class="pull-right bottom-padding-small flex between-xs middle-xs">
					{% if filter_count >= 1 %}
						<a class="text-small text-primary text-decoration-none horizontal-padding-large vertical-padding-small" href="index.php?route=sale/coupon&token={{ token }}">
							<span>Limpar Filtros ({{ filter_count }})</span>
						</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>Filtrar</span>
					</button>
				</div>
				<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">Filtros</span>
						<i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
					</div>
					<div class="adm-suspended-side-content horizontal-padding-large">
						<label class="field field-medium top-margin-medium">
							<span class="field-label">{{ column_name }}</span>
							<input class="field-entry ui-autocomplete-input" type="text" name="filter_name" id="filter_name" value="{{ filter_name }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
						</label>
						<label class="field field-medium top-margin-large">
							<span class="field-label">{{ column_code }}</span>
							<input class="field-entry ui-autocomplete-input" type="text" name="filter_code" id="filter_code" value="{{ filter_code }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
						</label>
						<span class="visible-block top-margin-large text-small text-dark text-bold">{{ column_status }}</span>
						<label class="radio radio-medium">
							<input class="radio-entry" type="radio" name="filter_status" value="*" checked>
							<span class="radio-text">Ambos</span>
						</label>
						<label class="radio radio-medium">
							<input class="radio-entry" type="radio" name="filter_status" value="1" {{ filter_status ? 'checked' : '' }}>
							<span class="radio-text">{{ text_enabled }}</span>
						</label>
						<label class="radio radio-medium">
							<input class="radio-entry" type="radio" name="filter_status" value="0" {{filter_status is not null and not filter_status ? 'checked' : '' }}>
							<span class="radio-text">{{ text_disabled }}</span>
						</label>
						<label class="checkbox checkbox-medium top-margin-large">
							<input class="checkbox-entry" type="checkbox" name="filter_valido" value="0" {{ filter_valido ? 'checked' : '' }}>
							<span class="checkbox-text">{{ column_validate }}</span>
						</label>
					</div>
					<div class="padding-large">
						<a id="js-btn-filter" class="btn-default btn-medium btn-full btn-primary">
							<span>{{ button_filter }}</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<form action="{{ delete }}" method="post" class="js-main-form">
			<div class="row">
				<div class="col-xs-12">
					{% if coupons %}
						{% for coupon in coupons %}
							<div class="content-box flex middle-xs background-white top-padding-medium horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-small">
								<div class="right-margin-medium bottom-margin-medium">
									<label class="checkbox">
										<input class="checkbox-entry" type="checkbox" name="selected[]" value="{{ coupon.coupon_id }}" {% if coupon.selected %} checked {% endif %}>
										<span class="checkbox-text"></span>
									</label>
								</div>
								<a href="{{ coupon.href }}" class="text-decoration-none" style="width:calc(100% - 65px);">
									<div class="row nowrap-md no-space-xs middle-xs">
										<div class="col-xs-12 col-md-3">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark visible-block">{{ coupon.name }}</span>
												<span class="{{ coupon.status == 'Habilitado' ? 'text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success' : 'text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error' }}">{{ coupon.status }}</span>
											</div>
										</div>
										<div class="col-xs-12 col-md-3">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark" data-tooltip="Código">{{ coupon.code }}</span>
											</div>
										</div>
										<div class="col-xs-6 col-md-2">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark" data-tooltip="Desconto">{{ coupon.discount }}</span>
											</div>
										</div>
										<div class="col-xs-6 col-md-2">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark">{{ coupon.date_start }}</span>
											</div>
										</div>
										<div class="col-xs-6 col-md-2">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark">{{ coupon.date_end }}</span>
											</div>
										</div>
									</div>
								</a>
							</div>
						{% endfor %}
					{% else %}
						<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>
					{% endif %}
				</div>
			</div>
		</form>
		<div class="row top-margin-medium">
			<div class="col-xs-12">
				<div class="content-box">
					{{ pagination }}
				</div>
			</div>
		</div>
	</div>

<script>
	const DATA = {{ data|json_encode() }};
</script>

{{ footer }}
