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

<%block name="content">

  <div class="edx-studio-logo-large"></div>

  <article class="log-in-box">
    <header>
      <h1>Log in to edX studio</h1>
    </header>
    <form class="log-in-form" id="login_form" action="login_post" method="post">
      <div class="row">
        <label>Email</label>
        <input name="email" type="email" class="email-field" tabindex="1">
      </div>
      <div class="row">
        <label>Password <a href="${forgot_password_link}" class="forgot-button">Forgot password?</a></label>
        <input name="password" type="password" class="password-field" tabindex="2">
      </div>
      <div class="row form-actions">
        <input name="submit" type="submit" value="Log In" class="log-in-button" tabindex="3">
        <span class="or">or</span>
        <a href="${reverse('signup')}" class="sign-up-button" tabindex="4">Sign up</a>
      </div>
    </form>
  </article>

<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">' + json.value + '</div>');
          $('#login_error').slideDown(150);
        } else {
          $('#login_error').stop().slideDown(150);
          $('#login_error').html(json.value);
        }
      }
    );
  });
})(this)
</script>
      
</%block>
