choose.html

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

<%block name="bodyclass">register verification-process step-select-track ${'is-upgrading' if upgrade else ''}</%block>
<%block name="title">
  <title>
    %if upgrade:
      ${_("Upgrade Your Registration for {} | Choose Your Track").format(course_name)}
    %else:
      ${_("Register for {} | Choose Your Track").format(course_name)}
    %endif
  </title>
</%block>

<%block name="js_extra">
<script type="text/javascript">

$(document).ready(function() {
  $('.expandable-area').slideUp();
  $('.is-expandable').addClass('is-ready');
  $('.is-expandable .title-expand').click(function(e) {
      e.preventDefault();
      $(this).next('.expandable-area').slideToggle();
      $(this).parent().toggleClass('is-expanded');
  });

  $('#contribution-other-amt').focus(function() {
    $('#contribution-other').attr('checked',true);
  });

});
</script>
</%block>

<%block name="content">

%if error:
<div class="wrapper-msg wrapper-msg-error">
  <div class=" msg msg-error">
    <i class="msg-icon icon-warning-sign"></i>
    <div class="msg-content">
      <h3 class="title">${_("Sorry, there was an error when trying to register you")}</h3>
      <div class="copy">
        <p>${error}</p>
      </div>
    </div>
  </div>
</div>
%endif

<div class="container">
  <section class="wrapper">

    <%include file="/verify_student/_verification_header.html" args="course_name=course_name" />

    <div class="wrapper-register-choose wrapper-content-main">
      <article class="register-choose content-main">

        %if not upgrade:
        <h3 class="title">${_("Select your track:")}</h3>
        %endif

        <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">

          % if "verified" in modes:
          <div class="register-choice register-choice-certificate">
            <div class="wrapper-copy">
              <span class="deco-ribbon"></span>
              <h4 class="title">${_("Certificate of Achievement (ID Verified)")}</h4>

              %if upgrade:
                <div class="copy">
                  <p>${_("Upgrade and work toward a verified Certificate of Achievement.")}</p>
                </div>
              %else:
                <div class="copy">
                  <p>${_("Sign up and work toward a verified Certificate of Achievement.")}</p>
                </div>
              %endif
            </div>

            <div class="field field-certificate-contribution">
              <h5 class="label">${_("Select your contribution for this course (min. $")} ${min_price} <span class="denomination-name">${currency}</span>${_("):")}</h5>

              %if error:
              <div class="msg msg-error msg-inline">
                <div class="copy">
                  <p><i class="msg-icon icon-warning-sign"></i> ${error}</p>
                </div>
              </div>
              %endif

              <%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price, min_price=min_price"/>

              <div class="help-tip is-expandable">
                <h5 class="title title-expand"><i class="icon-caret-down expandable-icon"></i> ${_("Why do I have to pay? What if I don't meet all the requirements?")}</h5>

                <div class="copy expandable-area">
                  <dl class="list-faq">
                    <dt class="faq-question">${_("Why do I have to pay?")}</dt>
                    <dd class="faq-answer">
                      <p>${_("As a not-for-profit, edX uses your contribution to support our mission to provide quality education to everyone around the world, and to improve learning through research. While we have established a minimum fee, we ask that you contribute as much as you can.")}</p>
                    </dd>

                    <dt class="faq-question">${_("I'd like to pay more than the minimum.  Is my contribution tax deductible?")}</dt>
                    <dd class="faq-answer">
                      <p>${_("Please check with your tax advisor to determine whether your contribution is tax deductible.")}</p>
                    </dd>

                    % if "honor" in modes:
                    <dt class="faq-question">${_("What if I can't afford it or don't have the necessary equipment?")}</dt>
                    <dd class="faq-answer">
                      <p>${_("If you can't afford the minimum fee or don't meet the requirements, you can audit the course or elect to pursue an honor code certificate at no cost. If you would like to pursue the honor code certificate, please check the honor code certificate box, tell us why you can't pursue the verified certificate below, and then click the 'Select Certificate' button to complete your registration.")}</p>

                      <ul class="list-fields">
                        <li class="field field-honor-code checkbox">
                          <input type="checkbox" name="honor-code" id="honor-code">
                          <label for="honor-code">${_("Select Honor Code Certificate")}</label>
                        </li>

                        <li class="field field-explain">
                          <label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Please write a few sentences about why you'd like to opt out of the paid verified certificate to pursue the honor code certificate:")}</label>
                          <textarea name="explain"></textarea>
                        </li>
                      </ul>
                    </dd>
                    % endif
                  </dl>
                </div>
              </div>
            </div>

            <ul class="list-actions">
              <li class="action action-select">
                %if upgrade:
                <input type="submit" name="certificate_mode" value="${_('Upgrade Your Registration')}" />
                %else:
                <input type="submit" name="certificate_mode" value="${_('Select Certificate')}" />
                %endif

              </li>
            </ul>
          </div>

          <div class="help help-register">
            <h3 class="title">${_("Verified Registration Requirements")}</h3>

            %if upgrade:
              <div class="copy">
                <p>${_("To upgrade your registration and work towards a Verified Certificate of Achievement, you will need a webcam, a credit or debit card, and an ID.")}</p>
              </div>
            %else:
              <div class="copy">
                <p>${_("To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID.")}</p>
              </div>
            %endif

            <h3 class="title">${_("What is an ID Verified Certificate?")}</h3>
            <div class="copy">
              <p>${_("An ID Verified Certificate requires proof of your identity through your photo and ID and is checked throughout the course to verify that it is you who earned the passing grade.")}</p>
            </div>
          </div>
          % endif

          %if not upgrade:

            % if "audit" in modes:
            <span class="deco-divider">
              <span class="copy">${_("or")}</span>
            </span>
            <div class="register-choice register-choice-audit">
              <div class="wrapper-copy">
                <h4 class="title">${_("Audit This Course")}</h4>
                <div class="copy">
                  <p>${_("Sign up to audit this course for free and track your own progress.")}</p>
                </div>
              </div>

              <ul class="list-actions">
                <li class="action action-select">
                <input type="submit" name="audit_mode" value="${_('Select Audit')}" />
                </li>
              </ul>
            </div>
            % endif

          %endif

          <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
        </form>
      </article>
    </div> <!-- /wrapper-content-main -->

    <%include file="/verify_student/_verification_support.html" />
  </section>
</div>
</%block>