{% extends 'shop/_layouts/main' %}
{% block main %}

        <div class="row product-details">
            <div class="six columns">
                {% include "shop/_images/product" with { class: 'u-max-full-width', number: '3' } %}
            </div>
            <div class="six columns">

                <h1>{{ product.title }}</h1>

                <form method="POST">
                    <input type="hidden" name="action" value="commerce/cart/update-cart">
                    {{ redirectInput('shop/cart') }}
                    <input type="hidden" name="qty" value="1">
                    {{ csrfInput() }}
                    <select name="purchasableId">
                        {% for purchasable in product.variants %}
                            <option {% if purchasable.stock <= 0 and purchasable.hasUnlimitedStock == false %}disabled {% endif %}
                                    value="{{ purchasable.id }}">{{ purchasable.sku }} {{ purchasable.description }} {{ purchasable.price|commerceCurrency(cart.currency) }}</option>
                        {% endfor %}
                    </select>
                    <input type="submit" value="{{ "Add to cart"|t }}" class="button"/>
                </form>

                <p><a href="{{ url('shop/products') }}">&larr; Back to all products.</a></p>
            </div>
        </div>

{% endblock %}