{% load i18n %}
{% load core_extras %}
{% load currency_filters %}
{% load purchase_info_tags %}
{% load widget_tweaks %}
{% load crispy_forms_tags %}

{% if not is_bulk_purchase %}
    {% include 'partials/alert_messages.html' %}
{% endif %}

{% if not basket.is_empty %}
    <div id="content-inner">
        {% block basket_form_main %}
            <form action="." method="post" class="basket_summary" id="basket_formset">
                {% csrf_token %}
                {{ formset.management_form }}

                {% for form, line_data in formset_lines_data %}
                    {% purchase_info_for_line request line_data.line as session %}
                    <div class="basket-items">
                        {% if line_data.seat_type %}
                            <p class="certificate_type">
                                {% trans "Earn a valuable certificate to showcase the skills you learn in" %}
                            </p>
                        {% endif %}
                        <div class="row">
                            <div class="col-md-2 col-sm-12 course_image">
                                {{ form.id }}
                                <img class="thumbnail" src="{{ line_data.image_url|default_if_none:'' }}"
                                     alt="{{ line_data.course_name|default_if_none:'' }}"/>
                            </div>
                            <div class="col-md-5 col-sm-12">
                                <p class="course_name">{{ line_data.course_name }} - {{ line_data.course_key.org }}
                                    ({{ line_data.course_key.run }})</p>
                                <p class="course_description">{{ line_data.course_short_description }}</p>
                            </div>
                            {% if line_data.enrollment_code %}
                                <div class="col-md-1 col-xs-12">
                                    <label class="course-price-label text-muted">{% trans 'Item Price' %}</label>
                                    <span>{{ line_data.line.price_incl_tax|currency:line_data.line.price_currency }}</span>
                                </div>
                                <div class="col-md-3 col-xs-12 form-inline">
                                    <label class="course-price-label text-muted">{% trans 'Quantity' %}</label>
                                    <div class="checkout-quantity form-group">
                                        <div class="input-group spinner  {% if form.errors %}error{% endif %}">
                                            {% render_field form.quantity class+="quantity form-control" min=min_seat_quantity %}
                                            <div class="input-group-btn-vertical">
                                                <button class="btn btn-primary" type="button">
                                                  <i class="fa fa-caret-up"></i>
                                                </button>
                                                <button class="btn btn-primary" type="button">
                                                  <i class="fa fa-caret-down"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary update-button" type="submit"
                                                data-loading-text="{% trans 'Updating...' %}">{% trans "Update" %}</button>
                                    </div>
                                </div>
                            {% endif %}
                            <div class="col-md-{% if line_data.enrollment_code %}1{% else %}5{% endif %} col-xs-12 course_prices pull-right">
                                {% if line_data.enrollment_code %}
                                    <label class="course-price-label text-muted">{% trans 'Price' %}</label>
                                {% endif %}

                                {% if line_data.line.has_discount %}
                                    <div class="discount">
                                        <div class="benefit">
                                            {% blocktrans with benefit_value=line_data.benefit_value %}
                                                {{ benefit_value }} off
                                            {% endblocktrans %}
                                        </div>
                                        <div class="old-price">
                                            {{ line_data.line.line_price_incl_tax|currency:line_data.line.price_currency }}
                                        </div>
                                    </div>
                                {% endif %}
                                <div class="price {% if line_data.line.has_discount %}discounted{% endif %}">
                                    {{ line_data.line.line_price_incl_tax_incl_discounts|currency:line_data.line.price_currency }}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </form>
        {% endblock %}

        <div class="total">
            <div class="row">
                {% if not is_bulk_purchase %}
                    {% block vouchers %}
                        {% if basket.contains_a_voucher %}
                            <div class="vouchers col-sm-6">
                                {% for voucher in basket.vouchers.all %}
                                    <p class="voucher">
                                        {% blocktrans with voucher_code=voucher.code %}
                                            Coupon code {{ voucher_code }} applied
                                        {% endblocktrans %}
                                    <form action="{% url 'basket:vouchers-remove' pk=voucher.id %}" method="POST">
                                        {% csrf_token %}
                                        <button class="remove-voucher" type="submit"><i class="fa fa-times"></i>
                                        </button>
                                    </form>
                                    </p>
                                {% endfor %}
                            </div>
                        {% else %}
                            {# Hide the entire section if a custom BasketView doesn't pass in a voucher form #}
                            {% if voucher_form %}
                                <div class="use-voucher col-sm-6">
                                    <p id="voucher_form_link"><a href="#voucher">{% trans "Apply a coupon code" %}</a>
                                    </p>
                                    <div id="voucher_form_container">
                                        <form id="voucher_form" action="{% url 'basket:vouchers-add' %}" method="post">
                                            {% csrf_token %}
                                            <div class="code">
                                                <input id="id_code" name="code" type="text"
                                                       placeholder="{% trans 'Enter a coupon code' %}">
                                                <button type="submit"
                                                        class="btn btn-default"
                                                        data-loading-text="{% trans 'Applying...' %}"
                                                        data-track-type="click"
                                                        data-track-event="edx.bi.ecommerce.basket.voucher_applied"
                                                        data-track-category="voucher-application"
                                                        data-voucher-code="{{ voucher_code }}">
                                                    {% trans "Apply" %}
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                    {% endblock vouchers %}
                {% endif %}

                {% block baskettotals %}
                    {% include 'basket/partials/basket_totals.html' with editable=1 %}
                {% endblock baskettotals %}
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                {# Switch Basket view in between single and bulk purchase items #}
                {% if partner_sku %}
                    <div class="pull-left basket-switch-link">
                        <a href="/basket/single-item/?sku={{ partner_sku }}" class="btn btn-link">
                            {{ switch_link_text }}
                        </a>
                    </div>
                {% endif %}

                {% if enable_client_side_checkout %}

                    <form class="payment-form form-horizontal" method="post" action="{{ payment_url }}"
                          data-signing-url="{% url 'cybersource_submit' %}">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-sm-4">
                                <fieldset>
                                    <legend>{% trans "Billing Information" %}</legend>
                                    {{ payment_form|crispy }}
                                </fieldset>
                            </div>
                            <div class="col-sm-offset-2 col-sm-4">
                                <fieldset>
                                    <legend>{% trans "Payment Details" %}</legend>
                                    <div class="pci-fields">
                                        <div class="form-group">
                                            <label for="id_card_type" class="control-label">
                                                {% trans "Card Type" %}
                                            </label>
                                            <select id="id_card_type" name="card_type" class="form-control pci-field">
                                                <option>{% trans "(Select a card type)" %}</option>
                                                <option value="001">{% trans "Visa" %}</option>
                                                <option value="002">{% trans "MasterCard" %}</option>
                                                <option value="003">{% trans "American Express" %}</option>
                                                <option value="003">{% trans "Discover" %}</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="id_card_number" class="control-label">
                                                {% trans "Card Number" %}
                                            </label>
                                            <input id="id_card_number" name="card_number" class="form-control pci-field"
                                                   maxlength="20"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="id_card_expiry_date" class="control-label">
                                                {% trans "Expiration Date" %} (MM-YYYY)
                                            </label>
                                            <input id="id_card_expiry_date" name="card_expiry_date"
                                                   class="form-control pci-field" maxlength="7"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="id_card_cvn" class="control-label">
                                                {% trans "CVV" %}
                                            </label>
                                            <input id="id_card_cvn" name="card_cvn" class="form-control pci-field"
                                                   maxlength="4"/>
                                        </div>
                                    </div>

                                    <button type="submit" class="btn btn-primary btn-large" data-track-type="click"
                                            data-track-event="edx.bi.ecommerce.basket.payment_selected"
                                            data-track-category="checkout" data-processor-name="cybersource_sop"
                                            data-course-id="{{ course.id }}">
                                        {% trans "Checkout" %}
                                    </button>
                                </fieldset>
                            </div>
                        </div>
                    </form>
                {% endif %}
                <div class="pull-right payment-buttons" data-basket-id="{{ basket.id }}">
                    {% if free_basket %}
                        <a href="{% url 'checkout:free-checkout' %}"
                           data-track-type="click"
                           data-track-event="edx.bi.ecommerce.basket.free_checkout"
                           data-track-category="checkout"
                           data-course-id="{{ course.id }}"
                           class="btn btn-success checkout-button">
                            {% trans "Place Order" %}
                        </a>
                    {% else %}
                        {% for processor in payment_processors %}
                            <button data-track-type="click"
                                    data-track-event="edx.bi.ecommerce.basket.payment_selected"
                                    data-track-category="checkout"
                                    data-processor-name="{{ processor.NAME }}"
                                    data-course-id="{{ course.id }}"
                                    class="btn payment-button"
                                    value="{{ processor.NAME|lower }}"
                                    id="{{ processor.NAME|lower }}">
                                {% if processor.NAME == 'cybersource' %}
                                    {% trans "Checkout" %}
                                {% elif processor.NAME == 'paypal' %}
                                    {# Translators: Do NOT translate the name PayPal. #}
                                    {% trans "Checkout with PayPal" %}
                                {% endif %}
                            </button>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="row verification-note">
            <div class="col-sm-12">
                <span><i class="fa fa-exclamation-circle"></i></span>
                {# Translators: <b></b> tags will bold the text within. Keep the tags and translate the text within. #}
                {% if is_verification_required %}
                    {% trans "<b>Note:</b> To earn a verified certificate, you must verify your identity with a <b>webcam</b> and a <b>government-issued photo ID</b>. " %}
                {% else %}
                    {% trans "<b>Note:</b> To complete your enrollment, select Checkout or Checkout with PayPal." %}
                {% endif %}
            </div>
        </div>
        <div class="row help">
            <div class="col-sm-12">
                <p><b>{% trans "Have questions?" %}</b></p>
                <a href="{{ support_url }}">{% trans "Please read our FAQs to view common questions about our certificates." %}</a>
            </div>
        </div>
    </div>
{% else %}
    {% block emptybasket %}
        <div class="depth depth-2 message-error">
            <h3>{% trans "Your purchase could not be completed" %}</h3>
            {% captureas dashboard_link_start %}
                <a href="{{ homepage_url }}">
            {% endcaptureas %}

            {% captureas support_link_start %}
                <a href="{{ support_url }}">
            {% endcaptureas %}

            {% blocktrans with link_end="</a>" %}
                You have not been charged. Return to your {{ dashboard_link_start }}dashboard{{ link_end }} to try
                again, or {{ support_link_start }}contact {{ platform_name }} Support{{ link_end }}.
            {% endblocktrans %}
        </div>
    {% endblock %}
{% endif %}