{% extends "layout.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 {% if preview %}preview{% endif %} {% endblock %}

{% block title %}
    {{ product.get_title }} | {{ block.super }}
{% endblock %}

{% block description %}
    {{ product.description|default:""|striptags }}
{% endblock %}

{% comment %}
{% block breadcrumbs %}

    <ul class="breadcrumb">
        <li>
            <a href="{{ homepage_url }}">{% trans "Home" %}</a>
        </li>
        {% with category=product.categories.all.0 %}
            {% for c in category.get_ancestors_and_self %}
                <li>
                    <a href="{{ c.get_absolute_url }}">{{ c.name }}</a>
                </li>
            {% endfor %}
            <li class="active">{{ product.get_title }}</li>

            {% get_back_button as backbutton %}
            {% if backbutton %}
                <li class="pull-right">
                    <a href="{{ backbutton.url }}">
                        <i class="icon-arrow-left"></i> {{ backbutton.title }}
                    </a>
                </li>
            {% endif %}
        {% endwith %}
    </ul>

{% endblock %}
{% endcomment %}
{% block header %}
{% endblock header %}

{% block navigation %}
    {% if not preview %}
        {{ block.super }}
    {% endif %}
{% endblock %}

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

            {% block product_main %}
                <div class="col-sm-4 product_main">
                    {% 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 %}
                    <h1>{{ product.get_title }}</h1>

                    {% block product_stock_record %}
                        {% include "catalogue/partials/stock_record.html" with verbose=1 %}
                    {% endblock %}

                    {% comment %}
                        {% iffeature "reviews" %}
                            {% include "catalogue/reviews/partials/review_stars.html" %}
                        {% endiffeature %}
                    {% endcomment %}
                    <hr/>
                    {% 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 %}
                    {% block product_basket_form %}
                        {% include "catalogue/partials/add_to_basket_form.html" %}
                    {% endblock %}
                </div><!-- /col-sm-6 -->
            {% endblock %}
            <div class="col-12">
                <div class="space-2"></div>
            </div>
        </div><!-- /row -->
        <div class="row">
            <div class="col-md-6">
                {% block product_description %}
                    {% if product.description %}
                        <div id="product_description" class="sub-header">
                            <h2 class="text-center">{% trans "Product Description" %}</h2>
                        </div>
                        <p>{{ product.description|safe }}</p>
                    {% endif %}
                {% endblock %}
            </div>
            <div class="col-md-6">
                {% block product_info %}
                    <div class="card card-table">
                        <div class="sub-header">
                            <h2 class="text-center">{% trans "Product Information" %}</h2>
                        </div>
                        <table class="table">
                            {% purchase_info_for_product request product as session %}

                            {% for av in product.attribute_values.all %}
                                {% if av.attribute.display %}
                                    <tr>
                                        <th>{{ av.attribute.name }}</th>
                                        <td>{{ av.value_as_html }}</td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                            {% comment %}
                        {% iffeature "reviews" %}
                            <tr>
                                <th>{% trans "Number of reviews" %}</th>
                                <td>{{ product.num_approved_reviews }}</td>
                            </tr>
                        {% endiffeature %}
                        {% endcomment %}
                        </table>
                    </div>
                {% endblock %}
            </div>
        </div>

        {% 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 %}

        {% block recommended_products %}
            <div class="sub-header">
                <h2>{% trans "Recommended items" %}</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>
        {% endblock %}

    </div>
    <div class="space-2"></div>
{% endblock content %}

{% block footer %}
    {% if not preview %}
        {{ block.super }}
    {% endif %}
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        var children = {{ children_data|safe }};
        var variationAttributesJs = {{ variation_attributes_js|safe }};
        var hasSubscription = {% if subscription %}true{% else %}false{% endif   %};
    </script>
    {{ block.super }}
{% endblock %}

{% block extrascripts %}
    {{ block.super }}
{% endblock %}