<%inherit file="main.html" />

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

<%! from django.core.urlresolvers import reverse %>
<%! from django.utils.translation import ugettext as _ %>

<%block name="title"><title>Log into your ${settings.PLATFORM_NAME} Account</title></%block>

<%block name="js_extra">
  <script type="text/javascript">
    $(function() {

      var view_name = 'view-login';

      // adding js class for styling with accessibility in mind
      $('body').addClass('js').addClass(view_name);

      // new window/tab opening
      $('a[rel="external"], a[class="new-vp"]')
      .click( function() {
      window.open( $(this).attr('href') );
      return false;
      });

      // form field label styling on focus
      $("form :input").focus(function() {
        $("label[for='" + this.id + "']").parent().addClass("is-focused");
      }).blur(function() {
        $("label").parent().removeClass("is-focused");
      });
    });

    (function() {
      toggleSubmitButton(true);

      $('#login-form').on('submit', function() {
        toggleSubmitButton(false);
      });

      $('#login-form').on('ajax:complete', function() {
        toggleSubmitButton(true);
      });

      $('#login-form').on('ajax:success', function(event, json, xhr) {
        if(json.success) {
          $('.message.submission-error').removeClass('is-shown');
          var u=decodeURI(window.location.search);
          next=u.split("next=")[1];
          if (next) {
            location.href=next;
          }  else {
            location.href="${reverse('dashboard')}";
          }
        } else {
          $('.message.submission-error').addClass('is-shown');
          $('.message.submission-error .message-copy').html(json.value);
        }
      });
    })(this);

    function toggleSubmitButton(enable) {
      var $submitButton = $('form .form-actions #submit');

      if(enable) {
        $submitButton.
          removeClass('is-disabled').
          removeProp('disabled').
          html('Log into My ${settings.PLATFORM_NAME} Account <span class="orn-plus">+</span> Access My Courses');
      }
      else {
        $submitButton.
          addClass('is-disabled').
          prop('disabled', true).
          html('Processing your account information &hellip;');
      }
    }
  </script>
</%block>

<section class="introduction">
  <header>
    <h1 class="sr">${_("Log Into Your Account")}</h1>
  </header>
</section>

<section class="login container">
  <section role="main" class="content">
    <header>
      <h2 class="sr">${_("Login Form")}</h2>
    </header>

    <form role="form" id="login-form" method="post" data-remote="true" action="/login_ajax">

      <!-- status messages -->
      <div role="alert" class="status message">
        <h3 class="message-title">We're Sorry, ${settings.PLATFORM_NAME} accounts are unavailable currently</h3>
        <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </div>

      <div role="alert" class="status message submission-error">
        <h3 class="message-title">The following errors occured while logging you in: </h3>
        <ul class="message-copy">
          <li>Your email or password is incorrect</li>
        </ul>
      </div>

      <p class="instructions sr">
        Please provide the following information to log into your ${settings.PLATFORM_NAME} account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
      </p>

      <fieldset class="group group-form group-form-requiredinformation">
        <legend class="sr">Required Information</legend>

        <ol class="list-input">
          <li class="field required text" id="field-email">
            <label for="email">E-mail</label>
            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
          </li>
          <li class="field required password" id="field-password">
            <label for="password">Password</label>
            <input id="password" type="password" name="password" value="" />
            <span class="tip tip-input">
              <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw">Forgot password?</a>
            </span>
          </li>
        </ol>
      </fieldset>

      <fieldset class="group group-form group-form-secondary group-form-accountpreferences">
        <legend class="sr">Account Preferences</legend>

        <ol class="list-input">
          <li class="field required checkbox" id="field-remember">
            <input id="remember-yes" type="checkbox" name="remember" value="true" />
            <label for="remember-yes">Remember me</label>
          </li>
        </ol>
      </fieldset>

% if course_id and enrollment_action:
      <input type="hidden" name="enrollment_action" value="${enrollment_action | h}" />
      <input type="hidden" name="course_id" value="${course_id | h}" />
% endif

      <div class="form-actions">
        <button name="submit" type="submit" id="submit" class="action action-primary action-update"></button>
      </div>
    </form>
  </section>

  <aside role="complementary">
    <header>
      <h2 class="sr">Helpful Information</h2>
    </header>

    % if settings.MITX_FEATURES.get('AUTH_USE_OPENID'):
    <!-- <div class="cta cta-login-options-openid">
      <h3>Login via OpenID</h3>
      <p>You can now start learning with edX by logging in with your <a rel="external" href="http://openid.net/">OpenID account</a>.</p>
      <a class="action action-login-openid" href="#">Login via OpenID</a>
    </div> -->
    % endif

    <div class="cta cta-help">
      <h3>Not Enrolled?</h3>
      <p><a href="${reverse('register_user')}">Sign up for ${settings.PLATFORM_NAME} today!</a></p>

      ## Disable help unless the FAQ marketing link is enabled
      % if settings.MKTG_URL_LINK_MAP.get('FAQ'):
        <h3>Need Help?</h3>
        <p>Looking for help in logging in or with your ${settings.PLATFORM_NAME} account?
        <a href="${marketing_link('FAQ')}">
            View our help section for answers to commonly asked questions.
        </a></p>
      % endif
    </div>
  </aside>
  </section>

