<h3 class="title"><%- gettext( "Take Your Photo" ) %></h3>
<div class="instruction">
<p><%- gettext( "Use your webcam to take a picture of your face so we can match it with the picture on your ID." ) %></p>
</div>
<div class="wrapper-task">
<div id="facecam" class="task cam"></div>
<div class="wrapper-help">
<div class="help help-task photo-tips facetips">
<h4 class="title"><%- gettext( "Tips on taking a successful photo" ) %></h4>
<div class="copy">
<ul class="list-help">
<li class="help-item"><%- gettext( "Make sure your face is well-lit" ) %></li>
<li class="help-item"><%- gettext( "Be sure your entire face is inside the frame" ) %></li>
<li class="help-item"><%- gettext( "Can we match the photo you took with the one on your ID?" ) %></li>
<li class="help-item"><%- gettext( "Once in position, use the camera button" ) %> <span class="example">(<i class="icon-camera"></i>)</span> <%- gettext( "to capture your picture" ) %></li>
<li class="help-item"><%- gettext( "Use the checkmark button" ) %> <span class="example">(<i class="icon-ok"></i>)</span> <%- gettext( "once you are happy with the photo" ) %></li>
<h3 class="title"><%- gettext( "Show Us Your ID" ) %></h3>
<div class="instruction">
<p><%- gettext("Use your webcam to take a picture of your ID so we can match it with your photo and the name on your account.") %></p>
</div>
<div class="wrapper-task">
<div id="idcam" class="task cam"></div>
<div class="wrapper-help">
<div class="help help-task photo-tips idtips">
<h4 class="title"><%- gettext( "Tips on taking a successful photo" ) %></h4>
<div class="copy">
<ul class="list-help">
<li class="help-item"><%- gettext( "Make sure your ID is well-lit" ) %></li>
<li class="help-item"><%- gettext( "Check that there isn't any glare" ) %></li>
<li class="help-item"><%- gettext( "Ensure that you can see your photo and read your name" ) %></li>
<li class="help-item"><%- gettext( "Try to keep your fingers at the edge to avoid covering important information" ) %></li>
<li class="help-item"><%- gettext( "Acceptable IDs include drivers licenses, passports, or other goverment-issued IDs that include your name and photo" ) %></li>
<li class="help-item"><%- gettext( "Once in position, use the camera button ") %> <span class="example">(<i class="icon-camera"></i>)</span> <%- gettext( "to capture your ID" ) %></li>
<li class="help-item"><%- gettext( "Use the checkmark button" ) %> <span class="example">(<i class="icon-ok"></i>)</span> <%- gettext( "once you are happy with the photo" ) %></li>
<dt class="faq-question"><%- gettext( "Why do you need a photo of my ID?" ) %></dt>
<dd class="faq-answer"><%- gettext( "We need to match your ID with your photo and name to confirm that you are you." ) %></dd>
<dt class="faq-question"><%- gettext( "What do you do with this picture?" ) %></dt>
<dd class="faq-answer"><%- gettext( "We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed." ) %></dd>
<span class="copy-super"><%- gettext( "A photo identification document" ) %></span>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or other government or school-issued ID with your name and picture on it." ) %></span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['webcam-required']) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "A webcam and a modern browser" ) %></span>
<a rel="external" href="http://windows.microsoft.com/en-us/internet-explorer/download-ie"><%- gettext("Internet Explorer 9 or later" ) %></a></strong>.
<%- gettext( "Please make sure your browser is updated to the most recent version possible." ) %>
</span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['credit-card-required'] ) { %>
<li class="req req-3 req-payment">
<h4 class="title"><%- gettext( "Credit or Debit Card" ) %></h4>
<div class="placeholder-art">
<i class="icon-credit-card"></i>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "A major credit or debit card" ) %></span>
<span class="copy-sub"><%- gettext( "Visa, MasterCard, American Express, Discover, Diners Club, or JCB with the Discover logo." ) %></span>
<p>${_("Please read {a_start}our FAQs to view common questions about our certificates{a_end}.").format(a_start='<arel="external"href="'+ marketing_link('WHAT_IS_VERIFIED_CERT') + '">', a_end="</a>")}</p>
<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><arel="external"href="http://browsehappy.com/">', a_end="</a></strong>")}</p>
<h4 class="title"><%- gettext( "Check Your Name" ) %></h4>
<div class="copy">
<p><%- _.sprintf( gettext( "Make sure your full name on your %(platformName)s account (%(fullName)s) matches your ID. We will also use this as the name on your certificate." ), { platformName: platformName, fullName: fullName } ) %></p>
<h3 class="title"><%- gettext( "Before proceeding, please confirm that your details match" ) %></h3>
<p class="copy">
<%- _.sprintf( gettext( "Once you verify your details match the requirements, you can move on to step %(stepNum)s, %(stepTitle)s." ), { stepNum: nextStepNum, stepTitle: nextStepTitle } ) %>