{% load i18n l10n swstags %}

{% get_current_language as LANGUAGE_CODE %}

{% if vertical == 'true' %} 
{# 	<h2><span>{% trans 'Filters' %}</span></h2>	 #}
 {% endif %}
<div id="{{view_name}}_div_filters_container">
	<form id="{{view_name}}_filters_form" method="GET" action=""> {% csrf_token %}
			<div id="{{view_name}}_div_date_input" class="tag_date_filters">
				<!-- Create the  date filters -->
				{% for key, value in filters.items %}
					{% if value.date_range %}
						<p class="p_label_input_filter">
							<label class="label_filter" id="{{view_name}}_label_calldate" for="{{view_name}}_datepicker_from_calldate">{% trans "From" %}</label>
							<input class="input_filter" type="text" id="{{view_name}}_datepicker_from_calldate" name="from_{{key}}" value='{{value.values.0|unlocalize}}'/>
							{% if vertical == 'true' %} <p class="clear-fix"> </p> {% endif %}
							<label class="label_filter" id="{{view_name}}_label_calldate" for="{{view_name}}_datepicker_to_calldate">{% trans "To" %}</label>
							<input class="input_filter" type="text" id="{{view_name}}_datepicker_to_calldate" name="to_{{key}}" value='{{value.values.1|unlocalize}}'/>
						</p>
					{% endif %}
				{% endfor %}
				<!-- <p class="clear-fix"></p> -->
			</div>

			{% if shortcuts != 'False' %}
				{% tag_shortcuts view_name shortcuts shortcuts_select %}
			{% endif %}

			<p class="clear-fix"></p>
			
			<div id="{{view_name}}_div_select_filters" class="tag_select_filters">
				<div id="{{view_name}}_div_select_filters_content" class="tag_select_filters_div">
					<!-- Create the filters -->
					{% for key, value in filters.items %}
						{% if not value.date_range%}
							{% if value.date_picker %}
								<p class="p_label_input_filter">
									<label class="label_filter" id="{{view_name}}_label_calldate" for="{{view_name}}_datepicker_from_calldate">{% trans "Date" %}</label>
									<input class="input_filter" type="text" id="{{view_name}}_datepicker_from_calldate" name="from_{{key}}" value='{{value.values.0|unlocalize}}'/>
								</p>
							{% else %}
								<p class="p_label_input_filter">
								<label class="label_filter" for="{{key}}" id="{{view_name}}_label_{{key}}" >{{value.label}} </label> 
								<select class="select_filter" id="{{view_name}}_filter_{{key}}" name="{{key}}">
									<option value='None'>-----</option>            
									{% for m in value.values %}
										<option value ='{{m.0|unlocalize}}'> {{m.1|unlocalize}} </option>
									{% endfor %}
								</select>
								</p>
							{% endif %}
						{% endif %}
						
						<script type="text/javascript">
							$("#{{view_name}}_filter_{{key}}").select2();
						</script>
					{% endfor %}

					<p id="{{view_name}}_p_search_clear_btn" class="p_label_input_filter">
						<label class="label_filter_btn">&nbsp;</label>
						<input type="button"  id="{{view_name}}_filter_search_btn" value="{% trans 'Update' %}">
						<input type="button"  id="{{view_name}}_filter_clear_btn" value="{% trans 'Clear' %} ">
					</p>
				</div><!-- / -->
				
				<p class="clear-fix"></p>


			</div><!-- / -->

			<p class="clear-fix"></p>
	</form>
	<p class="clear-fix"></p>
</div><!-- /Filters -->
<p class="clear-fix"></p>

<script type="text/javascript" lang="text/javascript">
	
	// Selects to selects2
	// $("select[id^='{{view_name}}_filter']").select2();

	$("#{{view_name}}_datepicker_from_calldate").click(function(){
		$("#{{view_name}}_datepicker_from_calldate").addClass('ui-state-active');	
		$("#{{view_name}}_datepicker_to_calldate").addClass('ui-state-active');	
		$("#{{view_name}}_div_shortcuts_radio label").removeClass('ui-state-active');
	});


	// val = $('#{{view_name}}_datepicker_from_calldate').val()
	if($('#{{view_name}}_datepicker_from_calldate').length > 0)
		if($('#{{view_name}}_datepicker_from_calldate').val().length>14)
		{	
			datetimePickerFromTo('{{view_name}}');
		}
		else
		{	
			datePickerFromTo('{{view_name}}');
		}	

	$('#{{view_name}}_p_search_clear_btn input').button();

	$('#{{view_name}}_div_select_filters select').change(function(){
		{{view_name}}_callback('filters');
	});

	$('#{{view_name}}_filter_search_btn').click(function(){
		{{view_name}}_callback('filters');
	});

	$('#{{view_name}}_filter_clear_btn').click(function(){
		{{view_name}}_callback('b_clear');
	});

</script>

