{% load history_tags %}
{% load basket_tags %}
{% load currency_filters %}
{% load thumbnail %}
{% load i18n %}
{% load static %}
{% load ocyanjson ocyan_thumbnail extra_purchase_info_tags %}

<div class="basket-header">
    <span class="h4">{% trans "Basket" %}</span>
</div>
<div class="basket-mini-items-wrapper {% if request.basket.all_lines|length > 4 %}overlay{% endif %}">
    {% if request.basket.num_lines %}
    <ul class="basket-mini-items">
        {% for line in request.basket.all_lines %}
        <li class="product-line">
            <div class="row">
                <div class="col-2 product-image-wrapper">
                    <div class="product-image">
                        {% with image=line.product.primary_image %}
                        <a href="{{ line.product.get_absolute_url }}" aria-label="Product image" tabindex="-1">
                            {% picture image.original "440x400" upscale=False alt=image.caption|default:line.product.title %}
                        </a>
                        {% endwith %}
                    </div>
                </div>
                <div class="col-10">
                    <div class="row">
                        <div class="col-7">
                            <div class="product-description">
                                <strong><a href="{{ line.product.get_absolute_url }}" class="product-link">{{ line.description }}</a></strong>
                                <div class="product_options">
                                    <div class="product-attr">{% trans "Amount" %}: {{ line.quantity }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="product-price">
                                {% total_purchase_info_for_line request line as session %}
                                {% 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" %}
                            </div>
                        </div>
                        {% if line.attributes %}
                        <div class="col-12 line-attributes">
                            {% for option in line.attributes.all %}
                            <div class="product-attr"><div><b>{{ option.option }}</b></div> {% if option.display_value == True %} {% trans "Yes" %} {% elif option.display_value == False %} {% trans "No" %} {% else %}{{ option.display_value }}{% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </li>
        {% endfor %}
    </ul>
    <div class="form-group form-actions basket-bottom">
        <div class="basket-totals">
            {% if request.basket.offer_discounts or request.basket.grouped_voucher_discounts %}
            <hr>
            <div class="totals-line">
                <p>
                    {% trans "Basket total" %}:
                </p>
                <p>
                    {{ request.basket.total_incl_tax_excl_discounts|currency:request.basket.currency  }}
                </p>
            </div>
            <div class="totals-line">
                <p>{% trans "Discount" %}:</p>
                <p>- {{ request.basket.total_discount|currency:request.basket.currency  }}</p>
            </div>
            {% endif %}
            <hr>
            <div class="totals-line total">
                <p><b>{% trans 'Total incl. tax' %}</b></p> 
                <p><b>{{ request.basket.total_incl_tax|currency:request.basket.currency }}</b></p>
            </div>
        </div>
        <div class="basket-buttons">
            <a href="{% url 'basket:summary' %}" class="btn btn-outline-primary text-primary btn-block">{% trans "View basket" %}</a>
            <a href="{% url 'checkout:index' %}" class="btn btn-primary btn-block">{% trans "Checkout" %}</a>
        </div>
    </div>
    {% else %}
    <div class="basket-empty"><p>{% trans "Your basket is empty." %}</p></div>
    {% endif %}
</div>