{% extends 'oscar/basket/partials/basket_content.html' %}
{% load i18n thumbnail ocyanjson widget_tweaks currency_filters display_tags purchase_info_tags extra_purchase_info_tags %}

{% block basket_form_headers %}
{% endblock %}

{% block basket_form_main %}
    <form method="post" class="basket_summary" id="basket_formset">
        {% csrf_token %}
        {{ formset.management_form }}

        {% for form in formset %}
            {% with line=form.instance product=form.instance.product %}
                <div class="basket-items">
                    <div class="row align-items-start">
                        <div class="col-sm-2">
                            {{ form.id }}
                            {% with image=product.primary_image %}
                                {% thumbnail image.original "120x120" upscale=False as thumb %}
                                    <a href="{{ product.get_absolute_url }}">
                                        <img class="thumbnail img-fluid d-block mx-auto" src="{{ thumb.url }}" alt="{{ product.get_title }}" />
                                    </a>
                                {% endthumbnail %}
                            {% endwith %}
                        </div>
                        <div class="col-sm-5">
                            {% block productdescription %}
                            <a href="{{ product.get_absolute_url }}" class="text-dark"><b>{{ line.product.title }}</b></a>

                            {% if line.attributes.all %}
                            <ul class="product-options mt-2">
                                {% for option in line.attributes.all %}
                                <li>{{ option.option.name }} <span class="option-value">{{ option.display_value }}</span></li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                            <div class="line-description my-1 d-block">
                                <div class="text-muted">
                                    {{line.product.description|safe|striptags|truncatechars:100}}
                                </div>
                            </div>

                            {% endblock %}
                        </div>
                        <div class="col-sm-3">
                            <div class="checkout-quantity mb-4">
                                <div class="input-group  {% if form.errors %}error{% endif %}">
                                    {% render_field form.quantity class+="form-control" %}
                                    <span class="input-group-append">
                                        <button class="btn btn-primary" type="submit" aria-labelby="Update" data-loading-text="{% trans 'Updating...' %}">{% trans "Update" %}</button>
                                    </span>
                                </div>
                            </div>
                            <div>
                                {% iffeature "wishlists" %}{% if user.is_authenticated %}
                                    <a href="#" class="d-block mt-2" data-id="{{ forloop.counter0 }}" data-behaviours="save" class="inline"><i class="fa fa-heart"></i> {% trans "Save for later" %}</a>
                                {% endif %}{% endiffeature %}
                                <a class="text-danger d-block mt-1" href="#" data-id="{{ forloop.counter0 }}" data-behaviours="remove"><i class="fa fa-trash"></i> {% trans 'Remove' %}</a>

                                <div style="display:none">
                                    {{ form.save_for_later }}
                                    {{ form.DELETE }}
                                </div>
                                {% for field_errors in form.errors.values %}
                                    {% for error in field_errors %}
                                        <span class="error-block"><i class="fa fa-exclamation"></i> {{ error }}</span>
                                    {% endfor %}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col-sm-2 text-right">
                            {% total_purchase_info_for_line request line as session %}
                            {% if not line.line_price_incl_tax and not line_price_excl_tax %}
                                <p class="align-right">&mdash;</p>
                            {% elif line.is_tax_known %}
                                {% if session.price.from_price %}
                                    <span class="from_price">{{session.price.from_price.incl_tax|currency:session.price.currency}}</span>
                                {% endif %}
                                {% include "oscar/catalogue/partials/price.html" %}
                            {% else %}
                            <b class="price_color align-right m-0">
                                {% include "oscar/catalogue/partials/price.html" %}
                            </b>
                            {% endif %}
                        </div>
                        <div class="col-sm-1">
                        </div>
                    </div>
                </div>
            {% endwith %}
        {% endfor %}
    </form>
{% endblock %}

{% block formactions %}
{% endblock formactions %}

