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

<%block name="bodyclass">register verification photos</%block>

<%block name="js_extra">
<!-- please move link to js/vendor/responsive-carousel/responsive-carousel.js from main.html to here -->
  <script type="text/javascript">

$(document).ready(function() {

  $( ".carousel-nav" ).addClass('sr');

  $('.block-photo .control-redo').addClass('is-hidden');
  $('.block-photo .control-approve').addClass('is-hidden');
  $('.block-photo .m-btn-primary').addClass('disabled');


  $( "#wrapper-facephoto .control-do" ).click(function(e) {
      e.preventDefault();
      $(this).toggleClass('is-hidden');
      $('#wrapper-facephoto .control-redo').toggleClass('is-shown');
      $('#wrapper-facephoto .control-approve').toggleClass('is-shown');
  });

  $( "#wrapper-facephoto .control-approve" ).click(function(e) {
      e.preventDefault();
      $(this).addClass('approved');
      $('#wrapper-facephoto .m-btn-primary').removeClass('disabled');
  });


  $( "#wrapper-idphoto .control-do" ).click(function(e) {
      e.preventDefault();
      $(this).toggleClass('is-hidden');
      $('#wrapper-idphoto .control-redo').toggleClass('is-shown');
      $('#wrapper-idphoto .control-approve').toggleClass('is-shown');
  });

  $( "#wrapper-idphoto .control-approve" ).click(function(e) {
      e.preventDefault();
      $(this).addClass('approved');
      $('#wrapper-idphoto .m-btn-primary').removeClass('disabled');
  });


});
  </script>
</%block>


<%block name="content">
<div class="container">

  <header class="page-header">
    <h2 class="title">You are registering for [coursename] (ID Verified)</h2>
  </header>

  <section class="progress">
  <h3 class="sr">Your Progress</h3>
  <ol>
    <li class="progress-step current" id="progress-step1"><span class="sr">Current: </span>Step 1 Take Your Photo</li>
    <li class="progress-step" id="progress-step2">Step 2 ID Photo</li>
    <li class="progress-step" id="progress-step3">Step 3 Review</li>
    <li class="progress-step" id="progress-step4">Step 4 Payment</li>
    <li class="progress-step" id="progress-step5">Finished Confirmation</li>
  </ol>
  </section>



  <section class="wrapper carousel"  data-transition="slide">
    <div id="wrapper-facephoto" class="block block-photo">
      <h3 class="title">Take Your Photo</h3>
      <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>

      <div class="wrapper-up">

        <div id="facecam" class="cam">
          <div class="placeholder-cam">
          <!-- cam image -->
          <p>cam image</p>
          </div>

          <div class="controls photo-controls">
            <ul class="controls-list">
              <li class="control control-redo">
                <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">
                <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">
                <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="photo-tips facetips">
          <h4>Tips on taking a successful photo</h4>
          <ul>
            <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
            <li>Maecenas faucibus mollis interdum.</li>
            <li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
            <li>Cras mattis consectetur purus sit amet fermentum.</li>
          </ul>
        </div>
      </div>

      <div class="wrapper-down">
        <div class="faq facefaq">
          <h4 class="sr">Common Questions</h4>
            <dl>
              <dt>Why do you need my photo?</dt>
                <dd>We need your photo to confirm that you are you.</dd>

              <dt>What do you do with this picture?</dt>
                <dd>We only use it to verify your identity.  It is not displayed anywhere.</dd>
            </dl>
        </div>

        <div class="next-step">
              <p class="m-btn-primary" id="face_next_button">
                <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
              </p>
              <p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
        </div>
      </div>
    </div>




    <div id="wrapper-idphoto" class="block block-photo">
      <h3 class="title">Take Your Photo</h3>
      <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>

      <div class="wrapper-up">

        <div id="idcam" class="cam">

          <div class="placeholder-cam">
          <!-- cam image -->
          <p>cam image</p>
          </div>

          <div class="controls photo-controls">
            <ul class="controls-list">
              <li class="control control-redo">
                <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">
                <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">
                <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="photo-tips idtips">
          <h4>Tips on taking a successful photo</h4>
          <ul>
            <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
            <li>Maecenas faucibus mollis interdum.</li>
            <li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
            <li>Cras mattis consectetur purus sit amet fermentum.</li>
          </ul>
        </div>

      </div>

      <div class="wrapper-down">

        <div class="faq idfaq">
          <h4 class="sr">Common Questions</h4>
          <dl class="faq">
            <dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
              <dd>Aenean eu leo quam.</dd>
            <dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
              <dd>Maecenas faucibus mollis interdum.</dd>
            <dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
              <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
            <dt>Vestibulum id ligula porta felis euismod semper.</dt>
          </dl>
        </div>

        <div class="next-step">
              <p class="m-btn-primary">
                <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
              </p>
              <p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
        </div>
      </div>

    </div>



    <div id="wrapper-review" class="block block-photo">
      <h3 class="title">Verify Your Submission</h3>
      <p>Make sure we can verify your identity with the photos and information below.</p>

      <div class="review-name">
        <h3>Check Your Name</h3>
        <p>Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.</p>
        <p><a href="#">Edit my name</a></p>
      </div>

      <div class="wrapper-up">
        <div id="review-facephoto" class="review-photo">
          <div class="placeholder-photo">
          <!-- photo image -->
          </div>

          <h4>The photo above needs to meet the following requirements:</h4>
          <ul>
            <li>Be well lit</li>
            <li>Show your whole face</li>
            <li>Match your ID</li>
          </ul>
        </div>

        <div id="review-idphoto" class="review-photo">
          <div class="placeholder-photo">
          <!-- photo image -->
          </div>

          <h4>The photo above needs to meet the following requirements:</h4>
          <ul>
            <li>Be readable (not too far away, no glare)</li>
            <li>Show your name</li>
            <li>Match the photo of your face and your name above</li>
          </ul>
        </div>
      </div>

<hr />

      <div class="wrapper-down">
        <h3>Check Your Contribution</h3>

        <dl>
          <dt>
            Select your contribution for this course:
          </dt>
          <dd>
            <ul class="pay-options">
              <li>
                <input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
              </li>
              <li>
                <input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label>
              </li>
              <li>
                <input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
              </li>
              <li class="other1">
                <input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
              </li>
              <li class="other2">
                <label for="contribution-other-amt"><span class="sr">Other Amount</span> $</label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt">
              </li>
            </ul>
          </dd>
        </dl>
      </div>


      <div class="next-step">

        <p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
        <input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label>

            <p  class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
            <p class="tip">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>

    </div>
  </section>



  <section class="support">
    <p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
    <p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
  </section>


</div>



<section id="edit-name" class="modal">
<header>
  <h4>${_("Edit Your Full Name")}</h4>
</header>
  <form id="course-checklists" class="course-checklists" method="post" action="">
    <div role="alert" class="status message submission-error" tabindex="-1">
      <p class="message-title">${_("The following error occurred while editing your name:")}
        <span class="message-copy"> </span>
      </p>
    </div>
    <p>
      <label for="name">${_('Full Name')}</label>
      <input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
    </p>

    <div class="actions">
      <button class="action action-primary" type="submit">${_("Save")}</button>
      <button class="action action-secondary action-cancel">${_("Cancel")}</button>
    </div>
  </form>
  <a href="#" data-dismiss="modal" rel="view" class="action action-close action-editname-close">
    <i class="icon fa fa-times-circle"></i>
    <span class="label">close</span>
  </a>
</section>


</%block>
