{{ xheader }}
<div id="myLoader" class="loader">
<!-- <div class="innerloader"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></div> -->
</div>
<div class="container">
  {% if error_warning %}
  <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div>
  {% endif %}
  <div class="row">
    <div id="xlogin" class="login-panel-bg">
<div id="loginPage" class="login-section">
<div id="login-tabs" class="tabbable">
<ul id="accountTabs" class="nav nav-tabs">
<li class="login-step active">
	<a data-target="#panel-forgotten" data-toggle="tab">{{ heading_title }}</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="panel-forgotten"> 
            <div class="row">
              <div class="col-md-12">
              <form role="form" id="form_forgotten" action="#" autocomplete="off" method="post" novalidate enctype="multipart/form-data">              
               <div id="xlogin-panel">
               	  <div class="section-heading accountpage">{{ text_email }}</div>
               	  <div class="group is_first">                    
                    <input type="text" name="email" class="inputMaterial">
                    <label for="email">{{ entry_email }}</label>
                  </div>                            
                    <div class="buttons">
         				<input type="submit" value="{{ button_continue }}" account="login" id="button-forgotten" data-loading-text="Loading..." class="btn btn-success width100" />
       				</div>
       				</div>     				       
       				</form>                     
              </div>
            </div>  
             <div class="footer-separator"><span class="pull-left"> <a href="{{ login }}">{{ button_login }}</a> </span>
				<span class="pull-right"> <a class="pointer" href="{{ register }}">{{ text_account_new }}</a>
			</span>
			</div>  
			<div class="clearfix"></div>
</div>

</div>              
			             
</div>
</div>
      </div>
</div>
<script type="text/javascript" src="catalog/view/javascript/xtensions/stylesheet/bs/js/xcustom.js"></script>
<script type="text/javascript">
$(document).on("click", "#button-forgotten", function(event) {
   $.ajax({
      url: 'index.php?route=extension/module/xtensions/account/forgotten/validate',
      type: 'post',
      data: $('#form_forgotten').serialize(),
      dataType: 'json',
      beforeSend: function() {
	  	  $('#button-forgotten').addClass('progress-bar-striped active');      
	      $('.warning, .error, .alert, .alert-warning, .alert-danger,.alert-dismissible').remove();
	      showLoader();
      },
      complete: function() {
      	$('#button-forgotten').removeClass('progress-bar-striped active');      	      	
      },
      success: function(json) {
        $('.warning, .error, .alert, .alert-warning, .alert-danger,.alert-dismissible, .xerror, .text-danger').remove();
		$('.has-error').removeClass('has-error');					
		if (json['redirect']) {
              location = json['redirect'];
        }else if (json['error']) {                     
              if (json['error']['warning']) {
                  $('#xlogin-panel .is_first').before('<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error']['warning'] + '</div>');
              }
              $('.warning').fadeIn('slow');
          }
		hideLoader();
      },
      error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
          hideLoader();
      }
  });
});  
$(document).on("submit", "#form_forgotten", function(event) {	
	event.preventDefault();
});
function showLoader(){
	$('#myLoader').css({
    	height: $('#myLoader').parent().height(), 
    	width: $('#myLoader').parent().width()
	});
	$('#myLoader').show();
	showBar();	
};
function hideLoader(){
	$('#myLoader').hide();
	hideBar();	
};
function showBar(){
	NProgress.start();
	NProgress.set(0.6); 
};
function hideBar(){
	NProgress.inc();
	NProgress.done();	
};
$(document).delegate('.agree', 'click', function(e) {
	e.preventDefault();
	$('#modal-agree').remove();
	var element = this;
	$.ajax({
		url: $(element).attr('href'),
		type: 'get',
		dataType: 'html',
		beforeSend: function() {
			$(element).append(' <i class="fa fa-circle-o-notch fa-spin"></i>');
		},
		success: function(data) {
			html  = '<div id="modal-agree" class="modal xmargin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
			html += '  <div class="modal-dialog">';
			html += '    <div class="modal-content">';
			html += '      <div class="modal-header">';
			html += '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
			html += '        <h4 class="modal-title">' + $(element).text() + '</h4>';
			html += '      </div>';
			html += '      <div class="modal-body">' + data + '</div>';
			html += '    </div';
			html += '  </div>';
			html += '</div>';
			$('body').append(html);
			$('#modal-agree').modal('show');
			$('.fa-spin').remove();
		}
	});
});
</script>
{{ xfooter }}