{% extends 'oscar/dashboard/layout.html' %}
{% load i18n %}
{% load render_table from django_tables2 %}
{% block body_class %}{{ block.super }} catalogue{% endblock %}
{% block title %}
    {% trans "Products" %} | {{ block.super }}
{% endblock %}
{% block breadcrumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                {% trans "Products" %}
            </li>
        </ol>
    </nav>
{% endblock %}
{% block header %}
    <div class="page-header">
        <h1>{% trans "Products" %}</h1>
    </div>
{% endblock header %}
{% block dashboard_content %}
    {% block create_product %}
        <div class="table-header">
            <h3>
                <i class="fas fa-sitemap"></i>
                {% trans "Create new product" %}
            </h3>
        </div>
        <div class="card card-body">
            <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="fas fa-plus-circle"></i>
                    {% trans "New Product" %}
                </button>
            </form>
        </div>
    {% endblock %}
    {% block search_products %}
        <div class="table-header">
            <h3>
                <i class="fas fa-search"></i>
                {% trans "Search Products" %}
            </h3>
        </div>
        <div class="card card-body">
            <form method="get" class="form-inline">
                {% comment %}
                Add the current query string to the search form so that the
                sort order is not reset when searching.
            {% endcomment %}
            {% for name, value in request.GET.items %}
                {% if name not in form.fields %}
                    <input type="hidden" name="{{ name }}" value="{{ value }}"/>
                {% endif %}
            {% endfor %}
            {% include "oscar/dashboard/partials/form_fields_inline.html" with form=form %}
            <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Searching...' %}">
                <i class="fas fa-search"></i>
                {% trans "Search" %}
            </button>
        </form>
    </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">
                        <h4 class="modal-title"></h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-center">
                        <img class="img-fluid mx-auto">
                    </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 %}
