<%! 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" />

## TODO (ECOM-16): This is part of an AB-test of auto-registration.
## Once the test completes, we can make the winning configuration the default
## and remove this flag.
    %if not autoreg:
    <!-- /experiment-control -->
    <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>

            <ul class="list-actions">
              <li class="action action-select">
                %if upgrade:
                <input type="submit" name="verified_mode" value="${_('Upgrade Your Registration')}" />
                %else:
                <input type="submit" name="verified_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 "honor" in modes:
            <span class="deco-divider">
              <span class="copy">${_("or")}</span>
            </span>
            <div class="register-choice register-choice-audit">
              <div class="wrapper-copy">
                <span class="deco-ribbon"></span>
                <h4 class="title">${_("Audit This Course")}</h4>
                <div class="copy">
                  <p>${_("Audit this course for free and have complete access to all the course material, activities, tests, and forums. If your work is satisfactory and you abide by the Honor Code, you'll receive a personalized Honor Code Certificate to showcase your achievement.")}</p>
                </div>
              </div>

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

          %endif

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

    %else:
    <!-- /experiment-variant-A -->
    <div class="wrapper-register-choose wrapper-content-main exp-variant-A">
      <article class="register-choose content-main">

        %if not upgrade:
        <h3 class="title">${_("Now choose your course 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">${_("Pursue a Verified Certificate")}</h4>

                %if upgrade:
                  <div class="copy">
                    <p>${_("Plan to use your completed coursework for job applications, career advancement, or school applications? Upgrade to work toward a Verified Certificate of Achievement to document your accomplishment. A minimum fee applies.")}</p>
                  </div>
                %else:
                  <div class="copy">
                    <p>${_("Plan to use your completed coursework for job applications, career advancement, or school applications? Then work toward a Verified Certificate of Achievement to document your accomplishment. A minimum fee applies.")}</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"/>

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

                  </li>
                </ul>
              </div>
            </div>
          % endif

          %if not upgrade:
            % if "honor" in modes:
            <span class="deco-divider">
              <span class="copy">${_("or")}</span>
            </span>
            <div class="register-choice register-choice-audit">
              <div class="wrapper-copy">
                <span class="deco-ribbon"></span>
                <h4 class="title">${_("Audit This Course")}</h4>
                <div class="copy">
                  <p>${_("Audit this course for free and have complete access to all the course material, activities, tests, and forums. If your work is satisfactory and you abide by the Honor Code, you'll receive a personalized Honor Code Certificate to showcase your achievement.")}</p>
                </div>
              </div>

              <ul class="list-actions">
                <li class="action action-select">
                <input type="submit" name="honor_mode" value="${_('Pursue an Honor Code Certificate')}" />
                </li>
              </ul>
            </div>

            % endif

          %endif

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

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