<div id="panel">
    <div class="row">
        <div id="customers" class="twelvecol">   
            <div id="members" class="sixcol">
                <h3>Existing Customers Sign in</h3>
                {% form 'customer_login' %}
                {{ form.errors | default_errors }}
                
                <div id="login_email">
                    <label for="customer_email" class="login">Email Address</label>
                    <input type="email" value="" name="customer[email]" id="customer_email" class="large" size="30" />
                </div>    
                {% if form.password_needed %}
                <div id="login_password">
                    <label for="customer_password" class="login">Password</label>
                    <input type="password" value="" name="customer[password]" id="customer_password" class="large password" size="16" />
                </div>
                <div class="login-button">
                    <input class="button" type="submit" value="Sign In" />
                </div>
                <div id="forgot_password">
                    <a href="#" onclick="showRecoverPasswordForm();return false;">Forgot your password?</a>
                </div>
                {% endif %}
                {% endform %}
    
                <div id="recover-password" style='display:none'>
                    <div class="template_header">
                        <h3 class="title">Reset Password</h3>
                        <p class="note">We will send you an email to reset your password.</p>
                    </div>
                
                    {% form 'recover_customer_password' %}
                    {{ form.errors | default_errors }}
                
                    <div id="recover_email" class="clearfix large_form">
                        <label for="email" class="large">Email</label>
                        <input type="email" value="" size="30" name="email" id="recover-email" class="large" />
                    </div>
                    
                    <div class="action_bottom">
                        <input class="button" type="submit" value="Submit" />
                        <span class="note">or <a href="#" onclick="hideRecoverPasswordForm();return false;">Cancel</a></span>
                    </div>
                {% endform %}
                </div>
            </div>
    
            <div id="suspects" class="sixcol last">
            <!-- Create Customer -->
                  <div id="create-customer">
            	      <h3>Create Account</h3>
            	    {% form 'create_customer' %}
            	      {{ form.errors | default_errors }}
            
            	      <div id="first_name" class="clearfix large_form">
            	        <label for="first_name" class="login">First Name</label>
            	        <input type="text" value="" name="customer[first_name]" id="first_name" class="large" size="30" />
            	      </div>
            
            	      <div id="last_name" class="clearfix large_form">
            	        <label for="last_name" class="login">Last Name</label>
            	        <input type="text" value="" name="customer[last_name]" id="last_name" class="large" size="30" />
            	      </div>
            
            	      <div id="email" class="clearfix large_form">
            	        <label for="email" class="login">Email Address</label>
            	        <input type="email" value="" name="customer[email]" id="email" class="large" size="30" />
            	      </div>
            
            	      <div id="password" class="clearfix large_form">
            	        <label for="password" class="login">Password</label>
            	        <input type="password" value="" name="customer[password]" id="password" class="large password" size="30" />
            	      </div>
            
            	      <div class="signup_button">
            	        <input class="btn" type="submit" value="Create" />
            	      </div>
            	    {% endform %}
            	  </div><!-- /#create-customer -->        
            </div>
        </div>
    </div>
</div>
        
<script type="text/javascript">
  function showRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'inline-block';
    document.getElementById('customer').style.display='none';
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'none';
    document.getElementById('customer').style.display = 'inline-block';
  }

  if (window.location.hash == '#recover') { showRecoverPasswordForm() }
</script>