{% load thumbnail basket_tags purchase_info_tags i18n bootstrap4 %}
{% if product %}
    <div class="container-fluid featured-product">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="row">
                        <div class="col-lg-12 text-center mt-5 mb-4">
                            <h2>Get Started with a Home Brewing Kit</h2>
                        </div>
                        <div class="col-md-5 mb-3">
                            {% with image=product.primary_image %}
                                {% thumbnail image.original "500x500" upscale=False as thumb %}
                                    <a href="{{ product.get_absolute_url }}">
                                        <img src="{{ thumb.url }}" alt="{{ product.get_title }}"
                                             class="img-fluid">
                                    </a>
                                {% endthumbnail %}
                            {% endwith %}
                        </div>
                        <div class="col-md-7 mb-5">
                            <h2 class="text-info mb-1">{{ product.get_title }}</h2>
                            {{ product.description|safe }}
                            <div class="d-block text-center">
                                <div class="row">
                                    <div class="col-sm-6">
                                        {% purchase_info_for_product request product as session %}

                                        {% if session.availability.is_available_to_buy %}
                                            {% comment %}
                                            {% basket_form request product 'single' as basket_form %}
                                            <form class="text-center" action="{% url 'basket:add' pk=product.pk %}"
                                                  method="post">
                                                {% csrf_token %}
                                                <div class="d-none">
                                                    {% bootstrap_form basket_form %}
                                                </div>
                                                <input type="hidden" name="next"
                                                       value="{% url 'subscription:selected_kit' product.pk %}"/>
                                                <button type="submit"
                                                        class="btn btn-primary btn-hook select-staterkit mb-2"
                                                        data-loading-text="{% trans 'Adding...' %}">{% trans "Select starter kit" %}</button>
                                            </form>
                                            {% endcomment %}
                                            <button data-pk="{{ product.pk }}"
                                                    data-url="{% url 'subscription:selected_kit' product.pk %}"
                                                    class="btn btn-primary btn-hook select-staterkit mb-2"
                                                    data-loading-text="{% trans 'Adding...' %}">{% trans "Select starter kit" %}
                                            </button>
                                        {% else %}
                                            <span class="btn btn-default btn-block disabled shadow-sm">{% trans "Select starter kit" %}</span>
                                        {% endif %}
                                    </div>
                                    <div class="col-sm-6 text-center">
                                        <a href="{% url 'subscription:starter_kits' %}"
                                           class="btn btn-primary btn-hook mb-2">
                                            View other kits
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}