{% extends 'oscar/dashboard/layout.html' %}
{% load i18n %}

{% block title %}
    {{ title }} | {% trans "Create product type" %} | {{ block.super }}
{% endblock %}

{% block body_class %}{{ block.super }} create-page{% 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"><a href="{% url 'dashboard:catalogue-class-list' %}">{% trans "Product Type" %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ title }}</li>
        </ol>
    </nav>
{% endblock %}

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

{% block dashboard_content %}
    <form class="form-stacked wysiwyg fixed-actions" method="post" data-behaviour="tab-nav-errors">
        {% csrf_token %}

        <div class="row">

            {% block tab_nav %}
                <div class="col-md-3">
                    <div class="tab-nav sticky-top">
                        <div class="table-header">
                            <h3>{% trans "Sections" %}</h3>
                        </div>
                        <ul class="nav flex-column bs-docs-sidenav" id="product_update_tabs">
                            {% block tabs %}
                                <li class="nav-item">
                                    <a class="nav-link active" href="#product_class_details" data-toggle="tab">
                                        {% trans 'Product Class details' %}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#product_attributes" data-toggle="tab">
                                        {% trans 'Product attributes' %}
                                    </a>
                                </li>
                            {% endblock tabs %}
                        </ul>
                    </div>
                </div>
            {% endblock tab_nav %}

            <div class="col-md-9">
                <div class="tab-content">
                    {% block tab_content %}
                        {% block product_class_details %}
                            <div class="tab-pane active" id="product_class_details">
                                <div class="table-header">
                                    <h3>{% trans "Product Class details" %}</h3>
                                </div>
                                <div class="card card-body bg-light product-class-details">

                                    {% comment %}
                                        If the ProductClass form has field_errors, partials/form_fields.html
                                        will render an error message.
                                        This means that there'll be 2 error messages,
                                        one from the partial and one from the view. Perhaps there should be
                                        an option allowing hiding of the error message in the template.
                                        For now we copy paste what we need from the template.
                                    {% endcomment %}

                                    {% if form.non_field_errors %}
                                        {% for error in form.non_field_errors %}
                                            <div class="alert alert-danger">
                                                <span class="error-block"><i class="fas fa-exclamation"></i> {{ error }}</span>
                                            </div>
                                        {% endfor %}
                                    {% endif %}

                                    {% for field in form %}
                                        {% include 'oscar/dashboard/partials/form_field.html' with field=field %}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endblock %}

                        {% block product_attributes %}
                            <div class="tab-pane" id="product_attributes">
                                <div class="table-header">
                                    <h3>{% trans "Product attributes" %}</h3>
                                </div>
                                <div class="product-attributes">
                                    <table class="table table-striped table-bordered">
                                        {{ attributes_formset.management_form }}
                                        {{ attributes_formset.non_form_errors }}
                                        <col width="20%">
                                        <col width="20%">
                                        <col width="20%">
                                        <thead>
                                            <tr>
                                                <th>{% trans "Name" %}</th>
                                                <th>{% trans "Code" %}</th>
                                                <th>{% trans "Type" %}</th>
                                                <th>{% trans "Required" %}</th>
                                                <th>{% trans "Delete?" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for attribute_form in attributes_formset %}
                                                <tr>
                                                    {% for hidden_field in attribute_form.hidden_fields %}
                                                     {{ hidden_field }}
                                                    {% endfor %}
                                                    <td>{% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.name nolabel=True %}</td>
                                                    <td>{% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.code nolabel=True %}</td>
                                                    <td>
                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.type nolabel=True %}

                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.option_group nolabel=True %}
                                                    </td>
                                                    <td>{% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.required nolabel=True %}{{ attribute_form.non_field_errors }}</td>
                                                    <td>{% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.DELETE nolabel=True %}</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        {% endblock %}
                    {% endblock tab_content %}
                </div>
            </div>
        </div>

        {% block fixed_actions_group %}
            <div class="fixed-actions-group">
                <div class="form-actions">
                    <div class="float-right">
                        <a href="#" onclick="window.history.go(-1);return false" >
                            {% trans "Cancel" %}
                        </a>
                        {% trans "or" %}
                        <button class="btn btn-primary" type="submit">
                            {% trans "Save" %}
                        </button>
                    </div>
                </div>
            </div>
        {% endblock fixed_actions_group %}
    </form>

{% endblock dashboard_content %}

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