<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Sign In</%block>
<%block name="bodyclass">not-signedin signin</%block>

<%block name="content">

<div class="wrapper-content wrapper">
  <section class="content">
    <header>
      <h1 class="title title-1">Sign into edX Studio</h1>
      <a href="${reverse('signup')}" class="action action-signin">Don't have a Studio Account? Sign up!</a>
    </header>

    <article class="content-primary" role="main">
      <form id="login_form" method="post" action="login_post">
        
        <fieldset>
          <legend class="sr">Required Information to Sign into edX Studio</legend>
          
          <ol class="list-input">
            <li class="field text required" id="field-email">
              <label for="email">Email Address</label>
              <input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />              
            </li>

            <li class="field text required" id="field-password">
              <a href="${forgot_password_link}" class="action action-forgotpassword" tabindex="-1">Forgot password?</a>
              <label for="password">Password</label>
              <input id="password" type="password" name="password" />              
            </li>
          </ol>
        </fieldset>

        <div class="form-actions">
          <button type="submit" id="submit" name="submit" class="action action-primary">Sign into edX Studio</button>
        </div>

        <!-- no honor code for CMS, but need it because we're using the lms student object -->
        <input name="honor_code" type="checkbox" value="true" checked="true" hidden="true">
      </form>
    </article>

    <aside class="content-supplementary" role="complimentary">
      <h2 class="sr">Studio Support</h2>

      <div class="bit">
        <h3 class="title-3">Need Help?</h3>
        <p>Having trouble with your account? Use <a href="http://help.edge.edx.org" rel="external">our support center</a> to look over self help steps, find solutions others have found to the same problem, or let us know of your issue.</p>
      </div>
    </aside>
  </section>
</div>
</%block>

<%block name="jsextra">
<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) {
          var next = /next=([^&]*)/g.exec(decodeURIComponent(window.location.search));
          if (next.length > 1) {
            location.href = next[1];
          }
          else location.href = "${reverse('homepage')}";
        } else if($('#login_error').length == 0) {
          $('#login_form').prepend('<div id="login_error" class="message message-status error">' + json.value + '</span></div>');
          $('#login_error').addClass('is-shown');
        } else {
          $('#login_error').stop().addClass('is-shown');
          $('#login_error').html(json.value);
        }
      }
    );
  });
})(this)
</script>
</%block>