{{ 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 class="text-x-small text-gray text-decoration-none"
                  href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div>
            <a href="{{ insert }}" class="btn-default btn-primary btn-medium">
              <span>{{ button_insert }}</span>
            </a>
          </div>
          {% if success %}
            <div class="text-small text-success background-success padding-medium rounded-x-small full-width top-margin-small">{{ success }}</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div class="row no-space-xs">
    <div class="col-xs-12">
      <div class="content-box">
        <div class="pull-right top-margin-medium 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/customer&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="pull-left bottom-padding-small flex between-xs middle-xs">
          <div class="field field-medium">
          <span class="field-label">Ordenar por:
            <select id="order_list_data_added" class="field-entry" name="sort">
              {% for options in select_order %}
                <option value="{{ options.value }}" {% if options.selected %}selected{% endif %}>
                  {{ options.text }}
                </option>
              {% endfor %}
            </select>
          </span>
          </div>
        </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">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">

              <div class="field-group top-padding-medium">
                <label class="field-label">{{ column_codl }}</label>
                <input class="field-entry field-entry-medium numeric" type="text" name="filter_codl" value="{{ filter_codl }}"/>
              </div>

              <div class="field-group top-margin-medium">
                <label class="field-label">{{ column_codf }}</label>
                <input class="field-entry field-entry-medium numeric" type="text" name="filter_codf" value="{{ filter_codf }}" />
              </div>

              <div class="field-group top-margin-medium">
                <label class="field-label">{{ column_pessoa }}</label>
                <select class="field-entry field-entry-medium" name="filter_pessoa">
                  <option value="*"></option>
                    {% for filter_pessoas in filter_pessoa %}
                      <option
                              value="{{ filter_pessoas.id }}"
                              {{ filter_pessoas.status }}
                      >
                          {{ filter_pessoas.name }}
                      </option>
                    {% endfor %}
                </select>
              </div>

              <div class="field-group top-margin-medium">
                <label class="field-label">{{ column_cpf_cnpj }}</label>
                <input class="field-entry field-entry-medium" type="text" name="filter_cpf_cnpj" value="{{ filter_cpf_cnpj }}" />
              </div>

              <div class="field-group top-margin-medium">
                <label class="field-label">{{ column_name }}</label>
                <input class="field-entry field-entry-medium" type="text" name="filter_name" value="{{ filter_name }}" />
              </div>

              <div class="field-group top-margin-medium">
                <label class="field-label">{{ column_email }}</label>
                <input class="field-entry field-entry-medium" type="text" name="filter_email" value="{{ filter_email }}" />
              </div>

              <div class="field-group top-margin-medium">
                <label class="field-label">{{ column_customer_group }}</label>
                <select class="field-entry field-entry-medium" name="filter_customer_group_id">
                  <option value="*">Todos</option>
                  {% for customer_group in customer_groups %}
                  <option value="{{ customer_group.customer_group_id }}" {{ customer_group.customer_group_id == filter_customer_group_id ? 'selected' : '' }}>{{ customer_group.name }}</option>
                  {% endfor %}
                </select>
              </div>

              <div class="field-group top-margin-medium">
                <label class="field-label">{{ column_date_added }}</label>
                <input class="field-entry field-entry-medium mask-date hasDatePicker" type="text" name="filter_date_added" value="{{ filter_date_added }}" size="12" id="date" />
              </div>

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

              {% if showMarketplaceLinks %}
                <div class="field-group top-margin-medium">
                  <label class="field-label">{{ column_integracao }}</label>
                  <select class="field-entry field-entry-medium" name="filter_integracao">
                    <option value="*"></option>
                    {% for filter_integracao in filter_integracaos %}
                      <option
                        value="{{ filter_integracao.id }}"
                        {{ filter_integracao.status }}
                      >
                        {{ filter_integracao.name }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
              {% endif %}

              {% if showMarketplaceLinks %}
                <div class="field-group top-margin-medium">
                  <label class="field-label">{{ column_marketplace }}</label>
                  <select class="field-entry field-entry-medium" name="filter_marketplace">
                    <option value="*"></option>
                    {% for filter_marketplaces in filter_marketplace %}
                      <option
                        value="{{ filter_marketplaces.id }}"
                        {{ filter_marketplaces.status }}
                      >
                        {{ filter_marketplaces.name }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
              {% endif %}

              <div class="field-group top-margin-medium">
                <label class="field-label">{{ column_uf }}</label>
                <select class="field-entry field-entry-medium" name="filter_uf">
                  <option value="*"></option>
                  {% for key, state in states %}
                    <option value="{{ state.zone_id }}" {{ state.status }}> {{ state.name }} </option>
                  {% endfor %}
                </select>
              </div>

              <div class="field-group top-margin-medium">
                <span class="text-small text-dark text-bold visible-block">{{ column_status }}</span>
                <label class="radio radio-medium radio-inline">
                  <input class="radio-entry" type="radio" name="filter_status" value="*" checked>
                  <span class="radio-text">Ambos</span>
                </label>
                <label class="radio radio-medium radio-inline">
                  <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 radio-inline">
                  <input class="radio-entry" type="radio" name="filter_status" value="0" {{ not (filter_status) is null and not filter_status ? 'checked' : '' }}>
                  <span class="radio-text">{{ text_disabled }}</span>
                </label>
              </div>

              <div class="field-group top-margin-medium">
                <span class="text-small text-dark text-bold visible-block">{{ column_approved }}</span>
                <label class="radio radio-medium radio-inline">
                  <input class="radio-entry" type="radio" name="filter_approved" value="*" checked>
                  <span class="radio-text">Ambos</span>
                </label>
                <label class="radio radio-medium radio-inline">
                  <input class="radio-entry" type="radio" name="filter_approved" value="1" {{ filter_approved ? 'checked' : '' }}>
                  <span class="radio-text">{{ text_yes }}</span>
                </label>
                <label class="radio radio-medium radio-inline">
                  <input class="radio-entry" type="radio" name="filter_approved" value="0" {{ not (filter_approved) is null and not filter_approved ? 'checked' : '' }}>
                  <span class="radio-text">{{ text_no }}</span>
                </label>
              </div>

              {% if filter_email_validation_status == 1 %}
                <div class="field-group top-margin-medium">
                  <span class="text-small text-dark text-bold visible-block">E-Mail Validado</span>
                  <label class="radio radio-medium radio-inline">
                    <input class="radio-entry" type="radio" name="filter_email_validate" value="*" checked>
                    <span class="radio-text">Ambos</span>
                  </label>
                  <label class="radio radio-medium radio-inline">
                    <input class="radio-entry" type="radio" name="filter_email_validate" value="1" {{ filter_email_validate ? 'checked' : '' }}>
                    <span class="radio-text">{{ text_yes }}</span>
                  </label>
                  <label class="radio radio-medium radio-inline">
                    <input class="radio-entry" type="radio" name="filter_email_validate" value="0" {{ not (filter_email_validate) is null and not filter_email_validate ? 'checked' : '' }}>
                    <span class="radio-text">{{ text_no }}</span>
                  </label>
                </div>
              {% endif %}

              <div class="field-group top-margin-medium">
                <span class="text-small text-dark text-bold visible-block">{{ column_limiter }}</span>

                <label class="checkbox">
                  <input class="checkbox-entry" type="checkbox" name="filter_limiter_lock" {{ filter_limiter_lock == 'checked' ? 'checked' : '' }} >
                  <span class="checkbox-text">{{ text_lock }}</span>
                </label>
              </div>

            </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>
      </div>
    </div>
    <div class="col-xs-12">
      <div class="content-box">
        {% if customers %}
          {% for customer in customers %}
            <a href="{{ customer.href }}" class="visible-block text-decoration-none background-white shadow-small hover:shadow-large bottom-margin-small">
              <div class="row no-space-xs middle-xs padding-medium">
                <div class="col-xs-12 col-md-1">
                  <span class="text-small text-dark text-bold visible-block">#{{ customer.customer_id }}</span>
                </div>
                <div class="col-xs-12 col-md">
                  <span class="text-small text-dark visible-block">{{ customer.name }}</span>
                  <div class="text-gray text-ellipsis" style="width:350px;">
                    <span class="text-small text-gray">{{ customer.email }}</span>
                  </div>
                </div>
                <div class="col-xs-4 col-md-2">
                  <span class="text-small text-dark visible-block">{{ customer.date_added }}</span>
                  {% if customer.status == 'Habilitado' %}
                    <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success">{{ customer.status }}</span>
                  {% else %}
                    <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error">{{ customer.status }}</span>
                  {% endif %}
                </div>
                <div class="col-xs-6 col-md-2">
                  <span class="text-small text-dark visible-block">{{ customer.customer_group }}</span>
                  <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block {{ customer.approved == 'Sim' ? 'background-success text-success' : 'background-error text-error' }}">
                    {{ customer.approved == 'Sim' ? 'Aprovado' : 'Não aprovado' }}
                  </span>
                </div>
                <div class="col-xs-4 col-md-2 right-padding-small">
                {% if customer.valided == 0 %}
                    <span class="text-small text-gray">Aguardando validação de E-Mail</span>
                  {% else %}
                    {% if customer.id_futura %}
                      <span class="text-small text-dark vertical-padding-small" data-tooltip="ID Futura Server">#{{ customer.id_futura }}</span>
                      <span class="text-small text-gray">Aguardando Replicação</span>
                    {% endif %}
                  {% endif %}
                </div>

                {% if customer.lock %}
                <div class="col-xs-width-auto">
                  <div class="content-box ">
                      <i style="padding-left: 2.7rem !important; padding-right: 2.7rem !important; " class="btn-error btn-default btn-medium fa-solid fa-user-lock"></i>
                  </div>
                </div>
                {% else %}

                  {% if showECommerceLinks %}
                    <div class="col-xs-width-auto">
                      <div class="content-box ">
                        <button class="btn-default btn-outline btn-medium js-costumer-login"
                        title="{{ column_login }}" data-customer-id="{{ customer.customer_id }}">
                          <span>Acessar</span>
                        </button>
                      </div>
                    </div>
                  {% endif %}
                {% endif %}
              </div>
            </a>
          {% endfor %}
          <div class="row top-margin-medium">
            <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>
    </div>
  </div>
</div>
{{ footer }}
