{% load i18n l10n swstags %}

{% get_current_language as LANGUAGE_CODE %}

<style>

/******************************* STYLE INTERRUPTOR ***********************************/

#stage {
  display: block;
  margin: 0;
  padding: 0;
  margin: 0 auto;
  float:left;
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#5c5f62', EndColorStr='#383839', GradientType=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5c5f62', EndColorStr='#383839', GradientType=0))";
}
#stage .slider-frame {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  margin: 0px 0px 5px 25px;
  width: 42px;
  height: 15px;
  background-size: 100%;
  background-color: #404040;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), to(#404040));
  background-image: -webkit-linear-gradient(#2b2b2b, #404040);
  background-image: -moz-linear-gradient(#2b2b2b, #404040);
  background-image: -o-linear-gradient(top, #2b2b2b, #404040);
  background-image: -khtml-gradient(linear, left top, left bottom, from(#2b2b2b), to(#404040));
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2b2b2b', EndColorStr='#404040', GradientType=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2b2b2b', EndColorStr='#404040', GradientType=0))";
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #666666;
  border-left: 1px solid #333333;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 1px 8px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 1px 8px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 1px 8px 0 rgba(0, 0, 0, 0.25);
}
#stage .slider-frame .slider-button {
  display: block;
  margin: 0;
  padding: 0;
  width: 21px;
  height: 13px;
  line-height: 13px;
  background: #d37a16;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #70430e;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  color: #fff;
  font-family:Helvetica;
  font-size:9px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  cursor: pointer;
}
#stage .slider-frame .slider-button.on {
  margin-left: 20px;
  background: #2372c6;
  border: 1px solid #0f3f74;
}
#stage .slider-frame .slider-button:before {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  width: 21px;
  height: 6px;
  background: rgba(255, 255, 255);
  background: rgba(255, 255, 255, 0.25);
  content: '';
  -moz-border-radius: 15px;
  border-radius: 15px;
}
/*end button on / off*/


  .class_block{
	display: inline-block;
	float:left;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    z-index:2;
    opacity:0.4;
    filter:alpha(opacity = 50);
  }

.text_interruptor_reload{
	display: inline-block;
	float:left;
 	margin: 2px -20px 4px 2px;
}

/******************************* END STYLE INTERRUPTOR ********************************/

.interruptor_reload{
	display: inline-block;
	float:left;
 	margin: 5px 5px 0px 10px;
	font-weight:bold;
	border-radius:5px;
	text-align:center;
/*	width:100px;
	border:1px solid red;*/

	font-size: 10px;

}


.b_clear_update{
	float:left;
	display: inline-block;
	/*border: 1px solid red;*/
	min-width: 300px;

}

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


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


.need_to_update{
	font-size: 9px;
	display: inline-block;
	color:orange;
	padding: 2px;
	border-radius: 3px;
	width: 120;
	margin: 3px 0px 0px 10px;
}

.data_updated{
	font-size: 9px;
	display: inline-block;
	color:#90EC8C;
	padding: 2px;
	border-radius: 3px;
	width: 120;
	margin: 3px 0px 0px 10px;
}


.clear_update_button{
	font-size: 11px !important;
	height: 18px;
	float: left;
	display: inline-block;
	margin:4px 0px 0px 3px;
	/*border: 1px solid green;*/
}


</style>


<div id='{{view_name}}{{name}}_clear_update' class='b_clear_update'>
	

	<div id='{{view_name}}_in_reload_button_on_off' class='interruptor_reload'>
		<div id='{{view_name}}_in_reload_text_interruptor' class='text_interruptor_reload'> {% trans 'Auto Filter' %} </div> 
		<section id="stage">
			<div id='{{view_name}}_in_reload_interruptor' class="slider-frame"> 
	     		<span id='{{view_name}}_interruptor_reload_button' class="slider-button">{% trans default_position %}</span>  
	    	</div>  
		</section>
	  <p style= 'clear: both !important;'></p>
	</div>

	<div id='{{view_name}}_clear_update_button' class = 'clear_update_button'>
		<p id="{{view_name}}{{name}}_filter_clear_btn" class="p_label_input_clear"></p>
		<p id="{{view_name}}{{name}}_filter_update_btn" class="p_label_input_update"></p>
	</div>

	<div id='{{view_name}}_data_updated' class='data_updated'> Data Updated </div>
	<div id='{{view_name}}_need_to_update' class='need_to_update'> Press Update button  </div>
</div>	

<script type="text/javascript" lang="text/javascript">
/********************* FUNCTION INTERRUPTOR **************/


$('#{{view_name}}_interruptor_reload_button').attr('valor','ON').html('ON');
$('#{{view_name}}_interruptor_reload_button').addClass('on');
$('#{{view_name}}_interruptor_reload_button').toggle(
      function(){  
        if ($("#{{view_name}}_interruptor_reload_interruptor").hasClass('class_block') != true)
        {  
          $(this).removeClass('on');
          $(this).attr('valor','OFF').html('OFF');

        }
      
      },function(){  
        if ($("#{{view_name}}_interruptor_reload_interruptor").hasClass('class_block') != true)
        {  
          $(this).addClass('on'); 
          $(this).attr('valor','ON').html('ON');
        }
      });      


$('#{{view_name}}_in_reload_button_on_off').hide();
$('#{{view_name}}_need_to_update').hide();
$('#{{view_name}}_data_updated').hide();

/******************** END FUNCTION INTERRUPTOR ***************************/

	window['{{name_view}}{{name}}'] = 'update'
	$('#{{view_name}}{{name}}_filter_clear_btn').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}});
	$('#{{view_name}}{{name}}_filter_update_btn').button({icons: {primary: "ui-icon-refresh"}});


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


	$('#{{view_name}}{{name}}_filter_update_btn').click(function(){
		{{view_name}}_callback('update','button_click');
	});


</script>