{% load history_tags %}
{% load basket_tags %}
{% load currency_filters %}
{% load thumbnail %}
{% load i18n %}
{% load staticfiles %}
{% load ocyanjson ocyan_thumbnail %}

<div class="side-menu-header bg-light px-3 py-4 text-center open-shop">
    <p class="h5 m-0">{% trans "Basket" %}</p>
    <i class="fa fa-times close-shop"></i>
</div>
{% if request.basket.num_lines %}
<ul class="basket-mini-items nav flex-column flex-nowrap">
    {% for line in request.basket.all_lines %}
        <li class="nav-item product-line">
            <div class="row">
                <div class="col-3">
                    <div class="image_container">
                        {% with image=line.product.primary_image %}
                            
                            <a href="{{ line.product.get_absolute_url }}">
                                {% picture image.original "440x400" upscale=False alt=image.caption|default:line.product.title %}
                            </a>
                        {% endwith %}
                    </div>
                </div>
                <div class="col-9 d-md-flex align-items-center">
                    <div class="product-desc">
                        <strong class="d-block"><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></strong>
                        <span class="text-muted d-block"><small>{% trans 'Quantity' %}: {{ line.quantity }}</small> </span>
                        <div class="product_options text-muted {% if line.attributes.all %}py-1{% endif %}">
                        {% for option in line.attributes.all %}
                            <small class="d-block"><b class="pr-1">{{ option.option }}:</b>{{ option.display_value }}</small>
                        {% endfor %}
                        </div>
                    </div>
                    <div class="product-price">
                        {% if line.is_tax_known %}
                            {% ocyanjson "oscar" "show_tax_everywhere" False as show_tax %}
                            <p class="d-block mt-1">
                                <p class="mb-0">{{ line.line_price_incl_tax|currency:line.price_currency }}</p>{% if show_tax %}
                                {% with line.line_price_excl_tax|currency:line.price_currency as price_excl_tax %}
                                <small class="price_excl_tax no-slash">{% blocktrans %}Excl. tax {{ price_excl_tax }}{% endblocktrans %}</small>
                                {% endwith %}{% endif %}
                            </p>
                        {% else %}
                            <p class="d-block mt-1 mb-0">{{ line.line_price_excl_tax|currency:line.price_currency }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </li>
    {% endfor %}
</ul>
<div class="form-group form-actions basket-bottom">
    <div class="basket_totals px-3 text-center my-2">
        {% if request.basket.offer_discounts or request.basket.grouped_voucher_discounts %}
        <hr />
        <div class="d-flex">
            <p class="mr-auto mb-0">
                <b>{% trans "Basket total (before discounts)" %}:</b>
            </p>
            <p class="ml-auto mb-0" style="text-decoration: line-through">
                {% if basket.is_tax_known and not show_tax_separately %}
                    {{ request.basket.total_incl_tax_excl_discounts|currency:basket.currency }}
                {% else %}
                    {{ request.basket.total_excl_tax_excl_discounts|currency:basket.currency  }}
                {% endif %}
            </p>
        </div>
        <div class="d-flex">
            <p class="mr-auto mb-0"><b>{% trans "Discount" %}:</b></p>
            <p class="ml-auto mb-0"><b class="text-primary">{{ request.basket.total_discount|currency:basket.currency  }}</b></p>
        </div>
        {% endif %}
        <hr />
        {% if request.basket.is_tax_known %}
        <div class="d-flex">
            <p class="mr-auto mb-0"><b>{% trans 'Total incl. tax' %}</b></p> 
            <p class="ml-auto mb-0"><b class="text-primary">{{ request.basket.total_incl_tax|currency:request.basket.currency }}</b></p>
        </div>
        {% else %}
        <div class="d-flex">
            <p class="mr-auto mb-0"><b>{% trans 'Total excl. tax' %}</b></p> 
            <p class="ml-auto mb-0"><b class="text-primary">{{ request.basket.total_excl_tax|currency:request.basket.currency }}</b></p>
        </div>
        {% endif %}
    </div>
    <div class="p-3">
        <div class="row inline_bottom_basket">
            <div class="col-lg-6 mb-3 mb-lg-0 p-0 px-lg-3">
                <a href="{% url 'basket:summary' %}" class="btn btn-outline-primary text-primary btn-block">{% trans "View basket" %}</a>
            </div>
            <div class="col-lg-6 p-0 px-lg-3">
                <a href="{% url 'checkout:index' %}" class="btn btn-primary text-white btn-block">{% trans "Checkout" %}</a>
            </div>
        </div>
    </div>
</div>
{% else %}
    <div class="p-3 text-center"><p>{% trans "Your basket is empty." %}</p></div>
{% endif %}