<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Log in</%block>

<%block name="content">

<section class="main-container">

  <section class="main-content">
    <header>
      <h3>Log in</h3>
      <hr>
    </header>

    <form id="login_form" action="login_post" method="post">
      <label>E-mail</label>
      <input name="email" type="email" placeholder="E-mail">
      <label>Password</label>
      <input name="password" type="password" placeholder="Password">
      <label class="remember-me">
        <input name="remember" type="checkbox">
        Remember me
      </label>
      <div class="submit">
        <input name="submit" type="submit" value="Submit">
      </div>
    </form>

    <section class="login-extra">
      <p>
        <span>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></span>
        <a href="#" class="pwd-reset">Forgot password?</a>
      </p>
    </section>


  </section>

</section>

<script type="text/javascript">
(function() {
   function getCookie(name) {
     return $.cookie(name);
   }
   function postJSON(url, data, callback) {
     $.ajax({type:'POST',
       url: url,
       dataType: 'json',
       data: data,
       success: callback,
       headers : {'X-CSRFToken':getCookie('csrftoken')}
     });
   }

   $('form#login_form').submit(function(e) {
     e.preventDefault();
     var submit_data = $('#login_form').serialize();

     postJSON('/login_post',
       submit_data,
       function(json) {
       if(json.success) {
        location.href="${reverse('index')}";
        } else if($('#login_error').length == 0) {
        $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
        } else {
        $('#login_error').stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
        }
        }
        );
     });
})(this)
</script>
      
</%block>
