{% extends "catalogue/detail.html" %}

{% load history_tags %}
{% load currency_filters %}
{% load reviews_tags %}
{% load staticfiles %}
{% load product_tags %}
{% load display_tags %}
{% load i18n %}
{% load purchase_info_tags %}
{% load thumbnail %}

{% block body_class %}product gift-sets-detail{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            {% block product_gallery %}
                <div class="col-md-6 mt-5">
                    {% include "catalogue/partials/gallery.html" %}
                </div>
            {% endblock %}

            {% block product_main %}
                <div class="col-md-6 product_main mt-5">
                    {% comment %}
                            This is a but clunky here.  Better to have some kind of JS-driven dashboard menu that
                            pops out when clicked.  A bit like the Django-Debug-Toolbar button
                        {% endcomment %}
                    {% if user.is_staff %}
                        <a class="pull-right hidden-xs"
                           href="{% url 'dashboard:catalogue-product' pk=product.id %}">
                            <small><i class="icon-edit"></i> {% trans "Edit this product" %}</small>
                        </a>
                    {% endif %}
                    <div class="col-12">
                        <h1 class="mb-0">{{ product.get_title }}</h1>
                    </div>
                    <div class="col-12">
                        <small>{{ product.attr.model }}</small>
                    </div>
                    <div class="col-12">
                        {% block product_stock_record %}
                            {% include "catalogue/partials/stock_record.html" with verbose=1 %}
                        {% endblock %}
                    </div>

                    <div class="col-12">
                        {% block variants %}
                            {% if subscription %}
                                <button id="subscription" class="btn btn-outline-dark btn-sm">Subscription
                                </button>
                                <button id="one-off" class="btn btn-outline-dark btn-sm">One Off</button>
                            {% endif %}
                            {% for item in variation_attributes %}
                                <div class="variation-options clearfix flex-fill">
                                    <div class="space-1"></div>
                                    <strong class="clearfix">{{ item.name }}</strong>
                                    {% for value in item.values %}
                                        <button href="#" class="btn btn-sm btn-outline-dark variation-attribute"
                                                data-variant="{{ item.code }}"
                                                data-value="{{ value }}">
                                            {{ value }}
                                        </button>
                                    {% endfor %}
                                </div>
                            {% endfor %}
                        {% endblock %}
                    </div>
                    {% comment %}
                            {% iffeature "reviews" %}
                                {% include "catalogue/reviews/partials/review_stars.html" %}
                            {% endiffeature %}
                        {% endcomment %}
                    <div class="col-12">
                        {% block product_description %}
                            {% if product.description %}
                                {{ product.description|safe }}
                            {% endif %}
                        {% endblock %}
                    </div>
                    <div class="col-12 mt-4 mb-5">
                        {% block product_basket_form %}
                            {% include "catalogue/partials/add_to_basket_form.html" %}
                        {% endblock %}
                    </div>
                </div>
            {% endblock %}

            {% comment %}
                {% iffeature "reviews" %}
                    {% block product_review %}
                        <section>
                            <div id="reviews" class="sub-header">
                                {% if product.num_approved_reviews > 3 %}
                                    <a href="{% url 'catalogue:reviews-list' product_slug=product.slug product_pk=product.id %}"
                                       class="btn pull-right">{% trans "See all reviews" %}</a>
                                {% endif %}
                                <h2>{% trans "Customer Reviews" %}</h2>
                            </div>

                            {% if product.num_approved_reviews == 0 %}
                                <p>
                                    {% if product|is_review_permitted:user %}
                                        {% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id as add_review_url %}
                                        {% blocktrans %}This product does not have any reviews yet -
                                            <a href="{{ add_review_url }}#addreview">be the first to write one</a>.
                                        {% endblocktrans %}
                                    {% else %}
                                        {% trans "This product does not have any reviews yet" %}.
                                    {% endif %}
                                </p>
                            {% else %}
                                <ol class="list-unstyled review-list">
                                    {% for review in product.reviews.approved.all|slice:":3" %}
                                        <li>
                                            {% include 'catalogue/partials/review.html' %}
                                        </li>
                                    {% endfor %}
                                </ol>
                            {% endif %}
                        </section>
                    {% endblock product_review %}
                {% endiffeature %}
                {% endcomment %}
        </div>
        {% comment %}
        {% recently_viewed_products current_product=product %}
        {% endcomment %}
    </div>
    <div class="container">
        {% with recommended_products=product.sorted_recommended_products|slice:":6" %}
            {% if recommended_products %}
                <div class="sub-header text-center">
                    <h2>{% trans "Other gears you might be interested in" %}</h2>
                </div>
                <div class="row">
                    {% for product in recommended_products %}
                        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
                            {% render_product product %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
    </div>
    <div class="space-2"></div>
{% endblock content %}