{% extends 'edx/base.html' %}
{% load compress %}
{% load staticfiles %}
{% load i18n %}
{% block title %}{% trans "Credit Checkout" %}{% endblock title %}

{% block content %}
    <div class="container credit-checkout" data-lms-root-url="{{ lms_url_root }}">
        <div class="row center-block course-details">
            <div class="col-sm-11">
                <h3 class="title">
                    {% blocktrans with provider='<span class="provider-name"></span>' count hours=credit_seats.0.attr.credit_hours %}
                        Purchase 1 credit from {{ provider }} for:
                        {% plural %}
                        Purchase {{ hours }} credits from {{ provider }} for:
                    {% endblocktrans %}
                    <span id="course-name" data-course_key="{{ course }}" data-username="{{ request.user }}"
                          class="course-title text-nowrap">{{ course.name }}</span>
                </h3>
            </div>
            <div class="col-sm-1 price text-right">
                <strong>${{ credit_seats.0.stockrecords.first.price_excl_tax }}</strong>
            </div>

        </div>
        <div class="provider-container">
            <div class="alert alert-danger error-message hide" role="alert">
                {% trans "Something went wrong! Please try again later." %}
            </div>
            <div class="provider-panel hide">
                <div data-provider-ids="{{ provider_ids }}" class="row center-block provider-details">
                    {# data will be loaded with underscore template #}
                </div>

                <div class="row center-block text-right total-price">
                    <div class="col-sm-12">{% trans "Total:" %}
                        ${{ credit_seats.0.stockrecords.first.price_excl_tax }}</div>
                </div>

                <div id="payment-buttons" class="row checkout-controls center-block text-right">
                    <div class="col-sm-12">
                        {% for processor_name, button_text in payment_processors.items %}
                            <button data-track-type="click"
                                    data-track-event="edx.bi.ecommerce.credit.payment_selected"
                                    data-track-category="{{ processor_name }}"
                                    data-processor-name="{{ processor_name }}"
                                    data-sku="{{ credit_seats.0.stockrecords.first.partner_sku }}"
                                    data-course-id="{{ course.id }}"
                                    class="btn btn-primary payment-button"
                                    >
                                {{ button_text }}
                            </button>
                        {% endfor %}
                    </div>

                </div>
                <div class="row center-block eligibility-details text-right">
                    <div class="col-sm-12">
                        {# date will be added with ajax call #}
                        <small>
                            {% blocktrans with date='<span class="deadline-date"></span>' %}
                                Credit eligibility expires on {{ date }}
                            {% endblocktrans %}
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <div class="advatanges-panel well">
            <div class="row center-block">
                <div class="col-md-12">
                    <img class="cap-image" src="{% static "images/cap.png" %}" alt=""/>
                    <strong>Earn Academic Credit for Your Accomplishments</strong>
                </div>
            </div>

            <div class="row center-block ">

                <div class="col-md-4">
                    <div class="advantages">
                        <strong>{% trans "You deserve it." %}</strong>

                        <p>
                            {% trans "The hard work is over - you passed the course! Now get the credit you deserve to start or complete a degree." %}
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="advantages">
                        <strong>{% trans "It's affordable." %}</strong>

                        <p>
                            {% trans "The credit offered through edX generally costs less than the same credit at most institutions." %}
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="advantages">
                        <strong>{% trans "It opens doors." %}</strong>

                        <p>
                            {% trans "Many of today's most in-demand jobs require a college degree. Start your path to success!" %}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row center-block">
            <strong>{% trans "Questions?" %}</strong>
        </div>
        <div class="row center-block">
            {% blocktrans with link_start='<a href="https://www.edx.org/gfa">' link_end='</a>' %}
                Please read {{ link_start }}our FAQs to view common questions about our certificates.{{ link_end }}
            {% endblocktrans %}
        </div>
    </div>

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

    {% if analytics_data %}
        <script type="text/javascript">
            var initModelData = {{ analytics_data|safe }};
        </script>
    {% endif %}

{% endblock content %}

{% block javascript %}
    <script src="{% static 'js/pages/credit_checkout.js' %}"></script>
{% endblock %}