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

<%namespace name='static' file='static_content.html'/>
<%! from django.core.urlresolvers import reverse %>
<%! from django_countries.countries import COUNTRIES %>
<%! from student.models import UserProfile %>
<%! from datetime import date %>
<%! import calendar %>

<script>
jQuery(function($){
  $("#contact-phone").mask("(999) 999-9999");
});

$(document).ready(function(){
  $('#work-occupation').change(function(){
    $('#work-occupation2')[$(this).val()=='other' ? 'show' : 'hide']();
  });
  $('#work-occupation-other').change(function(){
    $('#work-occupation-other2')[$(this).val()=='other' ? 'show' : 'hide']();
  });
});

</script>

<section id="signup-modal" class="modal signup-modal">
  <div class="inner-wrapper">
    <div id="register" class="register">
      <header>
        <h2>${_('Sign Up for {span_start}{platform_name}{span_end}').format(span_start='<span class="edx">', span_end='</span>', platform_name=settings.PLATFORM_NAME)}</h2>
        <hr>
      </header>

      <form id="register_form" class="register_form" method="post" data-remote="true" action="/create_account">
        <div class="notice"></div>
        <div id="register_error" class="modal-form-error" name="register_error"></div>
        <div id="register_error" name="register_error"></div>

        <div class="input-group">
          <span class="field required text" id="field-lastname">
          <label data-field="email" for="signup_email">${_('E-mail')}</label>
	       <input id="signup_email" type="email" name="email" placeholder="${_('e.g. yourname@domain.com')}" required />
          </span>
          <span class="field required text" id="field-password">
          <label data-field="password" for="signup_password">${_('Password')}</label>
	    <input id="signup_password" type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" required aria-required="true" />
          </span>
        </div>

        <div class="input-group">
          <span class="field required text" id="field-lastname">
            <label for="lastname">${_('Lastname')}</label>
            <input id="lastname" type="text" name="lastname" value="" required aria-required="true" />
          </span>
            <span class="field required text" id="field-firstname">
            <label for="firstname">${_('Firstname')}</label>
            <input id="firstname" type="text" name="firstname" value="" required aria-required="true" />
          </span>
          <span class="field required text" id="field-middlename">
            <label for="middlename">${_('Middlename')}</label>
            <input id="middlename" type="text" name="middlename" value="" required aria-required="true" />
          </span>
          <span 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>
            </span>
          <span 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>
            </span>
          <span 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" />
          </span>
          <span 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" required aria-required="true">
                <option value="">--</option>
                %for year in UserProfile.VALID_YEARS:
                <option value="${year}">${year}</option>
                %endfor
              </select>
            </span>
          
          <span class="field text" id="field-education-qualification">
            <label for="education-qualification">${_('Diploma qualification')}</label>
            <input id="education-qualification" type="text" name="education_qualification" value="" />
          </span>
          <span class="field text" id="field-education-specialty">
            <label for="education-specialty">${_('Diploma specialty')}</label>
            <input id="education-specialty" type="text" name="education_specialty" value="" />
          </span>


          <div class="input-group">
          <span class="field required select" id="field-work-type">
            <label for="work-type">${_("Type of educational institution")}</label>
        <select id="work-type" name="work_type" required aria-required="true">
          <option value="">--</option>
          %for code, wo_type in UserProfile.WORK_TYPE_CHOICES:
          <option value="${code}">${_(wo_type)}</option>
          %endfor
        </select>
          </span>
          <span 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="" placeholder="${_('e.g. 9999')}" required aria-required="true" />
            <span style="
    display: block;
    /* text-align: right; */
    font-size: smaller;
    color: gray;
    top: -10px;
    position: relative;
">Если образовательное не имеет номера, введите 0000</span>
          </span>
          <span 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="" placeholder="${_('e.g. School of art')}" required aria-required="true" />
          </span>
          <span 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="" placeholder="${_('e.g. sch9999')}" required aria-required="true" />
            <span style="
    display: block;
    /* text-align: right; */
    font-size: smaller;
    color: gray;
    top: -10px;
    position: relative;
