{% extends 'edx/base.html' %}

{% load compress %}
{% load core_extras %}
{% load staticfiles %}
{% load i18n %}

{% block title %}
    {% blocktrans with course_name=course.name %}Purchase Credit for {{ course_name }}{% endblocktrans %}
{% endblock title %}

{% block content %}
    <div class="credit-checkout-page">
        <div class="container credit-checkout">
            <div class="row center-block course-details">
                {% if error %}
                    <div class="alert alert-danger error-message" role="alert">
                        {{ error }}
                    </div>
                {% else %}
                    <div class="col-sm-11">
                        <h3 class="title">
                            {% captureas course_name %}
                                <span class="course-title">{{ course.name }}</span>
                            {% endcaptureas %}
                            {% blocktrans %}
                                Purchase Credit for {{ course_name }}
                            {% endblocktrans %}
                        </h3>
                <span>
                    {% blocktrans with date=deadline|date %}
                        Congratulations! You are eligible to purchase academic course credit for this course.
                        You must purchase your credit before {{ date }}.
                        Select one of the following institutions to purchase your credit.
                    {% endblocktrans %}
                </span>
                    </div>
                    </div>
                    <div class="provider-container">
                        <div class="row center-block provider-details">
                            {% for provider in providers %}
                                {% include "edx/credit/_provider_detail.html" %}
                            {% endfor %}
                            <div class="row center-block text-right">
                                <div class="col-sm-12 total-price text-right">
                                    {% trans "Total:" %} $<span></span>
                                </div>
                            </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-course-id="{{ course.id }}"
                                            class="btn btn-primary payment-button">
                                        {{ button_text }}
                                    </button>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}

            <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>
    </div>
{% endblock content %}

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