<div id="wrapper-review" tab-index="0" class="wrapper-view make-payment-step">
  <div class="review view">
    <% if ( !upgrade ) { %>
      <h2 class="title center-col">
        <%= _.sprintf(
            gettext( "You are enrolling in: %(courseName)s"),
            { courseName: '<span class="course-title">' + courseName + '</span>' }
          ) %>
      </h2>
    <% } else { %>
      <h2 class="title">
        <%= _.sprintf(
            gettext( "You are upgrading your enrollment for: %(courseName)s"),
            { courseName: '<span class="course-title">' + courseName + '</span>' }
          ) %>
      </h2>
      <div class="instruction">
        <%- gettext( "You can now enter your payment information and complete your enrollment." ) %>
      </div>
    <% } %>

    <div class="instruction <% if ( !upgrade ) { %>center-col<% } %>">
      <% if ( _.some( requirements, function( isVisible ) { return isVisible; } ) ) { %>
      <p>
        <% if ( verificationDeadline ) { %>
          <%- _.sprintf(
            gettext( "You can pay now even if you don't have the following items available, but you will need to have these by %(date)s to qualify to earn a Verified Certificate." ),
            { date: verificationDeadline }
          ) %>
        <% } else if ( !isActive ) { %>
          <%- gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email. After you complete activation you can return and refresh this page." ) %>
        <% } else { %>
            <%- gettext( "You can pay now even if you don't have the following items available, but you will need to have these to qualify to earn a Verified Certificate." ) %>
        <% } %>
      </p>
      <% } %>
    </div>

    <% if ( requirements['account-activation-required'] || requirements['photo-id-required'] || requirements['webcam-required']) { %>
    <div class="requirements-container">
      <ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
        <% if ( requirements['account-activation-required'] ) { %>
          <li class="req req-0 req-activate">
            <h3 class="title"><%- gettext( "Activate Your Account" ) %></h3>
            <div class="placeholder-art">
              <i class="icon fa fa-envelope-o" aria-hidden="true"></i>
            </div>

            <div class="copy">
              <p>
                <span class="copy-super"><%- gettext( "Check Your Email" ) %></span>
              </p>
            </div>
          </li>
        <% } else {%>
          <% if ( requirements['photo-id-required'] ) { %>
          <li class="req req-1 req-id">
            <h3 class="title"><%- gettext( "Government-Issued Photo ID" ) %></h3>
            <div class="placeholder-art fa-lg">
              <i class="icon fa fa-list-alt fa-stack-2x" aria-hidden="true"></i>
              <i class="icon fa fa-user id-photo fa-stack-1x" aria-hidden="true"></i>
            </div>

            <div class="copy"></div>
          </li>
          <% } %>

          <% if ( requirements['webcam-required'] ) { %>
          <li class="req req-2 req-webcam">
            <h3 class="title"><%- gettext( "Webcam" ) %></h3>
            <div class="placeholder-art">
              <i class="icon fa fa-video-camera" aria-hidden="true"></i>
            </div>

            <div class="copy"></div>
          </li>
          <% } %>
        <% } %>
      </ul>
    </div>
    <% } %>

    <% if ( courseModeSlug === 'no-id-professional') { %>
    <div class="container register is-verified">
      <h3 class="title"><%- gettext( "ID-Verification is not required for this Professional Education course." ) %></h3>
      <p><%- gettext( "All professional education courses are fee-based, and require payment to complete the enrollment process." ) %></p>
    </div>
    <% } else if ( alreadyVerified && verificationGoodUntil ) { %>
    <div class="container register is-verified">
      <h3 class="title"><%- gettext( "You have already verified your ID!" ) %></h3>
      <p>
        <%= _.sprintf(
        gettext( "Your verification status is good until %(verificationGoodUntil)s." ),
         { verificationGoodUntil: verificationGoodUntil }
        ) %>
      </p>
    </div>
    <% } %>

  <% if ( isActive ) { %>
  <div class="payment-buttons nav-wizard is-ready center">
    <input type="hidden" name="contribution" value="<%- minPrice %>" />
    <input type="hidden" name="sku" value="<%- sku %>" />
    <div class="purchase">
      <p class="product-info"><span class="product-name"></span> <%- gettext( "price" ) %>: <span class="price">$<%- minPrice %> USD</span></p>
    </div>
    <div class="pay-options">
      <%
      // payment buttons will go here
      %>
    </div>
  </div>
  <% } %>

  <form id="payment-processor-form"></form>
</div>
