<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>

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

<%block name="bodyclass">register verification-process step-select-track ${'is-upgrading' if upgrade else ''}</%block>
<%block name="pagetitle">
    % if upgrade:
        ${_("Upgrade Your Enrollment for {} | Choose Your Track").format(course_name)}
    % else:
        ${_("Enroll In {} | Choose Your Track").format(course_name)}
    %endif
</%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);
            });

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

<%block name="content">
    % if error:
        <div class="wrapper-msg wrapper-msg-error">
            <div class=" msg msg-error">
                <i class="msg-icon icon fa fa-exclamation-triangle"></i>
                <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">
                    <%include file="/verify_student/_verification_header.html" args="course_name=course_name" />

                    <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
                        % if "verified" in modes:
                            <div class="register-choice register-choice-certificate">
                                <div class="wrapper-copy">
                                    <span class="deco-ribbon"></span>
                                    <h4 class="title">${_("Pursue a Verified Certificate")}</h4>

                                    <div class="copy">
                                        <p>${_("Highlight you 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><b>${_("Official")}: </b>${_("Receive an instructor-signed certificate with the institution's logo")}</li>
                                                        <li><b>${_("Easily sharable")}: </b>${_("Add the certificate to your CV or resume, or post it directly on LinkedIn")}</li>
                                                        <li><b>${_("Motivating")}: </b>${_("Give yourself an additional incentive to complete the course")}</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})" />
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        % endif

                        % if not upgrade:
                            % 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. If your work is satisfactory and you abide by the Honor Code, you'll receive a personalized Honor Code Certificate to showcase your achievement.")}</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>
                            % endif
                        % endif

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

            <%include file="/verify_student/_verification_support.html" />
        </section>
    </div>
</%block>
