<%! 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">
            <%include file="/verify_student/_verification_header.html" args="course_name=course_name" />

            <div class="wrapper-register-choose wrapper-content-main">
                <article class="register-choose content-main">
                    % if not upgrade:
                        <h3 class="title">${_("Now choose your course track:")}</h3>
                    % endif

                    <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>

                                    % if upgrade:
                                        <div class="copy">
                                            <p>${_("Plan to use your completed coursework for job applications, career advancement, or school applications? Upgrade to work toward a Verified Certificate of Achievement to document your accomplishment. A minimum fee applies.")}</p>
                                        </div>
                                    % else:
                                        <div class="copy">
                                            <p>${_("Plan to use your completed coursework for job applications, career advancement, or school applications? Then work toward a Verified Certificate of Achievement to document your accomplishment. A minimum fee applies.")}</p>
                                        </div>
                                    % endif
                                </div>

                                <div class="field field-certificate-contribution">
                                    <h5 class="label">${_("Select your contribution for this course (min. $")} ${min_price} <span class="denomination-name">${currency}</span>${_("):")}</h5>

                                    % if error:
                                        <div class="msg msg-error msg-inline">
                                            <div class="copy">
                                                <p><i class="msg-icon icon fa fa-exclamation-triangle"></i> ${error}</p>
                                            </div>
                                        </div>
                                    % endif

                                    <%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price, min_price=min_price"/>

                                    <ul class="list-actions">
                                        <li class="action action-select">
                                            % if upgrade:
                                                <input type="submit" name="verified_mode" value="${_('Upgrade Your Enrollment')}" />
                                            % else:
                                                <input type="submit" name="verified_mode" value="${_('Pursue a Verified Certificate')}" />
                                            % endif
                                        </li>
                                    </ul>
                                </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="${_('Pursue an Honor Code Certificate')}" />
                                        </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>
