<%namespace name='static' file='static_content.html'/>

<section class="modal-wrapper">
  <section class="login-modal">
    <div class="inner-wrapper">
      <header>
        <h3><img src="${static.url('images/edx_bw.png')}">Log In</h3>
      </header>

      <form id="login_form" 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>
        <input name="submit" type="submit" value="Log In">
      </form>

      <section class="login-extra">
        <p>
          <span>Not enrolled? <a href="#">Sign up here.</a></span>
          <a href="#" class="pwd-reset">Forgot your password?</a>
        </p>
      </section>

      <div class="close-modal">
        <div class="inner">
          <p>✖</p>
        </div>
      </div>
    </div>
  </section>
</section>
<script type="text/javascript">
  function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) == (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

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',
      submit_data,
      function(json) {
      if(json.success) {
      location.href="/info";
      } 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);
      }
      }
      );
    });
  // new Modal({el: $(".login-modal")}).render()
</script>
