{% extends 'catalogue/detail.html' %}
{% load static thumbnail i18n catalogue_tags %}
{% block body_class %}product workshop-detail{% endblock %}

{% block content %}
    {% thumbnail product.get_all_images.first.original "1920x1080" upscale=False as thumb %}
        <div style="background-image: url({{ thumb.url }})" class="full-wide product-intro">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 offset-lg-7">
                        <div class="card product-main-card">
                            <div class="card-header">
                                {% block product_main %}
                                    <div class="product_main">
                                        {% 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-4">
                                                {% block product_stock_record %}
                                                    {% include "catalogue/partials/stock_record.html" with verbose=1 %}
                                                {% endblock %}
                                            </div>
                                        </div>
                                        <hr/>
                                        {% block variants %}
                                            <select name="workshop-dates" id="workshop-dates"
                                                    class="form-control mb-4">
                                                {% for child in children %}
                                                    {% is_future child.attr.date_time as display %}
                                                    {% if display %}
                                                        <option value="{{ child.pk }}">{{ child.attr.date_time }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        {% 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">
        <div class="row">
            <div class="col-12 mt-5">
                <h1 class="text-center mb-4">{{ product.get_title }}</h1>
            </div>
            <div class="col-12 mb-5">
                {{ product.description|safe }}
            </div>
        </div>
    </div>
    <div class="container">
        {% block recommended_products %}
            <div class="sub-header text-center mb-4">
                <h2>{% trans "Other workshops 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 'workshops' %}
                    </div>
                {% endfor %}
            </div>
        {% endblock %}
    </div>
    <div class="container-fluid corporate-workshop-banner">
        <div class="row">
            <div class="col-12 d-block text-center">
                <h2 class="mb-1 mt-3 d-block">Corporate Workshops</h2>
                <p class="mb-5">Looking for a customized coffee workshop?</p>
                <div class="d-block mb-5">
                    <a href="#" class="btn btn-outline-dark btn-hook">Contact us here</a>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid bg-primary">
        <div class="d-block d-flex justify-content-center align-content-center">
            <h1 class="mb-0">Looking for coffees for the office ?</h1> &nbsp;&nbsp;
            <div><a href="#" class="btn btn-hook btn-outline-light">Find out more!</a></div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/workshop.js' %}"></script>
{% endblock %}