{% load i18n l10n swstags %}

<style>
	.input_filter
	{
		float: left;
	}
	

	.p_label_input_filter
	{
		/*border: 1px solid blue;*/
	}



	.p_label_input_clear
	{
		height:10px !important;
		float: left;
		font-size: 0.9em;
		padding:1px;
		margin: 3px 3px 3px 20px !important;
		/*border: 1px solid red;*/
	}
	.p_label_input_update
	{
		height:10px !important;
		float: left;
		font-size: 0.9em;
		padding:1px;
		margin: 3px 3px 3px 0px !important;
	/*	border: 1px solid red;*/
	}

	.tag_date_filters
	{
		/*border: 1px solid red;*/
		/*width: 400px;*/
	}

	#clear_update{
		/*border:1px solid blue;*/
		float:left;
		width: 300px;
		height: 40px;

	}

	.filters_button
	{
		/*border:1px solid yellow;*/
		/*padding: 3px;*/
		float:right;
		width: 50px;
		height: 40px;
	}

	.filters_button_horizontal
	{
		/*border:1px solid yellow;*/
		/*padding: 3px;*/
		margin:2px 0px 0px 0px;
		float:left;
		width: 115px;
		height: 18px;
	}


.input_filter{
	width: 140px;
	border: solid 1px white;
	border-radius: 6px;
}


/*	#asf{
		border: 1px solid green;
		width: 20px;
		height: 10px;
	}
*/

.shortcuts_filters
{
	display: inline-block;
	text-align: center;
}

.tag_date_filters label
{
	min-width: 30px !important;
}


.tag_select_filters_div{
	/*border:1px solid red;*/
	display: inline-block;
}

.text_filters{
	float:left;
	display:inline-block;
	/*border: 1px solid red;*/
	margin: 5px;

}

.label_filter_text{
	width:111px;
	float:left;
	display:inline-block;
	/*border:1px solid red;*/
	text-align: right;
	margin-left: 5px;
}

.input_filter_text{
	width:146px;
	float:left;
	display:inline-block;
	/*border:1px solid blue;*/
	margin-left: 5px;
	margin-right: 10px;
	border: solid 1px white;
	border-radius: 6px;
}

</style>


{% 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 %}
						<div id = "{{view_name}}_clear_update" class="clear_update">{#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}}'/>
						</div>
					{% endif %}
				{% endfor %}

				{% if date_field == 'True' %}

					<div id="{{view_name}}_p_search_clear_btn" class="filters_button">
						<p id='asf'> </p>

						<p  id="{{view_name}}_filter_clear_btn" class="p_label_input_clear"> </p>
						<p class="clear-fix"></p>
						<p  id="{{view_name}}_filter_search_btn" class="p_label_input_update"> </p>

						{#<input type="button"  id="{{view_name}}_filter_clear_btn" >#}
						{#<input type="button"  id="{{view_name}}_filter_search_btn" value="{% trans 'Update' %}">#}
					</div>
				{% endif %}

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

			{% if shortcuts != 'False' %}
				<div id="{{view_name}}_shortcuts_filters" class="shortcuts_filters">
					{% tag_shortcuts view_name shortcuts shortcuts_select %}
				</div>
			{% 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}}">
									

									{% if value.default == '' or value.default == '-----'%}
										<option value='None'>-----</option> 
									{% endif %}

									{% for m in value.values %}
										{% if m.1 == value.default%}
											<option value ='{{m.0|unlocalize}}'> {{m.1}} </option>
										{% endif %}
									{% endfor %}


									{% for m in value.values %}
										{% if m.1 != value.default%}
											<option value ='{{m.0|unlocalize}}'> {{m.1}} </option>
										{% endif %}
									{% endfor %}


									{% if value.default != '' and value.default != '-----'%}
										<option value='None'>-----</option> 
									{%endif%}

								</select>
								</p>
							{% endif %}
						{% endif %}
						
						{% if vertical == 'true' %}  <p class="clear-fix"> </p> {% endif %}

						<script type="text/javascript">
							$("#{{view_name}}_filter_{{key}}").select2();
						</script>
					{% endfor %}

					<div id="{{view_name}}_div_filters_text" class="text_filters">
						
						{% if filters_text != 'false'%}
							{% for f_text in filters_text%}
								<label class="label_filter_text" >{{f_text.1}} </label> 
								<input type='text' id='{{view_name}}_{{f_text.0}}' name= '{{view_name}}_{{f_text.0}}' class="input_filter_text"/> 
							{% endfor%}	
						{% endif%}			

					</div>	

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




			{% if date_field == 'False' %}
				<div id="{{view_name}}_p_search_clear_btn" class="filters_button_horizontal">

					<p  id="{{view_name}}_filter_clear_btn" class="p_label_input_clear"> </p>

					<p  id="{{view_name}}_filter_search_btn" class="p_label_input_update"> </p>

					{#<input type="button"  id="{{view_name}}_filter_clear_btn" >#}
					{#<input type="button"  id="{{view_name}}_filter_search_btn" value="{% trans 'Update' %}">#}
				</div>
			{% endif %}



			<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">
	
	$('#{{view_name}}_filter_clear_btn').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}});
	$('#{{view_name}}{{name}}_filter_update_btn').button({icons: {primary: "ui-icon-refresh"}});

	// Selects to selects2
	// $("select[id^='{{view_name}}_filter']").select2();

	$('#{{view_name}}_filter_clear_btn').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}});

	$('#{{view_name}}_filter_search_btn').button({icons: {primary: "ui-icon-refresh"}});


	$("#{{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}}_filter_change = $(this).attr('id');
		{{view_name}}_callback('filters');
	});

	$('#{{view_name}}_filter_search_btn').click(function(){
		{{view_name}}_filter_change = $(this).attr('id');
		$('#{{view_name}}_div_select_filters').unblock();
		{{view_name}}_callback('filters');
	});

	$('#{{view_name}}_filter_clear_btn').click(function(){
		{{view_name}}_filter_change = $(this).attr('id');
		$('#{{view_name}}_div_select_filters').unblock();

		{{view_name}}_callback('b_clear');
	});

</script>

