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


<div class="container">
    {% if basket_warnings %}
        <h5>{% trans "Important messages about items in your basket" %}</h5>
        {% for warning in basket_warnings %}
            <div class="alert alert-warning">{{ warning }}</div>
        {% endfor %}
    {% endif %}

    {% if upsell_messages %}
        <div class="row">
            <div class="col-12">
                <div class="card bg-light text-danger mt-5">
                    <div class="card-body">
                        {% for upsell in upsell_messages %}
                            {% with message=upsell.message url=upsell.offer.get_absolute_url offer_name=upsell.offer.name %}
                                {% comment %}
                                <div class="warning">{{ message }} to qualify for the <a
                                        href="{{ url }}">{{ offer_name }}</a>
                                    special offer
                                </div>
                                {% endcomment %}
                                <div class="warning">{{ message }}</div>
                            {% endwith %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <div class="row">
        <div class="col-12">
            <h1 class="text-center mt-5">{% trans "Basket" %}</h1>
        </div>
    </div>
    {% if not basket.is_empty %}
        <div class="card shadow-sm">
            <div class="card-body">
                {% block basket_form_headers %}
                    <div class="basket-title">
                        <div class="row">
                            <p class="col-sm-6 strong">{% trans "What's in your bag" %}</p>
                            <p class="col-sm-2 strong">{% trans "Quantity" %}</p>
                            <p class="col-sm-2 strong text-right">{% trans "Price" %}</p>
                            <p class="col-sm-2 strong text-right">{% trans "Total" %}</p>
                        </div>
                    </div>
                {% 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 %}
                                {% purchase_info_for_line request line as session %}
                                <div class="basket-items">
                                    <div class="row d-flex align-items-start">
                                        <div class="col-sm-2 basket-line-image">
                                            {{ form.id }}
                                            {% with image=product.primary_image %}
                                                {% thumbnail image.original "200x200" upscale=False as thumb %}
                                                    {% if product.get_product_class.front_end_view %}
                                                        <a href="{{ product.get_absolute_url }}">
                                                            <img class="img-fluid img-thumbnail" src="{{ thumb.url }}"
                                                                 alt="{{ product.get_title }}"/>
                                                        </a>
                                                    {% else %}
                                                        <img class="img-fluid img-thumbnail" src="{{ thumb.url }}"
                                                             alt="{{ product.get_title }}"/>
                                                    {% endif %}
                                                {% endthumbnail %}
                                            {% endwith %}
                                        </div>
                                        <div class="col-sm-4">
                                            <h4 class="mb-1">
                                                {% if product.get_product_class.front_end_view %}
                                                    <a href="{{ product.get_absolute_url }}">{{ line.product.get_title }}</a>
                                                {% else %}
                                                    {{ line.product.get_title }}
                                                {% endif %}
                                            </h4>
                                            <div class="d-block">
                                                {% if product.subscription %}
                                                    <button class="btn btn-xs btn-danger">Subscription</button>
                                                {% endif %}
                                                {% if product.get_product_class.name == 'Rewards' %}
                                                    <button class="btn btn-xs btn-danger">Redemption</button>
                                                {% endif %}
                                            </div>
                                            {% comment %}
                                            <small class="small clearfix availability {{ session.availability.code }}">{{ session.availability.message }}</small>
                                            {% endcomment %}
                                            {% for attribute in line.attributes.all %}
                                                <small class="d-block mb-1">
                                                    {% if attribute.option.code == 'subscription-interval' %}
                                                        {% if product.subscription == True %}
                                                            <strong>{{ attribute.option.name }}: </strong>Every
                                                            {{ attribute.value }} days
                                                        {% endif %}
                                                    {% elif attribute.option.code == 'surprise' %}
                                                        {% if product.subscription == True %}
                                                            <strong>{{ attribute.option.name }}: </strong>
                                                            {% if attribute.value %}Yes{% else %}No{% endif %}
                                                        {% endif %}
                                                    {% else %}
                                                        <strong>{{ attribute.option.name }}: </strong>
                                                        {{ attribute.value }}
                                                    {% endif %}
                                                </small>
                                            {% endfor %}
                                            {% for item in line.product.attribute_values.all %}
                                                {% if item.attribute.use_for_variations %}
                                                    <small class="d-block mb-1">
                                                        <strong>{{ item.attribute }}: </strong>{{ item.value }}
                                                    </small>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                        <div class="col-sm-2 col-6">
                                            <div class="checkout-quantity">
                                                <div class="input-group  {% if form.errors %}error{% endif %}">
                                                    {% render_field form.quantity class+="input-quantity" %}
                                                    <button class="btn btn-default d-none" type="submit"
                                                            data-loading-text="{% trans 'Updating...' %}">{% trans "Update" %}</button>
                                                </div>
                                            </div>
                                            <div class="d-block text-center">
                                                <a href="#" data-id="{{ forloop.counter0 }}" data-behaviours="remove"
                                                   class="small inline">{% 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="icon-exclamation-sign"></i> {{ error }}</span>
                                                    {% endfor %}

                                                {% endfor %}
                                            </div>

                                        </div>
                                        <div class="col-sm-2 col-6 text-right line-item-price">
                                            {% if not line.unit_price_incl_tax and not line.unit_tax_excl_tax %}
                                                <p class="">&mdash;</p>
                                            {% else %}
                                                <p class="price_color">
                                                    {% if line.is_tax_known %}
                                                        {{ line.unit_price_incl_tax|currency:line.price_currency }}
                                                    {% else %}
                                                        {{ line.unit_price_excl_tax|currency:line.price_currency }}
                                                    {% endif %}
                                                </p>
                                            {% endif %}
                                        </div>
                                        <div class="col-sm-2 text-right line-item-total">
                                            {% if not line.line_price_incl_tax and not line_price_excl_tax %}
                                                <p class="">&mdash;</p>
                                            {% else %}
                                                <p class="price_color">
                                                    {% if line.is_tax_known %}
                                                        {{ line.line_price_incl_tax|currency:line.price_currency }}
                                                    {% else %}
                                                        {{ line.line_price_excl_tax|currency:line.price_currency }}
                                                    {% endif %}
                                                </p>
                                            {% endif %}
                                        </div>
                                        <div class="col-sm-12">
                                            <hr>
                                        </div>
                                    </div>
                                </div>
                            {% endwith %}
                        {% endfor %}
                    </form>
                {% endblock %}
            </div>
        </div>

        <div class="space-2"></div>

        <div class="row">
            {% block vouchers %}
                {# Hide the entire section if a custom BasketView doesn't pass in a voucher form #}
                {% if voucher_form %}
                    <div class="col-sm-6">
                        <div class="sub-header">
                            <h2>{% trans "Voucher/promo code" %}</h2>
                        </div>
                        <p id="voucher_form_link">
                            <a href="#voucher" class="btn btn-primary btn-full">
                                <i class="fa fa-hand-point-right"></i>
                                {% trans "I have a voucher code..." %}
                            </a>
                        </p>

                        <div id="voucher_form_container" style="display:none">
                            <form id="voucher_form" action="{% url 'basket:vouchers-add' %}" method="post">
                                {% csrf_token %}
                                {% include "partials/form_fields.html" with form=voucher_form %}
                                <button type="submit" class="btn btn-info"
                                        data-loading-text="{% trans 'Adding...' %}">{% trans "Add voucher" %}</button>
                                {% trans "or" %} <a href="#" id="voucher_form_cancel">{% trans "cancel" %}</a>
                            </form>
                        </div>
                        <div class="d-block mt-5">
                            <div class="sub-header">
                                <h2>Gift Card</h2>
                            </div>
                            <div class="d-block">
                                <a data-toggle="collapse" href="#giftcard_form_container" role="button" aria-expanded="false" aria-controls="giftcard_form_container" class="btn btn-primary btn-full">
                                    <i class="fa fa-hand-point-right"></i>
                                    {% trans "I have a gift card..." %}
                                </a>
                            </div>
                            <div id="giftcard_form_container" class="collapse">
                                <form action="{% url 'giftcard:redeem_giftcard' %}" method="post">
                                    {% csrf_token %}
                                    {% include "partials/form_fields.html" with form=gift_card_form %}
                                    <button type="submit" class="btn btn-info"
                                            data-loading-text="{% trans 'Adding...' %}">{% trans "Redeem Gift Card" %}</button>
                                    {% trans "or" %} <a href="#" id="giftcard_form_cancel">{% trans "cancel" %}</a>
                                </form>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endblock vouchers %}
            <div class="col-sm-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        {% block baskettotals %}
                            <div class="sub-header">
                                <h2>{% trans "Total" %}</h2>
                            </div>
                            {% include 'basket/partials/basket_totals.html' with editable=1 %}
                        {% endblock baskettotals %}
                        {% block formactions %}
                            <div class="form-group clearfix">
                                <a href="{% url 'checkout:index' %}" class="btn btn-lg shadow-sm btn-primary btn-block">
                                    {% trans "Proceed to checkout" %}
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                            </div>
                        {% endblock formactions %}
                    </div>
                </div>
                <div class="space-2"></div>
            </div>
        </div>

    {% else %}
        {% block emptybasket %}
            {% if user.is_authenticated %}
                <p class="text-center mb-5 mt-5">
                    {% trans "Your basket is empty." %}
                    <a href="{{ homepage_url }}">{% trans "Continue shopping" %}</a>
                </p>
            {% else %}
                <p class="text-center mb-5 mt-5">
                    {% trans "Please login to view your basket - " %}
                    <a class="primary strong" href="{% url 'customer:login' %}">{% trans "Login Here" %}</a>
                </p>
            {% endif %}
        {% endblock %}
    {% endif %}

    {% block savedbasket %}
        {% if user.is_authenticated and saved_formset %}
            <div class="well">
                <div class="sub-header">
                    <h2>{% trans "Wishlist" %}</h2>
                </div>
                <div class="row basket-title hidden-xs">
                    <p class="col-sm-8 h4">{% trans "Items" %}</p>
                    <p class="col-sm-2 h4 align-center">{% trans "Price" %}</p>
                    <div class="col-sm-2">&nbsp;</div>
                </div>
                <form action="{% url 'basket:saved' %}" method="post" class="form-stacked later_summary"
                      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 "100x100" upscale=False as thumb %}
                                            <a href="{{ form.instance.product.get_absolute_url }}">
                                                <img class="img-fluid img-thumbnail" src="{{ thumb.url }}"
                                                     alt="{{ form.instance.product.get_title }}">
                                            </a>
                                        {% endthumbnail %}
                                    {% endwith %}
                                </div>
                                <div class="col-sm-6">
                                    <h3>
                                        <a href="{{ form.instance.product.get_absolute_url }}">{{ form.instance.description }}</a>
                                    </h3>
                                    <p class="availability {{ session.availability.code }}">{{ session.availability.message }}</p>
                                    <a href="#" data-id="{{ forloop.counter0 }}"
                                       data-behaviours="remove">{% trans "Remove" %}</a>
                                    <div style="display:none">
                                        {{ form.move_to_basket }}
                                        {{ form.DELETE }}
                                    </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="btn pull-right btn-block"
                                       data-behaviours="move">{% trans "Move to basket" %}</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </form>
            </div>
        {% endif %}
    {% endblock %}
</div>