<%! 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="pagetitle">
    %if upgrade:
      ${_("Upgrade Your Registration for {} | Choose Your Track").format(course_name)}
    %else:
      ${_("Register for {} | Choose Your Track").format(course_name)}
    %endif
</%block>

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

var expandCallback = function(event) {
  event.preventDefault();
  $(this).next('.expandable-area').slideToggle();
  var title = $(this).parent();
  title.toggleClass('is-expanded');
  if (title.attr("aria-expanded") === "false") {
    title.attr("aria-expanded", "true");
  } else {
    title.attr("aria-expanded", "false");
  }
}

$(document).ready(function() {
  $('.expandable-area').slideUp();
  $('.is-expandable').addClass('is-ready');

  $('.is-expandable .title-expand').click(expandCallback);
  $('.is-expandable .title-expand').keypress(function(e) {
    if (e.which == 13) {  // only activate on pressing enter
      expandCallback.call(this, e); // make sure that we bind `this` correctly
    }
  });

  $('#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>
              %if verified_name == "Verified Certificate":
                <h4 class="title">${_("Certificate of Achievement (ID Verified)")}</h4>
              %else:
                <h4 class="title">${verified_name}</h4>
              %endif

              %if verified_name == "Verified Certificate":
                %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
              %else:
                    <div class="copy">
                    <p>${verified_description}</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" tabindex="0" aria-expanded="false" role="link">
                  <i class="icon-caret-down expandable-icon"></i>
                  ${_("Why do I have to pay? What if I want a free honor code certificate?")}
                </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 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>
                      </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>