{% block vouchers %}
<div class="row row-basket-line px-2 py-3 my-5 mx-0">
    {# Hide the entire section if a custom BasketView doesn't pass in a voucher form #}
    {% ocyanjson "oscar_checkout" "show_voucher_block" True as show_voucher_block %}
    {% if show_voucher_block and voucher_form %}
        <div class="col-sm-6">
            <div class="sub-header">
                <h4 class="mb-3">{% trans "I have a voucher code..." %}</h4>
            </div>
            <p id="voucher_form_link"><a href="#voucher" class="btn btn-secondary btn-full mt-2">{% trans "Add voucher" %}</a></p>

            <div id="voucher_form_container" style="display:none">
                <form id="voucher_form" action="{% url 'basket:vouchers-add' %}" method="post">
                    {% csrf_token %}
                    {% include "oscar/partials/form_fields.html" with form=voucher_form %}
                    <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Adding...' %}">{% trans "Add voucher" %}</button>
                    <a href="#" id="voucher_form_cancel" class="btn btn-danger">{% trans "cancel" %}</a>
                </form>
            </div>
        </div>
    {% endif %}
{% endblock vouchers %}

{% block baskettotals %}
    <div class="col-sm-6">
        {% include 'basket/partials/basket_totals.html' with editable=1 %}
        <a href="{% url 'checkout:index' %}" class="btn btn-lg btn-primary btn-block mb-1 mt-3">{% trans "Proceed to checkout" %}</a>

    </div>
</div>
{% endblock baskettotals %}

{% block emptybasket %}
    <p>
        {% trans "Your basket is empty." %}
        <a href="{% url 'wagtail_serve' '' %}">{% trans "Continue shopping" %}</a>
    </p>
{% endblock %}



{% block savedbasket %}
    {% if user.is_authenticated and saved_formset %}
        <div class="basket_summary saved_basket_summary mb-3 bg-bc px-2 py-3">
            <div class="basket-header px-3">
                <h4 class="mb-3">{% trans "Items to buy later" %}</h4>
            </div>
            <form action="{% url 'basket:saved' %}" method="post" class="form-stacked later_summary px-3" id="saved_basket_formset">
                {% csrf_token %}
                {{ saved_formset.management_form }}
                {% for form in saved_formset %}
                    {% purchase_info_for_product request form.instance.product as session %}
                    <div class="basket-items">
                        <div class="row">
                            <div class="col-sm-2">
                                {{ form.id }}
                                {% with image=form.instance.product.primary_image %}
                                    {% thumbnail image.original "120x120" upscale=False as thumb %}
                                        <a href="{{ form.instance.product.get_absolute_url }}">
                                            <img class="thumbnail img-fluid d-block mx-auto" src="{{ thumb.url }}" alt="{{ form.instance.product.get_title }}">
                                        </a>
                                    {% endthumbnail %}
                                {% endwith %}
                            </div>
                            <div class="col-sm-6">
                                <a class="text-dark" href="{{ form.instance.product.get_absolute_url }}"><b>{{ form.instance.description }}</b></a>
                                <div class="line-description my-1">
                                    {{ form.instance.product.description|safe|truncatechars:100 }}
                                </div>
                            </div>
                            {% purchase_info_for_product request form.instance.product as saved %}
                            <div class="col-sm-2 align-center">
                                <p class="price_color">
                                    {% if saved.price.is_tax_known %}
                                        {{ saved.price.incl_tax|currency:saved.price.currency }}
                                    {% else %}
                                        {{ saved.price.excl_tax|currency:saved.price.currency }}
                                    {% endif %}
                                </p>
                            </div>
                            <div class="col-sm-2">
                                <a href="#" data-id="{{ forloop.counter0 }}" class="d-block" data-behaviours="move"><i class="fa fa-cart-arrow-down pr-1"></i>{% trans "Move to basket" %}</a>
                                <a href="#" class="text-danger d-block mt-1" data-id="{{ forloop.counter0 }}" data-behaviours="remove"><i class="fa fa-trash pr-1 mt-2"></i> {% trans "Remove" %}</a>
                                <div style="display:none">
                                    {{ form.move_to_basket }}
                                    {{ form.DELETE }}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </form>
        </div>
    {% endif %}
{% endblock %}