{#
// inputs:
// - style: string - one of [dropdown, offcanvas] (default: dropdown)
#}

{% set style = style|default('dropdown') %}

<!-- .dropcart -->
<div class="dropcart dropcart--style--{{ style }}">
    {% if style == 'offcanvas' %}
        <div class="dropcart__backdrop"></div>
    {% endif %}
    <div class="dropcart__body">
        {% if style == 'offcanvas' %}
            <div class="dropcart__header">
                <div class="dropcart__title">Shopping Cart</div>
                <button class="dropcart__close" type="button">
                    <svg width="12px" height="12px">
                        <use xlink:href="images/sprite.svg#cross-12"></use>
                    </svg>
                </button>
            </div>
        {% endif %}

        <div class="dropcart__products-list">
            {% for product in cart.products %}
                <div class="dropcart__product">
                    <div class="product-image dropcart__product-image">
                        <a href="product.html" class="product-image__body">
                            <img class="product-image__img" src="{{ product.image }}.jpg" alt="">
                        </a>
                    </div>
                    <div class="dropcart__product-info">
                        <div class="dropcart__product-name"><a href="product.html">{{ product.name }}</a></div>
                        {% if product.options %}
                            <ul class="dropcart__product-options">
                                {% for option in product.options %}
                                    <li>{{ option.name }}: {{ option.value }}</li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                        <div class="dropcart__product-meta">
                            <span class="dropcart__product-quantity">{{ product.quantity }}</span> ×
                            <span class="dropcart__product-price">{{ product.price }}</span>
                        </div>
                    </div>

                    <button type="button" class="dropcart__product-remove btn btn-light btn-sm btn-svg-icon">
                        <svg width="10px" height="10px">
                            <use xlink:href="images/sprite.svg#cross-10"></use>
                        </svg>
                    </button>
                </div>
            {% endfor %}
        </div>

        <div class="dropcart__totals">
            <table>
                {% for total in cart.totals %}
                    <tr>
                        <th>{{ total.title }}</th>
                        <td>{{ total.value }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>

        <div class="dropcart__buttons">
            <a class="btn btn-secondary" href="cart.html">View Cart</a>
            <a class="btn btn-primary" href="checkout.html">Checkout</a>
        </div>
    </div>
</div>
<!-- .dropcart / end -->
