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

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

<%namespace name='static' file='static_content.html'/>
<%namespace file='main.html' import="login_query"/>

<%! from django.core.urlresolvers import reverse %>
<%! from django.utils import html %>
<%! from django_countries.countries import COUNTRIES %>
<%! from django.utils.translation import ugettext as _ %>
<%! from student.models import UserProfile %>
<%! from datetime import date %>
<%! import calendar %>

<%block name="title"><title>${_("Register for {platform_name}").format(platform_name=settings.PLATFORM_NAME)}</title></%block>

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

      var view_name = 'view-register';

      // 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);

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

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

      $('#register-form').on('ajax:success', function(event, json, xhr) {
        if(json.success) {
          if(json.redirect_url){
            location.href=json.redirect_url;
          }
          else {
            location.href="${reverse('dashboard')}";
          }
       } else {
         toggleSubmitButton(true);
         $('.status.message.submission-error').addClass('is-shown').focus();
         $('.status.message.submission-error .message-copy').html(json.value).stop().css("display", "block");
         $(".field-error").removeClass('field-error');
         $("[data-field='"+json.field+"']").addClass('field-error')
       }
      });
    })(this);

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

      if(enable) {
        $submitButton.
          removeClass('is-disabled').
          removeProp('disabled').
          html("${_('Create My {platform_name} Account').format(platform_name=settings.PLATFORM_NAME)}");
      }
      else {
        $submitButton.
          addClass('is-disabled').
          prop('disabled', true).
          html(gettext('Processing your account information &hellip;'));
      }
    }
  </script>
</%block>

<section class="introduction">
  <header>
    <h1 class="title">
      <span class="title-super">${_("Welcome!")}</span>
      <span class="title-sub">${_("Register below to create your {platform_name} account").format(platform_name=settings.PLATFORM_NAME)}</span>
    </h1>
  </header>
</section>

<section class="register container">
  <section role="main" class="content">
    <form role="form" id="register-form" method="post" data-remote="true" action="/create_account" novalidate>

      <!-- status messages -->
      <div role="alert" class="status message">
        <h3 class="message-title">${_("We're sorry, {platform_name} enrollment is not available in your region").format(platform_name=settings.PLATFORM_NAME)}</h3>
      </div>

      <div role="alert" class="status message submission-error" tabindex="-1">
        <h3 class="message-title">${_("The following errors occured while processing your registration:")} </h3>
        <ul class="message-copy"> </ul>
      </div>

      <p class="instructions">
        ${_("Please complete the following fields to register for an account. ")}<br />
        ${_('Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.')}
      </p>

      <div class="group group-form group-form-requiredinformation">
        <h2 class="sr">${_('Required Information')}</h2>

        % if has_extauth_info is UNDEFINED:

        <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')}" required aria-required="true" />
          </li>
          <li class="field required password" id="field-password">
            <label for="password">${_('Password')}</label>
            <input id="password" type="password" name="password" value="" required aria-required="true" />
          </li>
          <li class="field required text" id="field-username">
            <label for="username">${_('Public Username')}</label>
            <input id="username" type="text" name="username" value="" placeholder="${_('example: JaneDoe')}" required aria-required="true" aria-describedby="username-tip"/>
            <span class="tip tip-input" id="username-tip">${_('Will be shown in any discussions or forums you participate in')} <strong>(${_('cannot be changed later')})</strong></span>
          </li>
          <li class="field required text" id="field-name">
            <label for="name">${_('Full Name')}</label>
            <input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" aria-describedby="name-tip" />
            <span class="tip tip-input" id="name-tip">${_("Needed for any certificates you may earn")}</span>
          </li>
        </ol>

        % else:

        <div class="message">
          <h3 class="message-title">${_("Welcome {username}").format(username=extauth_id)}</h3>
          <p class="message-copy">${_("Enter a Public Display Name:")}</p>
        </div>

        <ol class="list-input">

          % if ask_for_email:

          <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>

          % endif

          <li class="field required text" id="field-username">
            <label for="username">${_('Public Display Name')}</label>
            <input id="username" type="text" name="username" value="${extauth_username}" placeholder="${_('example: JaneDoe')}" required aria-required="true" aria-describedby="username-tip" />
            <span class="tip tip-input" id="id="username-tip>${_('Will be shown in any discussions or forums you participate in')} <strong>(${_('cannot be changed later')})</strong></span>
          </li>

          % if ask_for_fullname:

          <li class="field required text" id="field-name">
            <label for="name">${_('Full Name')}</label>
            <input id="name" type="text" name="name" value="" placeholder="$_('example: Jane Doe')}" aria-describedby="name-tip" />
            <span class="tip tip-input" id="name-tip">${_("Needed for any certificates you may earn")}</span>
          </li>

          % endif

        </ol>

        % endif
      </div>

      <div class="group group-form group-form-secondary group-form-personalinformation">
        <h2 class="sr">${_("Optional Personal Information")}</h2>

        <ol class="list-input">
          % if 'level_of_education' in settings.REGISTRATION_OPTIONAL_FIELDS:
          <li class="field-group">
            <div class="field select" id="field-education-level">
              <label for="education-level">${_("Highest Level of Education Completed")}</label>
              <select id="education-level" name="level_of_education">
                <option value="">--</option>
                %for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
                <option value="${code}">${ed_level}</option>
                %endfor
              </select>
            </div>
          </li>
          % endif
          % if 'gender' in settings.REGISTRATION_OPTIONAL_FIELDS:
          <li class="field-group">
            <div class="field select" id="field-gender">
              <label for="gender">${_("Gender")}</label>
              <select id="gender" name="gender">
                <option value="">--</option>
                %for code, gender in UserProfile.GENDER_CHOICES:
                <option value="${code}">${gender}</option>
                %endfor
              </select>
            </div>
          </li>
          % endif
          % if 'year_of_birth' in settings.REGISTRATION_OPTIONAL_FIELDS:
          <li class="field-group">
            <div class="field select" id="field-yob">
              <label for="yob">${_("Year of Birth")}</label>
              <select id="yob" name="year_of_birth">
                <option value="">--</option>
                %for year in UserProfile.VALID_YEARS:
                <option value="${year}">${year}</option>
                %endfor
              </select>
            </div>
            % endif
          </li>
        </ol>
      </div>

      <div class="group group-form group-form-personalinformation2">
        <h2 class="sr">${_("Optional Personal Information")}</h2>

        <ol class="list-input">
          % if 'mailing_address' in settings.REGISTRATION_OPTIONAL_FIELDS:
          <li class="field text" id="field-address-mailing">
            <label for="address-mailing">${_("Mailing Address")}</label>
            <textarea id="address-mailing" name="mailing_address" value=""></textarea>
          </li>
          % endif

          % if 'goals' in settings.REGISTRATION_OPTIONAL_FIELDS:
          <li class="field text" id="field-goals">
            <label for="goals">${_("Please share with us your reasons for registering with {platform_name}").format(platform_name=settings.PLATFORM_NAME)}</label>
            <textarea id="goals" name="goals" value=""></textarea>
          </li>
          % endif
        </ol>
      </div>

      <div class="group group-form group-form-accountacknowledgements">
        <h2 class="sr">${_("Account Acknowledgements")}</h2>

        <ol class="list-input">
          <li class="field-group">

            % if has_extauth_info is UNDEFINED or ask_for_tos :

            <div class="field required checkbox" id="field-tos">
              <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" required aria-required="true" />
              <label for="tos-yes">${_('I agree to the {link_start}Terms of Service{link_end}').format(
                link_start='<a href="{url}" class="new-vp">'.format(url=marketing_link('TOS')),
                link_end='</a>')}</label>
            </div>

            % endif

            <div class="field required checkbox" id="field-honorcode">
              <input id="honorcode-yes" type="checkbox" name="honor_code" value="true" />
              <%
                ## TODO: provide a better way to override these links
                if self.stanford_theme_enabled():
                  honor_code_path = marketing_link('TOS') + "#honor"
                else:
                  honor_code_path = marketing_link('HONOR')
              %>
              <label for="honorcode-yes">${_('I agree to the {link_start}Honor Code{link_end}').format(
                link_start='<a href="{url}" class="new-vp">'.format(url=honor_code_path),
                link_end='</a>')}</label>
            </div>
          </li>
        </ol>
      </div>