">Логин образовательного учреждения можно узнать у администрации ОУ. Если у Вашего образовательного учреждения нет логина в системе СтатГрад, укажите sch9876.</span>
          </span>
          <span 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>
          </span>
          <span class="field required select" id="field-work-occupation">
        <label for="work-occupation">${_("Occupation at educational institution")}</label>
        <select id="work-occupation" name="work_occupation" required aria-required="true">
          <option value="">--</option>
          %for code, wo_occ in UserProfile.WORK_OCCUPATION_CHOICES:
          <option value="${code}">${_(wo_occ)}</option>
          %endfor
        </select>
        <input id="work-occupation2" type="text" name="work_occupation2" value="" style="display:none"/>
          </span>
          <span 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>
        <input id="work-occupation-other2" type="text" name="work_occupation_other2" value="" style="display:none"/>
          </span>
          <span 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" />
          </span>
          <span 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=""/>
          </span>
          <span 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" required aria-required="true">
          <option value="">--</option>
          %for code, wo_qua in UserProfile.WORK_QUALIFICATION_CATEGORY_CHOICES:
          <option value="${code}">${_(wo_qua)}</option>
          %endfor
        </select>
          </span>
          <span class="field text" id="field-work-qualification-category-year">
            <label for="work-qualification-category-year">${_('Qualification category year')}</label>
            <select id="work-qualification-category-year" name="work_qualification_category_year" required aria-required="true">
              <option value="">--</option>
              <option value="2013">2013</option>
              <option value="2012">2012</option>
              <option value="2011">2011</option>
              <option value="2010">2010</option>
              <option value="2009">2009</option>
              <option value="2008">2008</option>
              <option value="2007">2007</option>
              <option value="2006">2006</option>
              <option value="2005">2005</option>
              <option value="2004">2004</option>
              <option value="2003">2003</option>
              <option value="2002">2002</option>
              <option value="2001">2001</option>
              <option value="2000">2000</option>
              <option value="0">раннее 2000</option>
              <option value="-1">не присваивалась</option>
            </select>
          </span>
        </div>
        <div class="input-group">
          <span class="field required text" id="field-contact-phone">
            <label for="contact-phone">${_('Contact phone')}</label>
            <input id="contact-phone" type="text" name="contact_phone" value="" placeholder="например (909) 123-4567" required aria-required="true" />
          </span>
        </div>
        </div>

            <input id="signup_tos" name="terms_of_service" type="hidden" value="true">
            <input id="signup_honor" name="honor_code" type="hidden" value="true">
        
<!--
        <div class="input-group">
          <label data-field="terms_of_service" class="terms-of-service" for="signup_tos">
            <input id="signup_tos" name="terms_of_service" type="checkbox" value="true">
            ${_('I agree to the {link_start}Terms of Service{link_end}*').format(
              link_start='<a href="{url}" target="_blank">'.format(url=reverse('tos')),
              link_end='</a>')}
          </label>

          <label data-field="honor_code" class="honor-code" for="signup_honor">
            <input id="signup_honor" name="honor_code" type="checkbox" value="true">
            ${_('I agree to the {link_start}Honor Code{link_end}*').format(
              link_start='<a href="{url}" target="_blank">'.format(url=reverse('honor')),
              link_end='</a>')}
          </label>
        </div>-->

        <div class="submit">
          <input name="submit" type="submit" value="${_('Create My Account')}">
        </div>
      </form>

      % if has_extauth_info is UNDEFINED:
      <section class="login-extra">
        <p>
          <span>${_("Already have an account?")} <a href="#login-modal" class="close-signup" rel="leanModal">${_("Login.")}</a></span>
        </p>
      </section>
      % endif

    </div>

    <a href="#" class="close-modal" title="${_('Close Modal')}">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </a>
  </div>
</section>

<script type="text/javascript">
  (function() {
   $(document).delegate('#register_form', 'ajax:success', function(data, json, xhr) {
     if(json.success) {
       location.href="${reverse('dashboard')}";
     } else {
       $(".field-error").removeClass('field-error');
       $('#register_error').html(json.value).stop().css("display", "block");
       $("[data-field='"+json.field+"']").addClass('field-error')
     }
    });

   // removing close link's default behavior
   $('#login-modal .close-modal').click(function(e) {
    e.preventDefault();
   });
  })(this)
</script>
