{% extends 'themes/default/login.layout.html' %}
{% block body %}
<div class="container center-align">
<div class="row">

	<div class="col s12 m6 offset-m3 card z-depth-4" style="margin-top: 5%;padding:0px">

<div class="card cardlogin">
<div class="card-content">

<div class="card-image" >
<img src="{{app.config['app_url']}}/app/themes/default/resources/images/{{app.config['portal_logo']}}">
</div>


<div id="customerlogintab"  class="logintabpanel">

<form action="{{app.config.base_url}}/customer/login_check" method="post">
		
	<h6>Customer Portal Login</h6>
	{% if error %}
	<div class="card red white-text" style="padding:10px;">
		{{ error }}
	</div>
	{% endif %}
	
	 <div class="input-field col s12">
        <input name="_username" type="email" class="validate" value="{{ last_username }}">
        <label for="_username">Email</label>
    </div>
    <div class="input-field col s12">
        <input name="_password" type="password" class="validate">
        <label for="_password">Password</label>
    </div>
   
    <div class="input-field col s12">

        <select name="user_language">
	      {% for langcode,langname in av_languages %}
	      	  {% if langcode in app.config['limited_languages'] or app.config['limited_languages']|length==0 %}
              <option value="{{langcode}}" {% if app.config.default_lang==langcode %}selected="selected"{% endif %}>{{langname}}</option>
			  {% endif %}
          {% endfor %}
	    </select>
	    <label>Select Language</label>
    </div>
    
    <div class="input-field col s12 center-align">
        <button type="submit" class="btn {{themebasiccolor}} col s12" />Login</button>
    </div>
	
	{% if app.config['customer_registration_enabled'] %}    
    <div class="input-field col s12 center-align">
	    or<br>
        <a href="{{app.config['app_url']}}/register/" class="btn lightblue col s12" />Register</a>
    </div>
    {% endif %}
    <div class="col s12 ">
        <br><a style="float:left;" class="red-text" href="javascript:togglePanel('customerresetpswtab')"/>Lost Password ?</a><br>
    </div>
    <div class="clearfix"></div>
    </form>
    
 </div>
 
 
 <div id="customerresetpswtab" class="logintabpanel" style="display: none">
	 
	<h6><b>Customer</b> Reset Password</h6>


	<div class="col s12 card grey white-text hide" id="pswresetcheck" style="padding:10px;">
	 Checking Username . . .
	</div>
    
    <div class="col s12 card red white-text hide" id="pswreseterror" style="padding:10px;">
	 Password Reset Error
	</div>

	<div class="resetinputdiv">
		
	<div class="input-field col s12">
        <input name="resetusername" id="resetusername" type="email" class="validate" value="{{ last_username }}">
        <label for="resetusername">Email Address</label>
    </div>
    
    
    <div class="input-field col s12 center-align">
        <a href="javascript:customerPswReset()" class="btn {{themebasiccolor}} col s12" />Reset Password</a>
    </div>
    
	</div>
        
    <div class="col s12 center-align">
        <br><a style="float:left;"  class="red-text" href="javascript:togglePanel('customerlogintab')"/>Return to Login</a><br>
    </div>
    <div class="clearfix"></div>
 </div>
 
 <script>
	 function togglePanel(panelid){
		 $(".logintabpanel").hide();
		 $("#"+panelid).show();
	 }
	 
	 function customerPswReset(){
	
	 if($("#resetusername").val()==""){
		 $("#resetusername").addClass("invalid").focus();
		 return false;
	 }
	 
	 $("#pswreseterror").addClass("hide");	 
	 $("#pswresetcheck").removeClass("hide");
	 
	 $.post( "resetpassword", { username: $("#resetusername").val() })
		  .done(function( data ) {
			  var response = jQuery.parseJSON(data);
			  console.log(response);
			  if(response.result!="success"){
				  $("#pswresetcheck").addClass("hide");
				  $("#pswreseterror").html(response.error).removeClass("hide");				  
			  }
		      else{
			      $("#pswresetcheck").html("Password Reset Successfully Completed! <br> Please check your mailbox to find your new password.").removeClass("grey").addClass("green");
			      $("#pswreseterror, .resetinputdiv").addClass("hide");
		      }
		  });
	}
 </script>
    
</div>




<div class="card-action">
<span>{% if app.config.portal_brand is defined %}{{ app.config.portal_brand|raw }}{% endif %}</span>
</div>

</div>
</div>
</div>
</div>
{% endblock %}