{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
	  <div class="pull-right"><a href="{{ add }}" data-toggle="tooltip" title="{{ button_add }}" class="btn btn-primary"><i class="fa fa-plus"></i></a>
        <button type="button" data-toggle="tooltip" title="{{ button_delete }}" class="btn btn-danger" onclick="confirm('{{ text_confirm }}') ? $('#form-customer').submit() : false;"><i class="fa fa-trash-o"></i></button>
      </div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    {% if success %}
    <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-list"></i> {{ text_list }}</h3>
      </div>
      <div class="panel-body">
        <div class="maxy-backdrop"></div>
	    <div class="messages-body"></div>
        <form action="{{ delete }}" method="post" enctype="multipart/form-data" id="form-customer">
          <div class="table-responsive">
            <table class="table table-bordered table-hover">
              <thead>
                <tr class="table-pagination">
				  <td colspan="9">
					<div class="pull-left">{{ pagination }}</div>
					{% if pagination %}
					  <div class="pull-right pagination-text">{{ results }}</div>
					  {% else %}
					  <div class="pull-right">{{ results }}</div>
					{% endif %}
				  </td>
				</tr>
				<tr>
                  <td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
                  <td class="text-left">{% if sort == 'name' %}<a href="{{ sort_name }}" class="{{ order|lower }}">{{ column_name }}</a>{% else %}<a href="{{ sort_name }}">{{ column_name }}</a>{% endif %}</td>
                  <td class="text-left">{% if sort == 'c.email' %}<a href="{{ sort_email }}" class="{{ order|lower }}">{{ column_email }}</a>{% else %}<a href="{{ sort_email }}">{{ column_email }}</a>{% endif %}</td>
                  <td class="text-left">{% if sort == 'customer_group' %}<a href="{{ sort_customer_group }}" class="{{ order|lower }}">{{ column_customer_group }}</a> {% else %} <a href="{{ sort_customer_group }}">{{ column_customer_group }}</a>{% endif %}</td>
                  <td class="text-center" style="width: 80px;">{% if sort == 'c.status' %}<a href="{{ sort_status }}" class="{{ order|lower }}">{{ column_status }}</a>{% else %}<a href="{{ sort_status }}">{{ column_status }}</a>{% endif %}</td>
				  <td class="text-center" style="width: 80px;">{% if sort == 'c.newsletter' %}<a href="{{ sort_newsletter }}" class="{{ order|lower }}">{{ column_newsletter }}</a>{% else %}<a href="{{ sort_newsletter }}">{{ column_newsletter }}</a>{% endif %}</td>
				  <td class="text-center">{% if sort == 'c.ip' %}<a href="{{ sort_ip }}" class="{{ order|lower }}">{{ column_ip }}</a>{% else %}<a href="{{ sort_ip }}">{{ column_ip }}</a>{% endif %}</td>
                  <td class="text-center" style="width: 140px; min-width: 140px;">{% if sort == 'c.date_added' %}<a href="{{ sort_date_added }}" class="{{ order|lower }}">{{ column_date_added }}</a>{% else %}<a href="{{ sort_date_added }}">{{ column_date_added }}</a>{% endif %}</td>
                  <td class="text-center" style="width: 170px; min-width: 170px;">{{ column_action }}</td>
                </tr>
              </thead>
              <tbody>
                <tr class="table-filter">
				  <td></td>
				  <td class="text-left"><input type="text" name="filter_name" value="{{ filter_name }}" class="form-control" /></td>
				  <td class="text-left"><input type="text" name="filter_email" value="{{ filter_email }}" class="form-control" /></td>
				  <td class="text-center">
				    <select name="filter_customer_group_id" onchange="filter();" class="form-control">
					  <option value="*"></option>
					  {% for customer_group in customer_groups %}
						{% if customer_group.customer_group_id == filter_customer_group_id %}
						  <option value="{{ customer_group.customer_group_id }}" selected="selected">{{ customer_group.name }}</option>
						  {% else %}
						  <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name }}</option>
						{% endif %}
					  {% endfor %}
				    </select>
				  </td>
				  <td class="text-center">
				    <select name="filter_status" onchange="filter();" class="form-control">
					  <option value="*"></option>
					  {% if filter_status == '1' %}
						<option value="1" selected="selected">{{ text_enabled }}</option>
						{% else %}
						<option value="1">{{ text_enabled }}</option>
					  {% endif %}
					  {% if filter_status == '0' %}
						<option value="0" selected="selected">{{ text_disabled }}</option>
						{% else %}
						<option value="0">{{ text_disabled }}</option>
					  {% endif %}
				    </select>
				  </td>
				  <td class="text-center">
				    <select name="filter_newsletter" onchange="filter();" class="form-control">
					  <option value="*"></option>
					  {% if filter_newsletter == '1' %}
						<option value="1" selected="selected">{{ text_yes }}</option>
						{% else %}
						<option value="1">{{ text_yes }}</option>
					  {% endif %}
					  {% if filter_newsletter == '0' %}
						<option value="0" selected="selected">{{ text_no }}</option>
						{% else %}
						<option value="0">{{ text_no }}</option>
					  {% endif %}
					</select>
				  </td>
				  <td class="text-center"><input type="text" name="filter_ip" value="{{ filter_ip }}" class="form-control" /></td>
				  <td class="text-center">
				    <div class="input-group date">
					  <input type="text" name="filter_date_added" value="{{ filter_date_added }}" data-date-format="YYYY-MM-DD" class="form-control" />
					  <span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
				    </div>
				  </td>
				  <td class="text-center"><button type="button" onclick="filter();" class="btn btn-info btn-sm"><i class="fa fa-filter"></i> {{ button_filter }}</button></td>
				</tr>
				{% if customers %}
                  {% for customer in customers %}
					<tr>
					  <td class="text-center">
					    {% if customer.customer_id in selected %}
                          <input type="checkbox" name="selected[]" value="{{ customer.customer_id }}" checked="checked" />
                          {% else %}
                          <input type="checkbox" name="selected[]" value="{{ customer.customer_id }}" />
                        {% endif %}
                      </td>
					  <td class="text-left">
						{% if customer_name %}
						  <a data-toggle="popover-maxy" data-target="#customer-name-{{ customer.customer_id }}" data-placement="right right-top" id="customer-name{{ customer.customer_id }}" class="btn-hover-list">{{ customer.name }}</a>
						  {% else %}
						  {{ customer.name }}
					    {% endif %}
					  </td>
					  <td class="text-left">
						{% if customer_email %}
						  <a data-toggle="popover-maxy" data-target="#customer-email-{{ customer.customer_id }}" data-placement="right right-top" id="customer-email{{ customer.customer_id }}" class="btn-hover-list">{{ customer.email }}</a>
						  {% else %}
						  {{ customer.email }}
					    {% endif %}
					  </td>
					  <td class="text-center">
						{% if customer_edit_group %}
						  <a data-toggle="popover-maxy" data-target="#customer-group-{{ customer.customer_id }}" data-placement="right right-top" id="customer-group{{ customer.customer_id }}" class="btn-hover-list">{{ customer.customer_group }}</a>
						  {% else %}
						  {{ customer.customer_group }}
					    {% endif %}
					  </td>
					  <td class="text-center">
						{% if customer_status %}
						  <a class="ajax-status" id="status-{{ customer.customer_id }}">{{ customer.status }}</a>
						  {% else %}
					      {{ customer.no_status }}
						{% endif %}
					  </td>
					  <td class="text-center">
						{% if customer_newsletter %}
						  <a class="ajax-newsletter" id="newsletter-{{ customer.customer_id }}">{{ customer.newsletter }}</a>
						  {% else %}
					      {{ customer.no_newsletter }}
						{% endif %}
					  </td>
					  <td class="text-center">{{ customer.ip }}</td>
					  <td class="text-center">{{ customer.date_added }}</td>
					  <td class="text-center">
						{% if customer_more %}<a data-toggle="popover-maxy" data-target="#customer-more-{{ customer.customer_id }}" data-placement="left" class="btn btn-warning btn-sm"><i class="fa fa-star-o fa-fw"></i></a>{% endif %}
						<div class="btn-group" data-toggle="tooltip" title="{{ text_login }}">
						  <button type="button" data-toggle="dropdown" class="btn btn-info btn-sm dropdown-toggle"><i class="fa fa-sign-in fa-fw"></i></button>
						  <ul class="dropdown-menu pull-right">
							{% for store in customer.store %}
							  <li><a href="{{ store.href }}" target="_blank">{{ store.name }}</a></li>
							{% endfor %}
						  </ul>
						</div>
						{% if customer.unlock %}
						  <a href="{{ customer.unlock }}" data-toggle="tooltip" title="{{ button_unlock }}" class="btn btn-warning btn-sm"><i class="fa fa-unlock fa-fw"></i></a>
						  {% else %}
						  <button type="button" class="btn btn-warning btn-sm" disabled><i class="fa fa-unlock fa-fw"></i></button>
						{% endif %}
						<a href="{{ customer.edit }}" data-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary btn-sm"><i class="fa fa-pencil fa-fw"></i></a>
					  </td>
					</tr>
                  {% endfor %}
                  {% else %}
                  <tr>
                    <td class="text-center" colspan="9">{{ text_no_results }}</td>
                  </tr>
                {% endif %}
              </tbody>
			  <tfoot>
			    <tr>
                  <td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
                  <td class="text-left">{% if sort == 'name' %}<a href="{{ sort_name }}" class="{{ order|lower }}">{{ column_name }}</a>{% else %}<a href="{{ sort_name }}">{{ column_name }}</a>{% endif %}</td>
                  <td class="text-left">{% if sort == 'c.email' %}<a href="{{ sort_email }}" class="{{ order|lower }}">{{ column_email }}</a>{% else %}<a href="{{ sort_email }}">{{ column_email }}</a>{% endif %}</td>
                  <td class="text-left">{% if sort == 'customer_group' %}<a href="{{ sort_customer_group }}" class="{{ order|lower }}">{{ column_customer_group }}</a> {% else %} <a href="{{ sort_customer_group }}">{{ column_customer_group }}</a>{% endif %}</td>
                  <td class="text-center">{% if sort == 'c.status' %}<a href="{{ sort_status }}" class="{{ order|lower }}">{{ column_status }}</a>{% else %}<a href="{{ sort_status }}">{{ column_status }}</a>{% endif %}</td>
				  <td class="text-center">{% if sort == 'c.newsletter' %}<a href="{{ sort_newsletter }}" class="{{ order|lower }}">{{ column_newsletter }}</a>{% else %}<a href="{{ sort_newsletter }}">{{ column_newsletter }}</a>{% endif %}</td>
				  <td class="text-center">{% if sort == 'c.ip' %}<a href="{{ sort_ip }}" class="{{ order|lower }}">{{ column_ip }}</a>{% else %}<a href="{{ sort_ip }}">{{ column_ip }}</a>{% endif %}</td>
                  <td class="text-center">{% if sort == 'c.date_added' %}<a href="{{ sort_date_added }}" class="{{ order|lower }}">{{ column_date_added }}</a>{% else %}<a href="{{ sort_date_added }}">{{ column_date_added }}</a>{% endif %}</td>
                  <td class="text-center">{{ column_action }}</td>
                </tr>
				<tr class="table-pagination">
				  <td colspan="9">
					<div class="pull-left">{{ pagination }}</div>
					{% if pagination %}
					  <div class="pull-right pagination-text">{{ results }}</div>
					  {% else %}
					  <div class="pull-right">{{ results }}</div>
					{% endif %}
				  </td>
				</tr>
			  </tfoot>
            </table>
          </div>
        </form>
      </div>
    </div>
  </div>
  <input type="hidden" name="permission" value="{{ permission }}" id="customer-permission" />
  <input type="hidden" name="error_permission" value="{{ error_permission }}" id="customer-error-permission" />
  {% if customers %}
    {% for customer in customers %}
	  {% if customer_name %}
		<div id="customer-name-{{ customer.customer_id }}" class="popover popover-lg popover-primary animate littleFadeInRight">
		  <div class="arrow"></div><h3 class="popover-title">{{ entry_name }}
		  <a id="close-name-{{ customer.customer_id }}" data-dismiss="popover-maxy" class="btn btn-default btn-xs"><i class="fa fa-close"></i></a></h3>
		  <div class="popover-content">
			<div class="row">
			  <div class="form-group">
				<div class="col-sm-6">
				  <label class="control-label" for="input-firstname{{ customer.customer_id }}">{{ entry_firstname }}</label>
				  <input type="text" name="firstname" value="{{ customer.firstname }}" placeholder="{{ entry_firstname }}" id="input-firstname{{ customer.customer_id }}" class="form-control" />
				</div>
				<div class="col-sm-6">
				  <label class="control-label" for="input-lastname{{ customer.customer_id }}">{{ entry_lastname }}</label>
				  <input type="text" name="lastname" value="{{ customer.lastname }}" placeholder="{{ entry_lastname }}" id="input-lastname{{ customer.customer_id }}" class="form-control" />
				</div>
			  </div>
			</div>
		  </div>
		  <div class="popover-footer">
			<a onclick="editName('{{ customer.customer_id }}');" class="btn btn-primary btn-sm"><i class="fa fa-save fa-fw"></i></a><a onclick="nameClear('{{ customer.customer_id }}');" class="btn btn-danger btn-sm"><i class="fa fa-eraser fa-fw"></i></a>
		  </div>
		</div>
	  {% endif %}
	  {% if customer_email %}
		<div id="customer-email-{{ customer.customer_id }}" class="popover popover-sm popover-primary animate littleFadeInRight">
		  <div class="arrow"></div><h3 class="popover-title">{{ entry_email }}
		  <a id="close-email-{{ customer.customer_id }}" data-dismiss="popover-maxy" class="btn btn-default btn-xs"><i class="fa fa-close"></i></a></h3>
		  <div class="popover-content">
			<input type="email" name="email" value="{{ customer.email }}" placeholder="{{ entry_email }}" id="input-email{{ customer.customer_id }}" class="form-control" />
		  </div>
		  <div class="popover-footer">
			<a onclick="editEmail('{{ customer.customer_id }}');" class="btn btn-primary btn-sm"><i class="fa fa-save fa-fw"></i></a><a onclick="emailClear('{{ customer.customer_id }}');" class="btn btn-danger btn-sm"><i class="fa fa-eraser fa-fw"></i></a>
		  </div>
		</div>
	  {% endif %}
	  {% if customer_edit_group %}
		<div id="customer-group-{{ customer.customer_id }}" class="popover popover-sm popover-primary animate littleFadeInRight">
		  <div class="arrow"></div><h3 class="popover-title">{{ entry_customer_group }}
		  <a id="close-group-{{ customer.customer_id }}" data-dismiss="popover-maxy" class="btn btn-default btn-xs"><i class="fa fa-close"></i></a></h3>
		  <div class="popover-content">
			<select name="customer_group_id" id="input-customer-group-{{ customer.customer_id }}" class="form-control">
			  {% for customer_group in customer_groups %}
				{% if customer_group.customer_group_id == customer.customer_group_id %}
				  <option value="{{ customer_group.customer_group_id }}" selected="selected">{{ customer_group.name }}</option>
				  {% else %}
				  <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name }}</option>
				{% endif %}
			  {% endfor %}
			</select>
		  </div>
		  <div class="popover-footer">
			<a onclick="editCustomerGroup('{{ customer.customer_id }}');" class="btn btn-primary btn-sm"><i class="fa fa-save fa-fw"></i></a>
		  </div>
		</div>
	  {% endif %}
	  {% if customer_more %}
		<div id="customer-more-{{ customer.customer_id }}" class="popover popover-xxl popover-primary popover-more animate littleFadeInLeft">
		  <div class="arrow"></div>
		  <div class="popover-content">
			{% if customer_telephone %}<a onclick="editMore('{{ customer.customer_id }}', 'telephone');" class="btn btn-primary btn-sm" data-toggle="tooltip" title="{{ text_telephone }}"><i class="fa fa-phone fa-fw"></i></a>{% endif %}
			{% if customer_password %}<a onclick="editMore('{{ customer.customer_id }}', 'password');" class="btn btn-primary btn-sm" data-toggle="tooltip" title="{{ entry_password }}"><i class="fa fa-key fa-fw"></i></a>{% endif %}
			{% if customer_field %}<a onclick="editMore('{{ customer.customer_id }}', 'custom_field');" class="btn btn-primary btn-sm" data-toggle="tooltip" title="{{ text_custom_field }}"><i class="fa fa-list-ul fa-fw"></i></a>{% endif %}
			{% if customer_address %}<a onclick="editMore('{{ customer.customer_id }}', 'address');" class="btn btn-primary btn-sm" data-toggle="tooltip" title="{{ tab_address }}"><i class="fa fa-home fa-fw"></i></a>{% endif %}
			{% if customer_affiliate %}<a onclick="editMore('{{ customer.customer_id }}', 'affiliate');" class="btn btn-primary btn-sm" data-toggle="tooltip" title="{{ tab_affiliate }}"><i class="fa fa-users fa-fw"></i></a>{% endif %}
			{% if customer_history %}<a onclick="editMore('{{ customer.customer_id }}', 'history');" class="btn btn-primary btn-sm" data-toggle="tooltip" title="{{ tab_history }}"><i class="fa fa-book fa-fw"></i></a>{% endif %}
			{% if customer_transaction %}<a onclick="editMore('{{ customer.customer_id }}', 'transaction');" class="btn btn-primary btn-sm" data-toggle="tooltip" title="{{ tab_transaction }}"><i class="fa fa-rouble fa-fw"></i></a>{% endif %}
			{% if customer_reward %}<a onclick="editMore('{{ customer.customer_id }}', 'reward');" class="btn btn-primary btn-sm" data-toggle="tooltip" title="{{ tab_reward }}"><i class="fa fa-star fa-fw"></i></a>{% endif %}
		  </div>
		</div>
	  {% endif %}
	{% endfor %}
  {% endif %}
  <div id="modal-customer-edit" class="modal fade">
    <div class="modal-dialog modal-lg animated zoomIn">
      <div class="modal-content">
	    <div id="modal-customer-content"></div>
	  </div>
    </div>
  </div>
  <script type="text/javascript"><!--
$('.date').datetimepicker({
	language: '{{ datepicker }}',
    pickTime: false
});
//--></script></div>
{{ footer }}