<%page expression_filter="h"/>
<%inherit file="../main.html" />
<%!
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
from openedx.core.djangolib.js_utils import js_escaped_string
from openedx.core.djangolib.markup import HTML, Text
%>

<%block name="bodyclass">register verification-process step-select-track</%block>
<%block name="pagetitle">
    ${_("Enroll In {course_name} | Choose Your Track").format(course_name=course_name)}
</%block>

<%block name="js_extra">
    <script type="text/javascript">
        var expandCallback = function(event) {
            event.preventDefault();
            $(this).next('.expandable-area').slideToggle();
            var title = $(this).parent();
            title.toggleClass('is-expanded');
            if (title.attr("aria-expanded") === "false") {
                title.attr("aria-expanded", "true");
            } else {
                title.attr("aria-expanded", "false");
            }
        };

        $(document).ready(function() {
            $('.expandable-area').slideUp();
            $('.is-expandable').addClass('is-ready');

            $('.is-expandable .title-expand').click(expandCallback);
            $('.is-expandable .title-expand').keypress(function(e) {
                if (e.which == 13) {  // only activate on pressing enter
                    expandCallback.call(this, e); // make sure that we bind `this` correctly
                }
            });

            $('#contribution-other-amt').focus(function() {
                $('#contribution-other').attr('checked',true);
            });

            % if use_ecommerce_payment_flow:
            $('input[name=verified_mode]').click(function(e){
                e.preventDefault();
                window.location.href = '${ecommerce_payment_page | n, js_escaped_string}?sku=' +
                encodeURIComponent('${sku | n, js_escaped_string}');
            });
            % endif
        });
    </script>
</%block>

<%block name="content">
    % if error:
        <div class="wrapper-msg wrapper-msg-error">
            <div class=" msg msg-error">
                <span class="msg-icon icon fa fa-exclamation-triangle" aria-hidden="true"></span>
                <div class="msg-content">
                    <h3 class="title">${_("Sorry, there was an error when trying to enroll you")}</h3>
                    <div class="copy">
                        <p>${error}</p>
                    </div>
                </div>
            </div>
        </div>
    %endif

    <div class="container">
        <section class="wrapper">
            <div class="wrapper-register-choose wrapper-content-main">
                <article class="register-choose content-main">
                    <header class="page-header content-main">
                        <h3 class="title">
                            ${title_content}
                        </h3>
                    </header>

                    <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
                        <%
                        b_tag_kwargs = {'b_start': HTML('<b>'), 'b_end': HTML('</b>')}
                        %>
                        % if "verified" in modes:
                            <div class="register-choice register-choice-certificate">
                                <div class="wrapper-copy">
                                    <span class="deco-ribbon"></span>
                                    % if has_credit_upsell:
                                    <h4 class="title">${_("Pursue Academic Credit with a Verified Certificate")}</h4>

                                    <div class="copy">
                                        <p>${_("Become eligible for academic credit and highlight your new skills and knowledge with a verified certificate. Use this valuable credential to qualify for academic credit, advance your career, or strengthen your school applications.")}</p>
                                        <p>
                                            <div class="wrapper-copy-inline">
                                                <div class="copy-inline">
                                                    <h4>${_("Benefits of a Verified Certificate")}</h4>
                                                    <ul>
                                                        <li>${Text(_("{b_start}Eligible for credit:{b_end} Receive academic credit after successfully completing the course")).format(**b_tag_kwargs)}</li>
                                                        <li>${Text(_("{b_start}Official:{b_end} Receive an instructor-signed certificate with the institution's logo")).format(**b_tag_kwargs)}</li>
                                                        <li>${Text(_("{b_start}Easily shareable:{b_end} Add the certificate to your CV or resume, or post it directly on LinkedIn")).format(**b_tag_kwargs)}</li>
                                                    </ul>
                                                </div>
                                                <div class="copy-inline list-actions">
                                                    <ul class="list-actions">
                                                        <li class="action action-select">
                                                            <input type="hidden" name="contribution" value="${min_price}" />
                                                            <input type="submit" name="verified_mode" value="${_('Pursue a Verified Certificate')} ($${min_price} USD)" />
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    % else:
                                    <h4 class="title">${_("Pursue a Verified Certificate")}</h4>

                                    <div class="copy">
                                        <p>${_("Highlight your new knowledge and skills with a verified certificate. Use this valuable credential to improve your job prospects and advance your career, or highlight your certificate in school applications.")}</p>
                                        <p>
                                            <div class="wrapper-copy-inline">
                                                <div class="copy-inline">
                                                    <h4>${_("Benefits of a Verified Certificate")}</h4>
                                                    <ul>
                                                        <li>${Text(_("{b_start}Official: {b_end}Receive an instructor-signed certificate with the institution's logo")).format(**b_tag_kwargs)}</li>
                                                        <li>${Text(_("{b_start}Easily shareable: {b_end}Add the certificate to your CV or resume, or post it directly on LinkedIn")).format(**b_tag_kwargs)}</li>
                                                        <li>${Text(_("{b_start}Motivating: {b_end}Give yourself an additional incentive to complete the course")).format(**b_tag_kwargs)}</li>
                                                    </ul>
                                                </div>
                                                <div class="copy-inline list-actions">
                                                    <ul class="list-actions">
                                                        <li class="action action-select">
                                                            <input type="hidden" name="contribution" value="${min_price}" />
                                                            <input type="submit" name="verified_mode" value="${_('Pursue a Verified Certificate')} ($${min_price} USD)" />
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    % endif
                                </div>
                            </div>
                        % endif

                        % if "honor" in modes:
                            <span class="deco-divider">
                                <span class="copy">${_("or")}</span>
                            </span>

                            <div class="register-choice register-choice-audit">
                                <div class="wrapper-copy">
                                    <span class="deco-ribbon"></span>
                                    <h4 class="title">${_("Audit This Course")}</h4>
                                    <div class="copy">
                                        <p>${_("Audit this course for free and have complete access to all the course material, activities, tests, and forums.")}</p>
                                    </div>
                                </div>

                                <ul class="list-actions">
                                    <li class="action action-select">
                                        <input type="submit" name="honor_mode" value="${_('Audit This Course')}" />
                                    </li>
                                </ul>
                            </div>
                        % elif "audit" in modes:
                            <span class="deco-divider">
                                <span class="copy">${_("or")}</span>
                            </span>

                            <div class="register-choice register-choice-audit">
                                <div class="wrapper-copy">
                                    <span class="deco-ribbon"></span>
                                    <h4 class="title">${_("Audit This Course (No Certificate)")}</h4>
                                    <div class="copy">
                                        ## Translators: b_start notes the beginning of a section of text bolded for emphasis, and b_end marks the end of the bolded text.
                                        <p>${Text(_("Audit this course for free and have complete access to all the course material, activities, tests, and forums.  {b_start}Please note that this track does not offer a certificate for learners who earn a passing grade.{b_end}")).format(**b_tag_kwargs)}</p>
                                    </div>
                                </div>

                                <ul class="list-actions">
                                    <li class="action action-select">
                                        <input type="submit" name="audit_mode" value="${_('Audit This Course')}" />
                                    </li>
                                </ul>
                            </div>
                        % endif

                        <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
                    </form>
                </article>
            </div> <!-- /wrapper-content-main -->
        </section>
    </div>
</%block>
