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

<%block name="bodyclass">midcourse-reverification-process is-not-verified step-photos register</%block>
<%block name="pagetitle">${_("Re-Verify")}</%block>

<%block name="js_extra">
<script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.js')}"></script>
<script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.keybd.js')}"></script>
<script src="${static.url('js/verify_student/photocapture.js')}"></script>
</%block>


<%block name="content">

<div id="no-webcam" style="display: none;" 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">${_("No Webcam Detected")}</h3>
      <div class="copy">
        <p>${_("You don't seem to have a webcam connected. Double-check that your webcam is connected and working to continue.")}</p>
      </div>
    </div>
  </div>
</div>

<div id="no-flash" style="display: none;" 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">${_("No Flash Detected")}</h3>
      <div class="copy">
        <p>${_("You don't seem to have Flash installed. {a_start} Get Flash {a_end} to continue your registration.").format(a_start='<a rel="external" href="http://get.adobe.com/flashplayer/">', a_end="</a>")}</p>
      </div>
    </div>
  </div>
</div>

%if error:
<div id="submission-error" 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">${_("Error submitting your images")}</h3>
      <div class="copy">
        <p>${_("Oops! Something went wrong. Please confirm your details and try again.")}</p>
      </div>
    </div>
  </div>
</div>
%endif

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

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

        <section class="wrapper">

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

          <div id="wrapper-facephoto" class="wrapper-view block-photo">
            <div class="facephoto view">
              <h3 class="title">${_("Re-Take Your Photo")}</h3>
              <div class="instruction">
                <p>${_("Use your webcam to take a picture of your face so we can match it with your original verification.")}</p>
              </div>

              <div class="wrapper-task">

                <div id="facecam" class="task cam">
                  <div class="placeholder-cam" id="face_capture_div">

                    <div class="placeholder-art">
                      <p class="copy">${_("Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission.")}</p>
                    </div>

                    <video id="face_video" autoplay></video><br/>
                    <canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
                  </div>

                  <div class="controls photo-controls">
                    <ul class="list-controls">
                      <li class="control control-redo" id="face_reset_button">
                        <a class="action action-redo" href="">
                          <i class="icon fa fa-undo"></i> <span class="sr">${_("Retake")}</span>
                        </a>
                      </li>

                      <li class="control control-do" id="face_capture_button">
                        <a class="action action-do" href="">
                          <i class="icon fa fa-camera"></i><span class="sr">${_("Take photo")}</span>
                        </a>
                      </li>

                      <li class="control control-approve" id="face_approve_button">
                        <a class="action action-approve" href="">
                          <i class="icon fa fa-check-square-o"></i> <span class="sr">${_("Looks good")}</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>

                <div class="wrapper-help">
                  <div class="help help-task photo-tips facetips">
                    <h4 class="title">${_("Tips on taking a successful photo")}</h4>

                    <div class="copy">
                      <ul class="list-help">
                        <li class="help-item">${_("Make sure your face is well-lit")}</li>
                        <li class="help-item">${_("Be sure your entire face is inside the frame")}</li>
                        <li class="help-item">${_("Can we match the photo you took with the one on your ID?")}</li>
                        <li class="help-item">${_("Once in position, use the camera button")} <span class="example">(<i class="icon fa fa-camera"></i>)</span> ${_("to capture your picture")}</li>
                        <li class="help-item">${_("Use the checkmark button")} <span class="example">(<i class="icon fa fa-check-square-o"></i>)</span> ${_("once you are happy with the photo")}</li>
                      </ul>
                    </div>
                  </div>

                  <div class="help help-faq facefaq">
                    <h4 class="sr title">${_("Common Questions")}</h4>

                    <div class="copy">
                      <dl class="list-faq">
                        <dt class="faq-question">${_("Why do you need my photo?")}</dt>
                        <dd class="faq-answer">${_("As part of the verification process, we need your photo to confirm that you are you.")}</dd>

                        <dt class="faq-question">${_("What do you do with this picture?")}</dt>
                        <dd class="faq-answer">${_("We only use it to verify your identity.  It is not displayed anywhere.")}</dd>
                      </dl>
                    </div>
                  </div>
                </div>
              </div>


              <div class="review-task review-task-name">

                <h4 class="title">${_("Check Your Name")}</h4>

                <div class="copy">
                  <p>${_("Make sure your full name on your {platform_name} account ({full_name}) matches the ID you originally submitted. We will also use this as the name on your certificate.").format(
                    full_name="<span id='full-name'>{name}</span>".format(name=user_full_name),
                    platform_name=settings.PLATFORM_NAME,
                  )}</p>
                </div>

                <ul class="list-actions">
                  <li class="action action-editname">
                    <a class="edit-name" rel="leanModal" href="#edit-name">${_("Edit your name")}</a>
                  </li>
                </ul>
              </div>


              <img id="face_image" src="" style="display: none;"/>

              <nav class="nav-wizard" id="face_id_next_button_nav" aria-label="${_('Verification')}">
                <div class="prompt-verify">
                  <h3 class="title">Before proceeding, please review carefully</h3>

                   <p class="copy"> ${_("Once you verify your photo looks good and your name is correct, you can finish your re-verification and return to your course.  <strong>Note: You will not have another chance to re-verify.</strong>")}</p>

                  <ul class="list-actions">
                    <li class="action action-verify">
                      <input type="checkbox" name="match" id="confirm_pics_good" />
                      <label for="confirm_pics_good">${_("Yes! You can confirm my identity with this information.")}</label>
                    </li>
                  </ul>
                </div>

                <ol class="wizard-steps">
                  <li class="wizard-step step-proceed">
                    <form id="reverify_form" method="post">
                      <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
                      <input type="hidden" name="course_id" value="${course_id | h}">
                      <input class="action-primary disabled" type="button" id="midcourse_reverify_button" value="${_('Submit photos &amp; re-verify')}" name="payment">
                    </form>
                  </li>
                </ol>
              </nav>
            </div> <!-- /view -->
          </div> <!-- /wrapper-view -->
        </section>
      </article>
    </div> <!-- /wrapper-content-main -->

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

<%include file="_modal_editname.html" />
</%block>
