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

{% block title %}
    {{ title }} | {% trans "Create Attribute Option Group" %} | {{ block.super }}
{% endblock %}

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

{% block navbar %}
{% if not is_popup %}
    {{ block.super }}
{% endif %}
{% endblock %}

{% block dashboard_nav %}
{% if not is_popup %}
    {{ block.super }}
{% endif %}
{% endblock %}

{% block breadcrumbs %}
    {% if not is_popup %}
        <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-attribute-option-group-list' %}">{% trans "Attribute Option Group" %}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{{ title }}</li>
            </ol>
        </nav>
    {% endif %}
{% endblock %}

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

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

        <div class="row">
            {% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="{{ is_popup }}" />{% endif %}
            {% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}" />{% endif %}

            {% 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="attribute_option_group_update_tabs">
                            {% block tabs %}
                                <li class="nav-item"><a class="nav-link active" href="#attribute_option_group_details" data-toggle="tab">{% trans 'Attribute Option Group details' %}</a></li>
                                <li class="nav-item"><a class="nav-link" href="#attribute_options" data-toggle="tab">{% trans 'Attribute Options' %}</a></li>
                            {% endblock tabs %}
                        </ul>
                    </div>
                </div>
            {% endblock tab_nav %}

            <div class="col-md-9">
                <div class="tab-content">
                    {% block tab_content %}
                        {% block attribute_option_group_details %}
                            <div class="tab-pane active" id="attribute_option_group_details">
                                <div class="table-header">
                                    <h3>{% trans "Attribute Option Group details" %}</h3>
                                </div>
                                <div class="card card-body attribute-option-group-details">

                                    {% comment %}
                                        If the AttributeOptionGroup 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 attribute_options %}
                            <div class="tab-pane" id="attribute_options">
                                <div class="table-header">
                                    <h3>{% trans "Attribute Options" %}</h3>
                                </div>
                                <div class="attribute-options">
                                    <table class="table table-striped table-bordered">
                                        {{ attribute_option_formset.management_form }}
                                        {{ attribute_option_formset.non_form_errors }}
                                        <col width="50%">
                                        <col width="50%">
                                        <thead>
                                            <tr>
                                                <th>{% trans "Option" %}</th>
                                                <th>{% trans "Delete?" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for attribute_option_form in attribute_option_formset %}
                                                <tr>
                                                    {% for hidden_field in attribute_option_form.hidden_fields %}
                                                        {{ hidden_field }}
                                                    {% endfor %}
                                                    <td>{% include 'oscar/dashboard/partials/form_field.html' with field=attribute_option_form.option nolabel=True %}</td>
                                                    <td>{% include 'oscar/dashboard/partials/form_field.html' with field=attribute_option_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="#" {% if not is_popup %}onclick="window.history.go(-1);return false"{% else %}onclick="window.close();return false;"{% endif %}>
                            {% 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 %}
