{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}

<div class="boxed">
  <div id="col-main" class="page-login">

  <div class="row">

    <div class="col-sm-6 col-xs-12">
      <div class="form-wrapper">

        <div id="customer-login" class="content">
          <h2 class="heading">{{ 'customer.login.title' | t }}</h2>
          <p>{{ 'customer.login.welcome' | t }}</p>

          {% form 'customer_login' %}

          {% if form.errors %}
          <div class="alert alert-error">
            <button type="button" class="close" title="{{'customer.general.close' | t }}" data-dismiss="alert">×</button>
            {{ form.errors | default_errors }}
          </div>
          {% endif %}

          <div class="control-wrapper">
            <label for="customer_email">{{ 'customer.login.email' | t }}<span class="req">*</span></label>
            <input type="email" required name="customer[email]" id="customer_email" />
          </div>

          {% if form.password_needed %}
          <div class="control-wrapper">
            <label for="customer_password">{{ 'customer.login.password' | t }}<span class="req">*</span></label>
            <input type="password" required name="customer[password]" id="customer_password" class="password" />
          </div>
          {% endif %}
          
          <div class="control-wrapper last">
            <div class="action">
              <a class="forgot-pass" href="javascript:;" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot_password' | t }}</a>
              <a class="return-store" href="{{ shop.url }}">{{ 'customer.login.cancel' | t }}</a>
            </div>
            <button class="btn btn-1" type="submit">{{ 'customer.login.sign_in' | t }}</button>
          </div>

          {% endform %}

        </div>

        <div id="recover-password" style="display: none;">

          <h2 class="heading">{{ 'customer.recover_password.title' | t }}</h2>
          <p class="note">{{ 'customer.recover_password.subtext' | t }}</p>

          {% form 'recover_customer_password' %}

          {% if form.posted_successfully? %}
          {% assign reset_success = true %}
          {% endif %}

          {% if form.errors %}
          <div class="alert alert-danger">
            <button type="button" class="close" title="{{'customer.general.close' | t }}" data-dismiss="alert">×</button>
            {{ form.errors | default_errors }}
          </div>
          {% endif %}

          <div class="control-wrapper">
            <label for="email">{{ 'customer.recover_password.email' | t }}<span class="req">*</span></label>
            <input type="email" value="" name="email" id="recover-email" />
          </div>

          <div class="control-wrapper">
            <button class="btn btn-1" type="submit">{{ 'customer.recover_password.submit' | t }}</button>
            <a class="cancel btn btn-2" href="javascript:;" onclick="hideRecoverPasswordForm();">{{ 'customer.recover_password.cancel' | t }}</a>
          </div>

          {% endform %}
        </div>
      </div>

    </div>
    
    <div class="col-sm-6 col-xs-12 login-or">
      <div class="form-wrapper">

        <h2 class="heading">{{'customer.register.title' | t }}</h2>
        <p>{{'customer.register.caption' | t }}</p>

        {% form 'create_customer' %}

        {% if form.errors %}
        <div class="alert alert-danger">
          <button type="button" class="close" title="{{'customer.general.close' | t }}" data-dismiss="alert">×</button>
          {{ form.errors | default_errors }}
        </div>
        {% endif %}

        <div id="register-form">
          
          <div class="control-wrapper">
            <label for="first-name">{{ 'customer.register.first_name' | t }}</label>
            <input type="text" name="customer[first_name]" id="first-name" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus />
          </div>

          <div class="control-wrapper">
            <label for="last-name">{{ 'customer.register.last_name' | t }}</label>
            <input type="text" name="customer[last_name]" id="last-name" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words" autofocus />
          </div>
          
          <div class="control-wrapper{% if form.errors contains 'email' %} has-error{% endif %}">
            <label for="email">{{'customer.register.email' | t }}<span class="req">*</span></label>
            <input type="email" value="{{ form.email }}" name="customer[email]" id="email" {% if form.errors contains 'email' %} class="error"{% endif %} />
          </div>
          
          <div class="control-wrapper{% if form.errors contains 'password' %} has-error{% endif %}">
            <label for="password">{{'customer.register.password' | t }}<span class="req">*</span></label>
            <input type="password" value="" name="customer[password]" id="password" class="password{% if form.errors contains 'password' %} error{% endif %}" />
          </div>
          
          <div class="control-wrapper last">
            <button class="btn btn-1" type="submit">{{'customer.register.submit' | t }}</button>
          </div>
          
        </div>
        {% endform %}
        
        <h5 class="semi-bold">Sign up today and you'll be able to :</h5>
        <ul class="list-unstyled list-benefits">
          <li><i class="demo-icon icon-ok"></i> Speed your way through the checkout</li>
          <li><i class="demo-icon icon-ok"></i> Track your orders easily</li>
          <li><i class="demo-icon icon-ok"></i> Keep a record of all your purchases</li>
        </ul>

      </div>
    </div>
    
  </div>

  </div>
</div>


<script type="text/javascript">
  if (window.location.hash == '#recover') { showRecoverPasswordForm(); }

  function showRecoverPasswordForm() {
    $('#recover-password').fadeIn();
    $('#customer-login').hide();
    window.location.hash = '#recover';
    return false;
  }

  function hideRecoverPasswordForm() {
    $('#recover-password').hide();
    $('#customer-login').fadeIn();
    window.location.hash = '';
    return false;
  }
</script>
