<%! from django.utils.translation import ugettext as _ %>
<%!
  from django.core.urlresolvers import reverse
  from courseware.courses import course_image_url, get_course_about_section
%>
<%namespace name='static' file='../static_content.html'/>

<%inherit file="../mktg_iframe.html" />

<%block name="pagetitle">${_("About {course_number}").format(course_number=course.display_number_with_default) | h}</%block>

<%block name="bodyclass">view-iframe-content view-partial-mktgregister</%block>

<%block name="js_extra">
  <script type="text/javascript">
  (function() {
    $(".register").click(function(event) {
      var el = $("input[name='email_opt_in']"),
        emailOptIn,
        currentHref;

      // Check if the email opt-in checkbox is missing
      if ( $("#email-opt-in").length == 0 ) {
        // Remove the corresponding hidden form element
        el.remove();
      } else {
        // Check if the email opt-in checkbox is not checked
        if ( !$("#email-opt-in").prop("checked") ) {
          // Set the value of the corresponding hidden form element
          el.val("false");
        }

        emailOptIn = el.val();
        currentHref = $("a.register").attr("href");
        if (currentHref) {
          $("a.register").attr("href", currentHref + "&email_opt_in=" + emailOptIn);
        }
      }

      $("#class_enroll_form").submit();
      event.preventDefault();
    });

    $('#class_enroll_form').on('ajax:complete', function(event, xhr) {
      var emailOptIn = '';

      if(xhr.status == 200) {
        if (xhr.responseText != "") {
          window.top.location.href = xhr.responseText;
        }
        else {
          window.top.location.href = "${reverse('dashboard')}";
        }
      } else if (xhr.status == 403) {
        // Check if the email opt-in checkbox is present
        if ( $("#email-opt-in").length != 0 ) {
          emailOptIn = '&email_opt_in=' + $("input[name='email_opt_in']").val();
        }

        ## Ugh.
        window.top.location.href = $("a.register").attr("href") || "${reverse('register_user')}?course_id=${course.id | u}&enrollment_action=enroll&email_opt_in=" + emailOptIn;
      } else {
        $('#register_error').html(
            (xhr.responseText ? xhr.responseText : "${_("An error occurred. Please try again later.")}")
        ).css("display", "block");
      }
    });
  })(this)
  </script>
</%block>

<%block name="content">
  <script src="${static.url('js/course_info.js')}"></script>

  <ul class="list-actions">
    <li class="item">
        %if user.is_authenticated() and registered:
          %if show_courseware_link:
            <a class="action access-courseware" href="${course_target}" target="_top">${_("Access Courseware")}</a>
          %else:
            <div class="action is-registered">${_("You Are Enrolled")}</div>
          %endif
        %elif allow_registration:
        <a class="action action-register register ${'has-option-verified' if len(course_modes) > 1 else ''}"
            %if not user.is_authenticated():
              href="${reverse('register_user')}?course_id=${course.id | u}&enrollment_action=enroll"
            %endif
        >${_("Enroll in")} <strong>${course.display_number_with_default | h}</strong>
            %if len(course_modes) > 1:
            <span class="track">
            ## Translators: This is the second line on a button users can click.  The first line is "Enroll in COURSE_NAME"
            ## The "choose your student track" means users can select between taking the course as an auditor, as a verified student, etc
            ${_("and choose your student track")}
            </span>
            %elif "professional" in course_modes:
            <span class="track">
            ## Translators: This is the second line on a button users can click.  The first line is "Enroll in COURSE_NAME"
            ## 'Verification' here refers to verifying one's identity in order to receive a verified certificate.
            ${_("and proceed to verification")}
            </span>
            %endif
        </a>

        % if settings.FEATURES.get('ENABLE_MKTG_EMAIL_OPT_IN'):
          ## We only display the email opt-in checkbox if we've been given one or more organization names.
          % if checkbox_label:
            <p class="form-field">
              <input id="email-opt-in" type="checkbox" name="opt-in" class="email-opt-in" value="true" checked>
              <label for="email-opt-in" class="register-emails">${checkbox_label}</label>
            </p>
          % endif
        % endif

        %else:
          <div class="action registration-closed is-disabled" aria-disabled="true" >${_("Enrollment Is Closed")}</div>
        %endif
    </li>
  </ul>

%if not registered:
  <div style="display: none;">
    <form id="class_enroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
      <fieldset class="enroll_fieldset">
        <input name="course_id" type="hidden" value="${course.id | h}">
        <input name="enrollment_action" type="hidden" value="enroll">
        <input name="email_opt_in" type="hidden" value="true">
        <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
      </fieldset>
      <div class="submit">
        <input name="enroll" type="submit" value="enroll">
      </div>
    </form>
  </div>
%endif
</%block>