% 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">${_('Register')} <span class="orn-plus">+</span> ${_('Create My Account')}</button>
      </div>
    </form>
  </section>

  <aside role="complementary">
    <header>
      <h3 class="sr">${_("Registration Help")}</h3>
    </header>

    % if has_extauth_info is UNDEFINED:

    <div class="cta">
      <h3>${_("Already registered?")}</h3>
      <p class="instructions">
        <a href="${reverse('signin_user')}${login_query()}">
          ${_("Click here to log in.")}
        </a>
      </p>
    </div>

    % endif

    ## TODO: Use a %block tag or something to allow themes to
    ##       override in a more generalizable fashion.
    % if not self.stanford_theme_enabled():
      <div class="cta cta-welcome">
        <h3>${_("Welcome to {platform_name}").format(platform_name=settings.PLATFORM_NAME)}</h3>
        <p>${_("Registering with {platform_name} gives you access to all of our current and future free courses. Not ready to take a course just yet? Registering puts you on our mailing list - we will update you as courses are added.").format(platform_name=settings.PLATFORM_NAME)}</p>
      </div>
    % endif

    <div class="cta cta-nextsteps">
      <h3>${_("Next Steps")}</h3>
      % if self.stanford_theme_enabled():
        <p>${_("You will receive an activation email.  You must click on the activation link to complete the process.  Don't see the email?  Check your spam folder and mark emails from class.stanford.edu as 'not spam', since you'll want to be able to receive email from your courses.")}</p>
      % else:
      <p>${_("As part of joining {platform_name}, you will receive an activation email.  You must click on the activation link to complete the process.  Don't see the email?  Check your spam folder and mark {platform_name} emails as 'not spam'.  At {platform_name}, we communicate mostly through email.").format(platform_name=settings.PLATFORM_NAME)}</p>
      % endif
    </div>

    % if settings.MKTG_URL_LINK_MAP.get('FAQ'):
      <div class="cta cta-help">
        <h3>${_("Need Help?")}</h3>
        <p>${_("Need help in registering with {platform_name}?").format(platform_name=settings.PLATFORM_NAME)}
          <a href="${marketing_link('FAQ')}">
              ${_("View our FAQs for answers to commonly asked questions.")}
          </a>
          ${_("Once registered, most questions can be answered in the course specific discussion forums or through the FAQs.")}</p>
      </div>
    % endif
  </aside>
</section>
