{% extends 'catalogue/detail.html' %}
{% load static thumbnail i18n purchase_info_tags product_tags %}

{% block content %}
    {% thumbnail product.get_all_images.first.original "1920x1080" upscale=False as thumb %}
        <div style="background-image: url({{ thumb.url }})" class="container-fluid product-intro pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 offset-lg-7">
                        <div class="card product-main-card">
                            {% if product.attr.premium %}
                                <div class="coffee-badge premium"></div>
                            {% endif %}
                            <div class="card-header">
                                {% block product_main %}
                                    <div class="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>

                                        <div class="row">
                                            <div class="col-5">
                                                {% block product_stock_record %}
                                                    {% include "catalogue/partials/stock_record.html" with verbose=1 %}
                                                {% endblock %}
                                            </div>
                                            <div class="col-7 text-right small">
                                                {{ product.attr.coffee_taste }}
                                            </div>
                                        </div>

                                        {% comment %}
                                            {% iffeature "reviews" %}
                                            {% include "catalogue/reviews/partials/review_stars.html" %}
                                             {% endiffeature %}
                                        {% endcomment %}
                                        <hr/>
                                        {% block variants %}
                                            {% if subscription %}
                                                <div class="col text-center">
                                                    <button id="subscription"
                                                            class="btn btn-outline-primary btn-hook mb-2">
                                                        Subscribe and save
                                                    </button>
                                                    <button id="one-off" class="btn btn-outline-primary btn-hook mb-2">
                                                        One time purchase
                                                    </button>
                                                </div>
                                                <div class="col text-center mb-3">
                                                    <strong class="subscription-upsell">*Save up to 20% when you subscribe!</strong>
                                                </div>
                                            {% endif %}

                                            {% for item in variation_attributes %}
                                                <div data-variation-name="{{ item.code }}" class="form-group">
                                                    <label for="{{ item.code }}"
                                                           class="control-label strong">{{ item.name }}</label>
                                                    <select name="{{ item.code }}"
                                                            class="form-control variation-attribute">
                                                        {% for value in item.values %}
                                                            <option data-thumbnail="{{ MEDIA_URL }}{{ value.image }}"
                                                                    value="{{ value }}">{{ value }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            {% endfor %}
                                        {% endblock %}
                                        {% block product_basket_form %}
                                            {% include "catalogue/partials/add_to_basket_form.html" %}
                                        {% endblock %}
                                    </div><!-- /col-sm-6 -->
                                {% endblock %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endthumbnail %}
    <div class="container-fluid bg-primary more-taste">
        <div class="container">
            <div class="col">
                <div class="top-coma">
                    <i class="fa fa-quote-left text-white"></i>
                </div>
            </div>
            <div class="col text-center">
                {{ product.attr.more_taste|safe }}
            </div>
        </div>
    </div>
    <div class="space-4"></div>
    <div class="product-details container mb-5">
        <div class="row">
            <div class="col-md-6">
                <div class="col">
                    {% block product_gallery %}
                        {% include "catalogue/partials/gallery.html" %}
                    {% endblock %}
                </div>
                <div class="col">
                    {% block product_info %}
                        <div class="space-2"></div>
                        <h2 class="text-left">{% trans "Product Information" %}</h2>
                        <div class="row product-info-line">
                            <div class="col-4 strong">Country</div>
                            <div class="col-8">{{ product.attr.country }}</div>
                        </div>
                        <div class="row product-info-line">
                            <div class="col-4 strong">Producer</div>
                            <div class="col-8">{{ product.attr.coffee_producer }}</div>
                        </div>
                        <div class="row product-info-line">
                            <div class="col-4 strong">Altitude</div>
                            <div class="col-8">{{ product.attr.altitude }}</div>
                        </div>
                        <div class="row product-info-line">
                            <div class="col-4 strong">Varietal</div>
                            <div class="col-8">{{ product.attr.varietal }}</div>
                        </div>
                        <div class="row product-info-line">
                            <div class="col-4 strong">Processes</div>
                            <div class="col-8">{{ product.attr.process }}</div>
                        </div>
                    {% endblock %}
                </div>
                <div class="col">
                    {% comment %}
                        {% iffeature "reviews" %}
                            <tr>
                                <th>{% trans "Number of reviews" %}</th>
                                    <td>{{ product.num_approved_reviews }}</td>
                            </tr>
                         {% endiffeature %}
                     {% endcomment %}
                </div>
            </div>
            <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>
    </div>
    <div class="container mb-5">
        {% with recommended_products=product.sorted_recommended_products|slice:":6" %}
            {% if 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>
            {% endif %}
        {% endwith %}
    </div>
{% endblock %}
{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/coffee.js' %}"></script>
{% endblock %}