{% block head %}
	<link rel="icon" type="image/png" href="{{ asset('bundles/acmesosmon/images/favicon.png') }}">
	<title>SosMon application</title>   
{% endblock %}
{% block stylesheets %}	
<link rel="stylesheet/less" type="text/css" href="{{ asset('bundles/acmesosmon/css/login.less') }}" />
{% endblock %}
{% block javascripts %}
{% javascripts
		'@jquery' 
		'@less' %}
		<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}

<div id="login_card"  class = "login_card" >
	<div class = "login_title">Password change</div>
	<form id="logform" class="logform"  action="app/confirmchange" method="post" {{ form_enctype(form) }}>
	<div class="log_row">
		{{ form_label(form.newpassword) }}
		{{ form_widget(form.newpassword) }}
	</div>
	<div class="log_row">
		{{ form_label(form.retrypassword) }}
		{{ form_widget(form.retrypassword) }}
	</div>
	<div style="margin-left:120px; display:inline-block"><a id="blogin" href="#"> <img src="{{ asset('bundles/acmesosmon/images/change.png') }}"></a></div>
	<div class="log_cancel"><a class="href_cancel" href="logout">Cancel</a></div>
	
	<div id="errmsg" class="errmsg" style="display:none"></div>
	<input type="hidden" name="_target_path" value="/index" />
</form> 	
</div>

<script type="text/javascript" src="{{ asset('bundles/acmesosmon/js/jquery-1.8.0.min.js') }}"></script>	
<script>
	jQuery(function($){
		$('#errmsg').hide();		
			$('#blogin').bind('click', function(){
			
				var p1 = $('#chgpwd_newpassword').val();
				var p2 = $('#chgpwd_retrypassword').val();
				
				if (p1.length < 6) {
					$('#errmsg').html('Password must be at least 6 symbols. Please retype password');
					$('#errmsg').show();				
				}
				else {
				
					if (p1 == p2) {			
						formSubmit();
					}
					else {
						$('#errmsg').html('Password is not confirmed. Please retype password');
						$('#errmsg').show();					
					}
				}
			});
			
	});
	
	function formSubmit() {
		$('#logform').submit();	
	}		
</script>

</body>