<%! from django.utils.translation import ugettext as _ %>
<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%! from student.models import UserProfile %>

<%block name="title">${_("Sign Up")}</%block>
<%block name="bodyclass">not-signedin signup</%block>

<%block name="content">

<div class="wrapper-content wrapper">
  <section class="content">
    <header>
      <h1 class="title title-1">${_("Sign Up for edX Studio")}</h1>
      <a href="${reverse('login')}" class="action action-signin">${_("Already have a Studio Account? Sign in")}</a>
    </header>

    <p class="introduction">${_("Ready to start creating online courses? Sign up below and start creating your first edX course today.")}</p>

    <article class="content-primary" role="main">
      <form id="register_form" method="post" action="register_post">
        <div id="register_error" name="register_error" class="message message-status message-status error">
        </div>

        <fieldset>
          <legend class="sr">${_("Required Information to Sign Up for 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">
              <label for="password">${_("Password")}</label>
              <input id="password" type="password" name="password" />
            </li>

          <li class="field required text" id="field-lastname">
            <label for="lastname">${_('Lastname')}</label>
            <input id="lastname" type="text" name="lastname" value="" required aria-required="true" />
          </li>
            <li class="field required text" id="field-firstname">
            <label for="firstname">${_('Firstname')}</label>
            <input id="firstname" type="text" name="firstname" value="" required aria-required="true" />
          </li>
          <li class="field required text" id="field-middlename">
            <label for="middlename">${_('Middlename')}</label>
            <input id="middlename" type="text" name="middlename" value="" required aria-required="true" />
          </li>
          <li class="field required 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>
            </li>
          <li class="field required 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>
            </li>
          <li class="field required text" id="field-education-place">
            <label for="education-place">${_('Place where Education Completed')}</label>
            <input id="education-place" type="text" name="education_place" value="" required aria-required="true" />
          </li>
          <li class="field required select" id="field-education-year">
              <label for="education-year">${_("Year when education was Completed")}</label>
              <select id="education-year" name="education_year">
                <option value="">--</option>
                %for year in UserProfile.VALID_YEARS:
                <option value="${year}">${year}</option>
                %endfor
              </select>
            </li>
          
          <li class="field text" id="field-education-qualification">
            <label for="education-qualification">${_('Diploma qualification')}</label>
            <input id="education-qualification" type="text" name="education_qualification" value="" required aria-required="true" />
          </li>
          <li class="field text" id="field-education-specialty">
            <label for="education-specialty">${_('Diploma specialty')}</label>
            <input id="education-specialty" type="text" name="education_specialty" value="" required aria-required="true" />
          </li>
          <li class="field required select" id="field-work-type">
            <label for="work-type">${_("Type of educational institution")}</label>
        <select id="work-type" name="work_type">
          <option value="">--</option>
          %for code, wo_type in UserProfile.WORK_TYPE_CHOICES:
          <option value="${code}">${_(wo_type)}</option>
          %endfor
        </select>
          </li>
          <li class="field required text" id="field-work-number">
            <label for="work-number">${_('Number of educational institution')}</label>
            <input id="work-number" type="text" name="work_number" value="" required aria-required="true" />
          </li>
          <li class="field required text" id="field-work-name">
            <label for="work-name">${_('Name of educational institution')}</label>
            <input id="work-name" type="text" name="work_name" value="" required aria-required="true" />
          </li>
          <li class="field required text" id="field-work-login">
            <label for="work-login">${_('StatGrad login of educational institution')}</label>
            <input id="work-login" type="text" name="work_login" value="" required aria-required="true" />
          </li>
          <li class="field required select" id="field-work-location">
        <label for="work-location">${_("Okrug of educational institution")}</label>
        <select id="work-location" name="work_location">
          <option value="">--</option>
          %for code, wo_loc in UserProfile.WORK_LOCATION_CHOICES:
          <option value="${code}">${_(wo_loc)}</option>
          %endfor
        </select>
          </li>
          <li class="field required select" id="field-work-occupation">
        <label for="work-occupation">${_("Occupation at educational institution")}</label>
        <select id="work-occupation" name="work_occupation">
          <option value="">--</option>
          %for code, wo_occ in UserProfile.WORK_OCCUPATION_CHOICES:
          <option value="${code}">${_(wo_occ)}</option>
          %endfor
        </select>
          </li>
          <li class="field select" id="field-work-occupation-other">
        <label for="work-occupation-other">${_("Another occupation at educational institution")}</label>
        <select id="work-occupation-other" name="work_occupation_other">
          <option value="">--</option>
          %for code, wo_occ in UserProfile.WORK_OCCUPATION_CHOICES:
          <option value="${code}">${_(wo_occ)}</option>
          %endfor
        </select>
          </li>
          <li class="field required text" id="field-work-teaching-experience">
            <label for="work-work_teaching_experience">${_('Educational experience at educational institution')}</label>
            <input id="work-work_teaching_experience" type="text" name="work_teaching_experience" value="" required aria-required="true" />
          </li>
          <li class="field text" id="field-work-managing-experience">
            <label for="work-managing-experience">${_('Managing experience at educational institution')}</label>
            <input id="work-managing-experience" type="text" name="work_managing_experience" value="" required aria-required="true" />
          </li>
          <li class="field select" id="field-work-qualification-category">
        <label for="work-qualification-category">${_("Qualification category")}</label>
        <select id="work-qualification-category" name="work_qualification_category">
          <option value="">--</option>
          %for code, wo_qua in UserProfile.WORK_QUALIFICATION_CATEGORY_CHOICES:
          <option value="${code}">${_(wo_qua)}</option>
          %endfor
        </select>
          </li>
          <li class="field text" id="field-work-qualification-category-year">
            <label for="work-qualification-category-year">${_('Qualification category year')}</label>
            <input id="work-qualification-category-year" class="short" type="text" name="work_qualification_category_year" value="" required aria-required="true" />
          </li>
          <li class="field text" id="field-contact-phone">
            <label for="contact-phone">${_('Contact phone')}</label>
            <input id="contact-phone" type="text" name="contact_phone" value="" required aria-required="true" />
          </li>

            <li class="field checkbox required" id="field-tos">
              <input id="tos" name="terms_of_service" type="checkbox" value="true" />
              <label for="tos">${_("I agree to the Terms of Service")}</label>
            </li>
          </ol>
        </fieldset>

        <div class="form-actions">
          <button type="submit" id="submit" name="submit" class="action action-primary">${_("Create My Account &amp; Start Authoring Courses")}</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">${_("Common Studio Questions")}</h2>

      <div class="bit">
        <h3 class="title-3">${_("Who is Studio for?")}</h3>
        <p>${_("Studio is for anyone that wants to create online courses that leverage the global edX platform. Our users are often faculty members, teaching assistants and course staff, and members of instructional technology groups.")}</p>
      </div>

      <div class="bit">
        <h3 class="title-3">${_("How technically savvy do I need to be to create courses in Studio?")}</h3>
        <p>${_("Studio is designed to be easy to use by almost anyone familiar with common web-based authoring environments (Wordpress, Moodle, etc.). No programming knowledge is required, but for some of the more advanced features, a technical background would be helpful. As always, we are here to help, so don't hesitate to dive right in.")}</p>
      </div>

      <div class="bit">
        <h3 class="title-3">${_("I've never authored a course online before. Is there help?")}</h3>
        <p>${_("Absolutely. We have created an online course, edX101, that describes some best practices: from filming video, creating exercises, to the basics of running an online course. Additionally, we're always here to help, just drop us a note.")}</p>
      </div>
    </aside>
  </section>
</div>
</%block>

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

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


      function getCookie(name) {
        return $.cookie(name);
      }

      // form validation
      function postJSON(url, data, callback) {
        $.ajax({type:'POST',
          url: url,
          dataType: 'json',
          data: data,
          success: callback,
          headers : {'X-CSRFToken':getCookie('csrftoken')}
        });
      }

      $('form#register_form').submit(function(e) {
        e.preventDefault();
        var submit_data = $('#register_form').serialize();

        postJSON('/create_account',
          submit_data,
          function(json) {
            if(json.success) {
              location.href = "${reverse('index')}";
            } else {
              $('#register_error').html(json.value).stop().addClass('is-shown');
            }
          }
        );
      });
    })(this)
  </script>
</%block>
