{% spaceless %}

{% if data.basket.qty > 0 %}
    <table style="width: 100%">
        <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 }}</td>
                    <td>{{ item.variant.sale_price_display.formatted_html | safe }}</td>
                    <td>
                        {% if item.qty > 1 %}
                            <button onclick="setBasket({{ item.variant.id }}, {{ item.qty|add:'-1' }}, false)">-</button>
                        {% else %}
                            <button disabled>-</button>
                        {% endif %}
                        <span style="padding: 0 7px;">x{{ item.qty }}</span>
                        <button onclick="setBasket({{ item.variant.id }}, {{ item.qty|add:'1' }}, false)">+</button>
                    </td>
                    <td>{{ item.variant.qty_sale_price.formatted_html | safe }}</td>
                    <td style="text-align: right;">{{ item.price.formatted_html | safe }}</td>
                    <td style="color: blue; cursor: pointer; font-size: 12px; text-decoration: underline;">
                        <span onclick="setBasket({{ item.variant.id }}, 0, false)">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)">move to wishlist</span>
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <th colspan="4"></th>
                <th>{{ data.basket.sale_price.formatted_html | safe }}</th>
            </tr>
        </tfoot>
    </table>

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