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

<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements ${'is-upgrading' if upgrade else ''}</%block>
<%block name="pagetitle">
    %if upgrade:
      ${_("Upgrade Your Registration for {}").format(course_name)}
    %else:
      ${_("Register for {}").format(course_name)}
    %endif
</%block>

<%block name="content">
%if is_not_active:
<div class="wrapper-msg wrapper-msg-activate">
  <div class=" msg msg-activate">
    <i class="msg-icon fa fa-warning"></i>
    <div class="msg-content">
      <h3 class="title">${_("You need to activate your {platform_name} account before proceeding").format(platform_name=settings.PLATFORM_NAME)}</h3>
      <div class="copy">
        <p>${_("Please check your email for further instructions on activating your new account.")}</p>
      </div>
    </div>
  </div>
</div>
%endif

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

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

    <div class="wrapper-progress">
      <section class="progress">
        <h3 class="sr title">${_("Your Progress")}</h3>

        <ol class="progress-steps">
          <li class="progress-step is-current" id="progress-step0">
            <span class="wrapper-step-number"><span class="step-number">0</span></span>
            <span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Intro")}</span>
          </li>

          <li class="progress-step" id="progress-step1">
            <span class="wrapper-step-number"><span class="step-number">1</span></span>
            <span class="step-name">${_("Take Photo")}</span>
          </li>

          <li class="progress-step" id="progress-step2">
            <span class="wrapper-step-number"><span class="step-number">2</span></span>
            <span class="step-name">${_("Take ID Photo")}</span>
          </li>

          <li class="progress-step" id="progress-step3">
            <span class="wrapper-step-number"><span class="step-number">3</span></span>
            <span class="step-name">${_("Review")}</span>
          </li>

          <li class="progress-step" id="progress-step4">
            <span class="wrapper-step-number"><span class="step-number">4</span></span>
            <span class="step-name">${_("Make Payment")}</span>
          </li>

          <li class="progress-step progress-step-icon" id="progress-step5">
            <span class="wrapper-step-number"><span class="step-number">
              <i class="icon fa fa-check-square-o"></i>
            </span></span>
            <span class="step-name">${_("Confirmation")}</span>
          </li>
        </ol>

        <span class="progress-sts">
          <span class="progress-sts-value"></span>
        </span>
      </section>
    </div>


    <div class="wrapper-content-main">
      <article class="content-main">
        %if upgrade:
          <h3 class="title">${_("What You Will Need to Upgrade")}</h3>

          <div class="instruction">
            <p>${_("There are three things you will need to upgrade to being an ID verified student:")}</p>
          </div>
        %else:
          <h3 class="title">${_("What You Will Need to Register")}</h3>

          <div class="instruction">
            <p>${_("There are three things you will need to register as an ID verified student:")}</p>
          </div>
        %endif

        <ul class="list-reqs ${"account-not-activated" if is_not_active else ""}">
          %if is_not_active:
          <li class="req req-0 req-activate">
            <h4 class="title">${_("Activate Your Account")}</h4>
            <div class="placeholder-art">
              <i class="icon fa fa-envelope-o"></i>
            </div>

            <div class="copy">
              <p>
                <span class="copy-super">${_("Check your email")}</span>
                <span class="copy-sub">${_("You need to activate your {platform_name} account before you can register for courses. Check your inbox for an activation email.").format(platform_name=settings.PLATFORM_NAME)}</span>
              </p>
            </div>
          </li>
          %endif

          <li class="req req-1 req-id">
            <h4 class="title">${_("Identification")}</h4>
            <div class="placeholder-art">
              <span class="fa-stack">
                <i class="icon fa fa-list-alt fa-stack-2x"></i>
                <i class="icon fa fa-user fa-stack-1"></i>
              </span>
            </div>

            <div class="copy">
              <p>
                <span class="copy-super">${_("A photo identification document")}</span>
                <span class="copy-sub">${_("A driver's license, passport, or other government or school-issued ID with your name and picture on it.")}</span>
              </p>
            </div>
          </li>

          <li class="req req-2 req-webcam">
            <h4 class="title">${_("Webcam")}</h4>
            <div class="placeholder-art">
              <i class="icon fa fa-facetime-video"></i>
            </div>

            <div class="copy">
              <p>
                <span class="copy-super">${_("A webcam and a modern browser")}</span>
                <span class="copy-sub"><strong>
                  <a rel="external" href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>,
                  <a rel="external" href="https://www.google.com/intl/en/chrome/browser/">Chrome</a>,
                  <a rel="external" href="http://www.apple.com/safari/">Safari</a>,
                  ## Translators: This phrase will look like this: "Internet Explorer 9 or later"
                  <a rel="external" href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">${_("{internet_explorer_version} or later").format(internet_explorer_version="Internet Explorer 9")}</a></strong>.
                  ${_("Please make sure your browser is updated to the most recent version possible.")}
                </span>
              </p>
            </div>
          </li>

          <li class="req req-3 req-payment">
            <h4 class="title">${_("Credit or Debit Card")}</h4>
            <div class="placeholder-art">
              <i class="icon fa fa-credit-card"></i>
            </div>

            <div class="copy">
              <p>
                <span class="copy-super">${_("A major credit or debit card")}</span>
                <span class="copy-sub">${_("Visa, MasterCard, American Express, Discover, Diners Club, or JCB with the Discover logo.")}</span>
              </p>
            </div>
          </li>
        </ul>

        <nav class="nav-wizard ${"is-not-ready" if is_not_active else "is-ready"}">

        %if can_audit:
          %if upgrade:
            <span class="help help-inline">${_("Missing something? You can always continue to audit this course instead.")}</span>
          %else:
            <span class="help help-inline">${_("Missing something? You can always {a_start}audit this course instead{a_end}").format(a_start='<a href="{}">'.format(course_modes_choose_url), a_end="</a>")}</span>
          %endif
        %endif

          <ol class="wizard-steps">
            <li class="wizard-step">
            <a class="next action-primary ${"disabled" if is_not_active else ""}" id="face_next_button" href="${verify_student_url}?upgrade=${upgrade}">${_("Go to Step 1: Take my Photo")}</a>
            </li>
          </ol>
        </nav>
      </article>
    </div> <!-- /wrapper-content-main -->

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