{% spaceless %}

{% load i18n salebox_utils %}

{% if data.basket.qty > 0 %}
    <table style="width: 100%">
        {% block thead %}{% endblock %}
        {% block pre_tbody %}{% endblock %}
        {% block tbody %}
            <tbody>
                {% for item in data.basket.items %}
                    <tr>
                        <td style="background: #f8f8f8; color: #ccc; height: 50px; text-align: center; vertical-align: middle; width: 50px;">
                            {% if item.image %}
                                <img src="{{ item.image }}" style="height: 50px; width: 50px;" />
                                {% else %}
                                <span>n/a</span>
                            {% endif %}
                        </td>
                        <td>{{ item.variant.name }}{% if item.variant.preorder_flag %} <span>PREORDER</span>{% endif %}</td>
                        <td>{{ item.variant|sb_currency }}</td>
                        <td>
                            {% if disable_qty_change is not True %}
                                {% if item.qty > 1 %}
                                    <button onclick="setBasket({{ item.variant.id }}, {{ item.qty|add:'-1' }}, false)">-</button>
                                {% else %}
                                    <button disabled>-</button>
                                {% endif %}
                            {% endif %}
                            <span style="padding: 0 7px;">x{{ item.qty }}</span>
                            {% if disable_qty_change is not True %}
                                <button onclick="setBasket({{ item.variant.id }}, {{ item.qty|add:'1' }}, false)">+</button>
                            {% endif %}
                        </td>
                        <td>{{ item.variant.qty_sale_price|sb_currency }}</td>
                        <td style="text-align: right;">{{ item.price|sb_currency }}</td>
                        <td style="color: blue; cursor: pointer; font-size: 12px; text-decoration: underline;">
                            <span onclick="setBasket({{ item.variant.id }}, 0, false)">{% trans "Remove" %}</span>
                        </td>
                        {% if request.user.is_authenticated %}
                            <td style="color: blue; cursor: pointer; font-size: 12px; text-decoration: underline;">
                                <span onclick="switchBasketWishlist({{ item.variant.id }}, false)">{% trans "Move to wishlist" %}</span>
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}
            </tbody>
        {% endblock %}
        {% block post_tbody %}{% endblock %}
        {% block tfoot %}
            <tfoot>
                <tr>
                    <th colspan="4"></th>
                    <th>{{ data.basket.sale_price|sb_currency }}</th>
                </tr>
            </tfoot>
        {% endblock %}
    </table>

    <br />
    <button onclick="alert('Coming soon')">{% trans "Checkout" %}</button>
{% else %}
    <div>{% trans "Your basket is empty" %}</div>
{% endif %}
{% endspaceless %}
