{% extends 'dashboard/layout.html' %}
{% load i18n %}
{% load thumbnail %}
{% load staticfiles %}
{% load form_tags %}


{% block body_class %}{{ block.super }} create-page catalogue{% endblock %}

{% block title %}
    {{ title }} | {% trans "Product management" %} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li>
            <a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a>
            <span class="divider">/</span>
        </li>
        <li>
            <a href="{% url 'dashboard:catalogue-product-list' %}">{% trans "Product management" %}</a>
            <span class="divider">/</span>
        </li>
        <li class="active">{{ title }}</li>

    </ul>
{% endblock %}

{% block headertext %}{{ title }}{% endblock %}

{% block dashboard_content %}
    <form action="{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" method="post" class="form-stacked wysiwyg fixed-actions" enctype="multipart/form-data" data-behaviour="affix-nav-errors" autocomplete="off">
        {% csrf_token %}
        <div class="row-fluid">

            {% block tab_nav %}
                <div class="span3">
                    <div data-spy="affix" class="affix-top" data-offset-top="200">
                        <div class="table-header">
                            <h3>{% trans "Sections" %}</h3>
                        </div>
                        <ul class="nav nav-list bs-docs-sidenav" id="product_update_tabs">
                            {% if product %}
                                <li class="active"><a href="#overview" data-toggle="tab">{% trans 'Overview' %}</a></li>
                            {% endif %}
                            <li{% if not product %} class="active"{% endif %}><a href="#product_details" data-toggle="tab">{% trans 'Product details' %}</a></li>
                            <li><a href="#product_recommended" data-toggle="tab">{% trans 'Recommended Products' %}</a></li>
                            {% if product.variants.exists %}
                                <li><a href="#product_variants" data-toggle="tab">{% trans 'Product variants' %}</a></li>
                            {% endif %}
                            <li><a href="#product_attributes" data-toggle="tab">{% trans 'Product attributes' %}</a></li>
                            <li><a href="#product_category" data-toggle="tab">{% trans 'Product category' %}</a></li>
                            <li><a href="#product_images" data-toggle="tab">{% trans 'Product images' %}</a></li>
                            <li><a href="#product_stock" data-toggle="tab">{% trans 'Product stock' %}</a></li>
                        </ul>
                    </div>
                </div>
            {% endblock tab_nav %}

            <div class="span9">
                <div class="tab-content">
                    {% block product_overview %}
                        {% if product %}
                            <div class="tab-pane active" id="overview">
                                <div class="table-header">
                                    <h3>{% trans "Overview" %}</h3>
                                </div>
                                {% block product_overview_content %}
                                <div class="well">
                                    <h3>{{ product.get_title }}</h3>
                                    <hr />
                                    <div class="row-fluid">
                                        {% block product_overview_content_image %}
                                        <div class="span4">
                                            {% if product.primary_image.original.url %}
                                                {% with image=product.primary_image %}
                                                    {% thumbnail image.original "240" upscale=False as thumb %}
                                                        <a href="{{ image.original.url }}" rel="lightbox_{{ product.upc|default:"-" }}" class="thumbnail">
                                                            <img src="{{ thumb.url }}" class="row-fluid" alt="{{ product.get_title }}" data-description="{% if image.caption %}{{ image.caption }}{% endif %}">
                                                        </a>
                                                    {% endthumbnail %}
                                                {% endwith %}
                                            {% endif %}
                                        </div>
                                        {% endblock %}
                                        {% block product_overview_content_stats %}
                                        <div class="span8">
                                            <p><strong>{% trans "Description" %}</strong><br /> {{ product.description|safe }}</p>

                                                {% with stats=product.stats %}
                                                    <table class="table table-striped table-bordered">
                                                        <tbody>
                                                            <tr>
                                                                <th>{% trans "Views" %}</th>
                                                                <td>{{ stats.num_views|default:0 }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th>{% trans "Baskets" %}</th>
                                                                <td>{{ stats.num_basket_additions|default:0 }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th>{% trans "Purchases" %}</th>
                                                                <td>{{ stats.num_purchases|default:0 }}</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                {% endwith %}
                                            </div>
                                        </div>
                                        {% endblock %}
                                    </div>
                                    <div class="row-fluid">
                                        {% block product_overview_content_categories %}
                                        <div class="span6">
                                            <div class="table-header">
                                                <h3>{% trans "Categories" %}</h3>
                                            </div>
                                            <table class="table table-striped table-bordered">
                                                {% for category in product.categories.all %}
                                                    <tr><td>{{ category.full_name }}</td></tr>
                                                {% empty %}
                                                    <tr><td>{% trans "No categories setup for this product" %}</td></tr>
                                                {% endfor %}
                                            </table>
                                        </div>
                                        {% endblock %}
                                        {% block product_overview_content_ranges %}
                                        <div class="span6">
                                            <div class="table-header">
                                                <h3>{% trans "Ranges" %}</h3>
                                            </div>
                                            <table class="table table-striped table-bordered">
                                                {% for range in product.includes.all %}
                                                    <tr><td><a href="{% url 'dashboard:range-update' pk=range.id %}" alt="{{ range.name }}">{{ range.name }}</a></td></tr>
                                                {% empty %}
                                                    <tr><td>{% trans "No ranges currently include this product for this product" %}</td></tr>
                                                {% endfor %}
                                            </table>
                                        </div>
                                        {% endblock %}
                                    </div>
                                {% endblock product_overview_content %}
                            </div>
                        {% endif %}
                    {% endblock product_overview %}

                    {% block product_details %}
                        <div class="tab-pane {% if not product %}active{% endif %}" id="product_details">
                            <div class="table-header">
                                <h3>{% trans "Product Details" %}</h3>
                            </div>
                            <div class="well product-details">
                                {% block product_details_content %}
                                    <span class="error-block">{{ form.non_field_errors }}</span>
                                        {% for field in form.hidden_fields %}
                                            {{ field }}
                                        {% endfor %}

                                        {% for field in form.visible_fields %}
                                            {% if 'attr' not in field.id_for_label %}
                                                {% include 'partials/form_field.html' with field=field %}
                                            {% endif %}
                                        {% endfor %}

                                    {% with parent=product.parent %}
                                        {% if parent %}
                                            <div class="control-group">
                                                <label class="control-label">{% trans "Parent" %}</label>
                                                <div class="controls">
                                                    <a href="{% url 'dashboard:catalogue-product' pk=parent.id %}" title="{% blocktrans %}Edit {{ parent.title }}{% endblocktrans %}">{{ parent.title }}</a>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endwith %}
                                {% endblock product_details_content %}
                            </div>
                        </div>
                    {% endblock product_details %}

                    {% block product_variants %}
                        {% with variants=product.variants.all %}
                            {% if variants %}
                                <div class="tab-pane" id="product_variants">
                                    {% block product_variants_content %}
                                        <table class='table table-striped table-bordered'>
                                            <caption>{% trans "Variants" %}</caption>
                                            {% with parent=product.parent %}
                                                {% if parent %}
                                                    <tr>
                                                        <th colspan="3">{% trans "Parent" %}</th>
                                                    </tr>
                                                    <tr>
                                                        <td>{{ parent.title }}</td>
                                                        <td></td>
                                                        <td><a href="{% url 'dashboard:catalogue-product' pk=parent.id %}" class="btn btn-primary" title="{% blocktrans %}Edit {{ parent.title }}{% endblocktrans %}">{% trans "Edit" %}</a></td>
                                                    </tr>
                                                {% endif %}
                                            {% endwith %}
                                            <tr>
                                                <th colspan="3">{% trans "Children" %}</th>
                                            </tr>

                                            {% for variant in variants %}
                                                <tr>
                                                    <td>{{ variant.get_title }}</td>
                                                    <td>{{ variant.attribute_summary }}</td>
                                                    <td><a href="{% url 'dashboard:catalogue-product' pk=variant.id %}" class="btn btn-primary">{% trans "Edit" %}</a></td>
                                                </tr>
                                            {% endfor %}
                                        </table>
                                    {% endblock product_variants_content %}
                                </div>
                            {% endif %}
                        {% endwith %}
                    {% endblock product_variants %}

                    {% block product_attributes %}
                        <div class="tab-pane" id="product_attributes">
                            {% block product_attributes_content %}
                                <table class="table table-striped table-bordered">
                                    <caption>
                                        {% trans "Product Attributes" %}
                                        <span class="label label-success">
                                            {% trans "Product Type:" %} {{ product_class }}
                                        </span>
                                    </caption>
                                    {% for field in form %}
                                        {% if 'attr' in field.id_for_label %}
                                            <tr>
                                                <td>
                                                    {% include "partials/form_field.html" %}
                                                </td>
                                            </tr>
                                        {% endif %}
                                    {% endfor %}
                                </table>
                            {% endblock product_attributes_content %}
                        </div>
                    {% endblock product_attributes %}

                    {% block product_categories %}
                        <div class="tab-pane" id="product_category">
                            {% block product_categories_content %}
                                <table class="table table-striped table-bordered form-inline">
                                    <caption>{% trans "Category" %}</caption>
                                    {{ category_formset.management_form }}
                                    {{ category_formset.non_form_errors }}
                                    {% for category_form in category_formset %}
                                        <tr>
                                            <td>
                                                {% include "partials/form_fields_inline.html" with form=category_form %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            {% endblock product_categories_content %}
                        </div>
                    {% endblock product_categories %}

                    {% block product_images %}
                        <div class="tab-pane" id="product_images">
                            {% block product_images_content %}
                                <div class="table-header">
                                    <h3>{% trans "Upload, change or remove images" %}</h3>
                                </div>
                                <div class="well">
                                    {{ image_formset.management_form }}
                                    {{ image_formset.non_form_errors }}
                                    <ol class='upload-image'>
                                        {% for image_form in image_formset %}
                                            {% include "dashboard/partials/product_images.html" with form=image_form %}
                                        {% endfor %}
                                    </ol>
                                </div>
                            {% endblock product_images_content %}
                        </div>
                    {% endblock product_images %}

                    {% block stockrecords %}
                        <div class="tab-pane" id="product_stock">
                            {% block stockrecords_content %}
                                <table class="table table-striped table-bordered">
                                    <caption>{% trans "Stock and price information" %}</caption>
                                    {{ stockrecord_formset.management_form }}
                                    {{ stockrecord_formset.non_form_errors }}
                                    <thead>
                                        <tr>
                                            <th>{% trans "Partner" %}</th>
                                            <th>{% trans "SKU" %}</th>
                                            <th>{% trans "Num in stock" %}</th>
                                            <th>{% trans "Num allocated" %}</th>
                                            <th>{% trans "Low stock threshold" %}</th>
                                            <th>{% trans "Currency" %}</th>
                                            <th>{% trans "Cost price" %}</th>
                                            <th>{% trans "Price (excl tax)" %}</th>
                                            <th>{% trans "Retail price" %}</th>
                                            <th>{% trans "Delete?" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for stockrecord_form in stockrecord_formset %}
                                            {% if stockrecord_form.non_field_errors %}
                                            <tr>
                                                <td colspan="10">
                                                    {% for error in stockrecord_form.non_field_errors  %}
                                                        <span class="error-block errorlist"><i class="icon-exclamation-sign"></i> {{ error }}</span>
                                                    {% endfor %}
                                                </td>
                                            </tr>
                                            {% endif %}
                                            <tr>
                                                <td>{% include "partials/form_field.html" with field=stockrecord_form.partner nolabel=True %}</td>
                                                <td>{% include "partials/form_field.html" with field=stockrecord_form.partner_sku nolabel=True %}</td>
                                                <td>
                                                    {% if stockrecord_form.num_in_stock %}
                                                        {% include "partials/form_field.html" with field=stockrecord_form.num_in_stock nolabel=True %}
                                                    {% else %}
                                                        -
                                                    {% endif %}
                                                </td>
                                                <td>{{ stockrecord_form.instance.num_allocated|default:"-" }}</td>
                                                <td>{% include "partials/form_field.html" with field=stockrecord_form.low_stock_threshold nolabel=True %}</td>
                                                <td>{% include "partials/form_field.html" with field=stockrecord_form.price_currency nolabel=True %}</td>
                                                <td>{% include "partials/form_field.html" with field=stockrecord_form.cost_price nolabel=True %}</td>
                                                <td>{% include "partials/form_field.html" with field=stockrecord_form.price_excl_tax nolabel=True %}</td>
                                                <td>{% include "partials/form_field.html" with field=stockrecord_form.price_retail nolabel=True %}</td>
                                                <td>
                                                    {% include "partials/form_field.html" with field=stockrecord_form.id nolabel=True %}
                                                    {% include "partials/form_field.html" with field=stockrecord_form.DELETE nolabel=True %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            {% endblock stockrecords_content %}
                        </div>
                    {% endblock stockrecords %}

                    {% block recommended_products %}
                        <div class="tab-pane" id="product_recommended">
                            {% block recommended_products_content %}
                                <table class="table table-striped table-bordered form-inline">
                                    <caption>{% trans "Recommended products" %}</caption>
                                    {{ recommended_formset.management_form }}
                                    {{ recommended_formset.non_form_errors }}
                                    {% for recommended_form in recommended_formset %}
                                        <tr>
                                            <td>
                                                {% include "partials/form_fields_inline.html" with form=recommended_form %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            {% endblock recommended_products_content %}
                        </div>
                    {% endblock recommended_products %}
                </div>
            </div>
        </div>

        {% block fixed_actions_group %}
            <div class="fixed-actions-group">
                <div class="form-actions">
                    <div class="pull-right">
                        <a href="{% url 'dashboard:catalogue-product-list' %}">{% trans "Cancel" %}</a>
                        {% trans "or" %}
                        <button class="btn btn-secondary btn-large" name="action" type="submit" value="continue">{% trans "Save and continue editing" %}</button>
                        <button class="btn btn-primary btn-large" name="action" type="submit" value="save">{% trans "Save" %}</button>
                    </div>
                    {% if product %}
                        <a class="btn btn-success btn-large" href="{{ product.get_absolute_url }}">{% trans "View on site" %}</a>
                    {% endif %}
                </div>
            </div>
        {% endblock fixed_actions_group %}
    </form>
{% endblock dashboard_content %}
