<%!
import json
from django.utils.translation import ugettext as _
from verify_student.views import PayAndVerifyView
%>
<%namespace name='static' file='../static_content.html'/>

<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements</%block>

<%block name="pagetitle">
  % if message_key == PayAndVerifyView.UPGRADE_MSG:
    ${_("Upgrade Your Enrollment For {course_name}.").format(course_name=course.display_name)}
  % elif message_key == PayAndVerifyView.PAYMENT_CONFIRMATION_MSG:
    ${_("Receipt For {course_name}").format(course_name=course.display_name)}
  % elif message_key in [PayAndVerifyView.VERIFY_NOW_MSG, PayAndVerifyView.VERIFY_LATER_MSG]:
    ${_("Verify For {course_name}").format(course_name=course.display_name)}
  % else:
    ${_("Enroll In {course_name}").format(course_name=course.display_name)}
  % endif
</%block>

<%block name="header_extras">
    <%
      template_names = (
          ["webcam_photo", "image_input", "error"] +
          [step['templateName'] for step in display_steps]
      )
    %>
    % for template_name in template_names:
        <script type="text/template" id="${template_name}-tpl">
            <%static:include path="verify_student/${template_name}.underscore" />
        </script>
    % endfor
</%block>
<%block name="js_extra">
  <%static:js group='rwd_header_footer'/>
  <script src="${static.url('js/vendor/underscore-min.js')}"></script>
  <script src="${static.url('js/vendor/underscore.string.min.js')}"></script>
  <script src="${static.url('js/vendor/backbone-min.js')}"></script>
  <script src="${static.url('js/src/tooltip_manager.js')}"></script>
  <%static:js group='verify_student'/>
</%block>

<%block name="content">
## Top-level wrapper for errors
## JavaScript views may append to this wrapper
<div id="error-container" style="display: none;"></div>

<div class="container">
  <section class="wrapper carousel">
    ## Payment / Verification flow
    ## Most of these data attributes are used to dynamically render
    ## the steps, but some are just useful for A/B test setup.
    <div
      id="pay-and-verify-container"
      class="pay-and-verify"
      data-full-name='${user_full_name}'
      data-platform-name='${platform_name}'
      data-course-key='${course_key}'
      data-course-name='${course.display_name}'
      data-course-start-date='${course.start_datetime_text()}'
      data-courseware-url='${courseware_url}'
      data-course-mode-name='${course_mode.name}'
      data-course-mode-slug='${course_mode.slug}'
      data-course-mode-min-price='${course_mode.min_price}'
      data-course-mode-suggested-prices='${course_mode.suggested_prices}'
      data-course-mode-currency='${course_mode.currency}'
      data-contribution-amount='${contribution_amount}'
      data-purchase-endpoint='${purchase_endpoint}'
      data-verification-deadline='${verification_deadline}'
      data-display-steps='${json.dumps(display_steps)}'
      data-current-step='${current_step}'
      data-requirements='${json.dumps(requirements)}'
      data-msg-key='${message_key}'
      data-is-active='${is_active}'
    ></div>

    % if is_active:
    ## Support
    <div class="wrapper-content-supplementary">
      <aside class="content-supplementary">
          <ul class="list-help">
              <li class="help-item help-item-questions">
                  <h3 class="title">${_("Have questions?")}</h3>
                  <div class="copy">
                      <p>${_("Please read {a_start}our FAQs to view common questions about our certificates{a_end}.").format(a_start='<a rel="external" href="'+ marketing_link('WHAT_IS_VERIFIED_CERT') + '">', a_end="</a>")}</p>
                  </div>
              </li>

              % if PayAndVerifyView.WEBCAM_REQ in requirements:
              <li class="help-item help-item-technical">
                  <h3 class="title">${_("Technical Requirements")}</h3>
                  <div class="copy">
                      <p>${_("Please make sure your browser is updated to the {a_start}most recent version possible{a_end}. Also, please make sure your <strong>webcam is plugged in, turned on, and allowed to function in your web browser (commonly adjustable in your browser settings).</strong>").format(a_start='<strong><a rel="external" href="http://browsehappy.com/">', a_end="</a></strong>")}</p>
                  </div>
              </li>
              % endif
          </ul>
        </aside>
    </div>
    % endif

  </section>
</div>
</%block>
