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

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

<div id="content-inner">
    {% block basket_form_main %}
        <form action="." method="post">
            {% 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 product-image">
                            {{ form.id }}
                            <img class="thumbnail" src="{{ line_data.image_url|default_if_none:'' }}"
                                 alt="{{ line_data.product_title|default_if_none:'' }}"/>
                        </div>
                        <div class="col-md-5 col-sm-12">
                            <p class="product-title">{{ line_data.product_title }} {% if line_data.course_key %}- {{ line_data.course_key.org }}
                                ({{ line_data.course_key.run }}) {% endif %}</p>
                            <p class="product-description">{{ line_data.product_description }}</p>
                        </div>
                        {% if line_data.enrollment_code %}
                            <div class="col-md-1 col-xs-12">
                                <label class="product-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="product-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 product-prices pull-right">
                            {% if line_data.enrollment_code %}
                                <label class="product-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 show_voucher_form %}
                {% block vouchers %}
                    {% if basket.contains_a_voucher %}
                        <div class="vouchers col-sm-7 col-xs-8">
                            {% 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-7 col-xs-8">
                                <p id="voucher_form_link">
                                    <a href="#voucher">{% trans "Apply a coupon code" %}</a>
                                </p>
                                {% include 'basket/partials/add_voucher_form.html' %}
                            </div>
                        {% endif %}
                    {% endif %}
                {% endblock vouchers %}
            {% endif %}

            <div id="basket_totals" class="col-xs-4">
                {% block order_total %}
                    {% trans "Total:" %}
                    {{ order_total.incl_tax|currency:basket.currency }}
                {% endblock %}
            </div>
        </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 %}

            <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_key }}"
                       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|lower }}"
                                data-course-id="{{ course_key }}"
                                data-checkout-type="hosted"
                                class="btn payment-button"
                                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: <strong></strong> tags will bold the text within. Keep the tags and translate the text within. #}
            {% if display_verification_message %}
                {% trans "<strong>Note:</strong> To earn a verified certificate, you must verify your identity with a <strong>webcam</strong> and a <strong>government-issued photo ID</strong>. " %}
            {% else %}
                {% trans "<strong>Note:</strong> To complete your enrollment, select Checkout or Checkout with PayPal." %}
            {% endif %}
        </div>
    </div>
    <div class="row help">
        <div class="col-sm-12">
            <p><strong>{% trans "Have questions?" %}</strong></p>
            <a href="{{ support_url }}">{% trans "Please read our FAQs to view common questions about our certificates." %}</a>
        </div>
    </div>
</div>