{% load i18n %}
{% load currency_filters %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% load staticfiles %}

{% include 'partials/alert_messages.html' %}

<div id="summary" class="col-sm-5">
    <form action="." method="post" class="row">
        {% csrf_token %}
        {{ formset.management_form }}

        <p class="title">{% trans "IN YOUR CART" %}</p>
        {% for form, line_data in formset_lines_data %}
            {{ form.id }}
            <div class="product col-sm-12">
                <div class="product-image col-sm-5 col-xs-5">
                    <img class="thumbnail" src="{{ line_data.image_url|default_if_none:'' }}"
                         alt="{{ line_data.product_title|default_if_none:'' }}"/>
                </div>
                <div class="product-information col-sm-7 col-xs-7">
                    <p class="product-name">{{ line_data.product_title }}</p>
                    {% include 'oscar/basket/partials/seat_type.html' %}
                </div>
                {% if line_data.enrollment_code %}
                    <div class="col-sm-12 col-xs-12 form-inline quantity-group">
                        <label class="product-price-label text-muted quantity-label">{% 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>
                            <button class="btn btn-primary update-button quantity-update" type="submit"
                                    data-loading-text="{% trans 'Updating...' %}">{% trans "Update" %}</button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </form>
    <fieldset aria-live="polite">
        <legend>{% trans "SUMMARY" %}</legend>
        <div id="line-price" class="amount row">
            <span class="description">{% trans "Price" %}</span>
            <span class="price">{{basket.total_incl_tax_excl_discounts|currency:basket.currency}}</span>
        </div>
        {% if basket.total_discount %}
            <div id="line-discount" class="amount row">
                <span class="description">{% trans "Discounts applied" %}</span>
                <span class="price">-{{basket.total_discount|currency:basket.currency}}</span>
            </div>
        {% endif %}
        <div id="voucher-information" class="row">
            {% if show_voucher_form %}
                {% block vouchers %}
                    {% if basket.contains_a_voucher %}
                        <div class="vouchers">
                            {% for voucher in basket.vouchers.all %}
                                <p class="voucher">
                                    {% blocktrans with voucher_code=voucher.code %}
                                        Coupon {{ voucher_code }} applied for {{ total_benefit }} off
                                    {% endblocktrans %}
                                    <form action="{% url 'basket:vouchers-remove' pk=voucher.id %}" method="POST">
                                        {% csrf_token %}
                                        <button class="remove-voucher" type="submit" aria-label={% trans "Remove coupon" %}>Remove</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">
                                <button type="button" class="btn btn-default" id="voucher_form_link">
                                    {% trans "Add Coupon Code" %}
                                </button>
                                {% include 'basket/partials/add_voucher_form.html' %}
                            </div>
                        {% endif %}
                    {% endif %}
                {% endblock vouchers %}
            {% endif %}
        </div>
        <div id="basket-total" class="row" aria-describedby="total-price-desc">
            <span id="total-price-desc" class="description">{% trans "TOTAL" %}</span>
            <span class="price">{{ order_total.incl_tax|currency:basket.currency }}</span>
        </div>
    </fieldset>
    {% if order_details_msg %}
        <div id="order-details">
            <p class="title">{% trans "ORDER DETAILS" %}</p>
            <p>{{ order_details_msg }}</p>
        </div>
    {% endif %}
</div>


<form id="paymentForm" class="payment-form form-horizontal" method="post" aria-live="polite">
    {% csrf_token %}

    <div id="payment-information" class="col-sm-7">
        {% if not free_basket %}
        {% if paypal_enabled %}
        <div id="payment-method-information" class="placeholder row">
            <fieldset>
                <legend>{% trans "SELECT PAYMENT METHOD" %}</legend>
                <div class="col-sm-12 payment-methods">
                    <div id="payment-method" class="col-md-4 col-sm-7 col-xs-6">
                        <a href="#payment-information" id="payment-method-image" aria-label={% trans "Pay with a Credit Card" %} role="button"><img aria-hidden="true" src="/static/images/credit_card_options.png" alt="{% trans "Credit cards" %}"></a>
                    </div>
                    <div id="payment-processor" class="payment-buttons col-md-3 col-sm-5 col-xs-6" data-basket-id="{{ basket.id }}">
                        {# Translators: Do NOT translate the name PayPal. #}
                        <button aria-label={% trans "Pay with PayPal" %}
                                data-track-type="click"
                                data-track-event="edx.bi.ecommerce.basket.payment_selected"
                                data-track-category="checkout"
                                data-processor-name="paypal"
                                data-course-id="{{ course_key }}"
                                class="btn payment-button payment-processor-paypal"
                                value="paypal"
                                type="button"
                                role="button">
                        </button>
                    </div>
                </div>
            </fieldset>
        </div>
        {% endif %}
        <div id="card-holder-information" class="form-input-elements placeholder row">
            <fieldset>
                <legend aria-label={% trans "Card holder information" %}>{% trans "CARD HOLDER INFORMATION" %}</legend>
                {% if sdn_check %}
                    <input type="hidden" name="sdn-check" value="enabled">
                {% endif %}
                {% crispy payment_form %}
            </fieldset>
        </div>
        {% endif %}
        <div class="form-input-elements placeholder">
            <fieldset>
                {% if not free_basket %}
                <legend aria-label={% trans "Billing information" %}>{% trans "BILLING INFORMATION" %}</legend>
                {% if not paypal_enabled %}
                <img aria-hidden="true" class="credit-card-list" src="/static/images/credit_card_options.png" alt="{% trans "Credit cards" %}">
                {% endif %}
                <div class="pci-fields row">
                    {# NOTE: The PCI fields should NOT have name attributes by default. This ensures the fields are #}
                    {# not posted to the server if JavaScript is disabled/fails. The processor-specific JS should #}
                    {# restore the name attribute to ensure this information is sent to the payment processor. #}
                    <div class="form-group col-md-6">
                        <label for="card-number" class="control-label">{% trans "Card Number (required)" %}<span class="sr">, {% trans "Secure" %}</span></label>
                        <input id="card-number" type="text" class="form-control pci-field" maxlength="20" required aria-required="true" pattern="[0-9]*"/>
                        <i class="fa fa-lock" aria-hidden="true"></i>
                        <img class="card-type-icon hidden" alt="{% trans "Credit card icon" %}">
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="card-cvn" class="control-label">
                            {% trans "Security Code (required)" %}
                            <span class="sr">, {% trans "Secure" %}</span>
                            <i class="fa fa-question-circle" aria-hidden="true" role="tooltip" title="{%  trans "The three last digits in the signature area on the back of your card. For American Express, it is the four digits on the front of the card." %}"></i>
                        </label>
                        <input type="password" id="card-cvn" class="form-control pci-field" maxlength="4" required aria-required="true" pattern="[0-9]*"/>
                        <i class="fa fa-lock" aria-hidden="true"></i>
                        <p class="help-block"></p>
                    </div>
                    <label id="expiration-label" for="card-expiry-month" class="control-label">{% trans "Expiration (required)" %}</label>
                    <div class="form-group col-sm-6 col-xs-7">
                        <select id="card-expiry-month" class="form-control pci-field" required aria-required="true">
                            <option>{% trans "(Month)" %}</option>
                            {% for month in months %}
                                <option value="{{forloop.counter|stringformat:'02d'}}">{{month}}</option>
                            {% endfor %}
                        </select>
                        <p class="help-block"></p>
                    </div>
                    <div class="form-group col-sm-6 col-xs-5">
                        <select id="card-expiry-year" class="form-control pci-field" required aria-required="true">
                            <option>{% trans "(Year)" %}</option>
                            {% for year in years %}
                                <option value="{{year}}">{{year}}</option>
                            {% endfor %}
                        </select>
                        <p class="help-block"></p>
                    </div>
                </div>
                {% endif %}
                <div class="payment-button col-sm-6 col-sm-offset-6 col-xs-12">
                {% 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-primary btn-large col-sm-12 col-xs-12">
                        {% trans "Place Order" %}
                    </a>
                {% else %}
                    <button id="payment-button" type="submit" class="btn btn-primary btn-large col-sm-12 col-xs-12"
                            data-track-type="click"
                            data-track-event="edx.bi.ecommerce.basket.payment_selected"
                            data-track-category="checkout"
                            data-processor-name="{{ client_side_payment_processor.NAME }}"
                            data-course-id="{{ course_key }}"
                            data-track-checkout-type="client_side">
                      {% trans "Place Order" %}
                    </button>
                {% endif %}
                </div>
            </fieldset>
        </div>
    </div>
</form>