{% extends 'oscar/dashboard/layout.html' %}
{% load i18n %}
{% load staticfiles %}
{% load sorting_tags %}
{% load widget_tweaks %}
{% load render_table from django_tables2 %}

{% block body_class %}{{ block.super }} catalogue{% endblock %}

{% block title %}
    {% trans "Products" %} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li>
            <a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a>
        </li>
        <li class="active">{% trans "Products" %}</li>
    </ul>
{% endblock %}

{% block header %}
    <div class="page-header action">
        <h1>{% trans "Products" %}</h1>
    </div>
{% endblock header %}

{% block dashboard_content %}
    {% block create_product %}
        <div class="table-header">
            <h3><i class="icon-sitemap icon-large"></i> {% trans "Create new product" %}</h3>
        </div>
        <div class="well">
            <form action="{% url 'dashboard:catalogue-product-create' %}" method="get" class="form-inline">
                {% include "oscar/dashboard/partials/form_fields_inline.html" with form=productclass_form %}
                <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Submitting...' %}"><i class="icon-plus"></i> {% trans "New Product" %}</button>
            </form>
        </div>
    {% endblock %}

    {% block search_products %}
        <div class="table-header">
            <h3><i class="icon-search icon-large"></i>{% trans "Search Products" %}</h3>
        </div>
        <div class="well">
            <form method="get" class="form-inline" id="search_form">
                {% for field in form %}
                    {% if "upc" in field.id_for_label or "title" in field.id_for_label %}
                        {% if field.is_hidden %}
                            {% render_field field class+='form-control' %}
                        {% else %}
                            <span class="form-group{% if field.errors %} has-error{% endif %}">
                                {{ field.label_tag }}
                                {% render_field field class+='form-control' %}
                                {% for error in field.errors %}
                                    <ul class="error-block">
                                        <li>{{ error }}</li>
                                    </ul>
                                {% endfor %}
                            </span>
                        {% endif %}
                    {% endif %}
                {% endfor %}
                <input type="submit" value="{% trans "Search" %}" class="btn btn-primary" />
                <a data-toggle="modal" data-target="#SearchModal" href="#">{% trans "Advanced Search" %}</a>
            </form>

            {# Search modal, if there are form errors the form is automatically openend #}
            <div class="modal fade" data-show="true" id="SearchModal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h3>{% trans "Advanced Search" %}</h3>
                        </div>
                        <form method="get" class="form-horizontal">
                            <div class="modal-body">
                                <div class="container-fluid">
                                
                                {% include "oscar/dashboard/partials/form_fields.html" with form=form style='horizontal' %}

                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="#" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</a>
                                <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Searching...' %}">{% trans "Search" %}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {% if search_filters %}
            <div class="search-filter-list">
                <label>Filters:</label>
                {% for filter in search_filters %}
                <span class="label label-success">{{ filter }}</span>
                {% endfor %}
            </div>

            {% endif %}
        </div>
    {% endblock %}

    {% if products %}
        {% block product_list %}
            <form method="post">
                {% csrf_token %}
                {% render_table products %}
            </form>
            <div class="modal fade" id="product-image-modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body text-center">
                            <img class="img-responsive center-block">
                        </div>
                    </div>
                </div>
            </div>
        {% endblock product_list %}
    {% else %}
        <p>{% trans "No products found." %}</p>
    {% endif %}

{% endblock dashboard_content %}

{% block onbodyload %}
    {{ block.super }}
    oscar.dashboard.product_lists.init();
{% endblock onbodyload %}