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

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

{% block title %}
    {{ title }} | {% trans "Categories" %} | {{ 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">
                <a href="{% url 'dashboard:catalogue-category-list' %}">{% trans "Categories" %}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                {{ title }}
            </li>
        </ol>
    </nav>
{% 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="tab-nav-errors" autocomplete="off">
        {% 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="category_update_tabs">
                            {% block tabs %}
                                <li class="nav-item">
                                    <a class="nav-link active" href="#category_details" data-toggle="tab">
                                        {% trans 'Category details' %}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#seo" data-toggle="tab">
                                        {% trans 'Search engine optimisation' %}
                                    </a>
                                </li>
                            {% endblock tabs %}
                        </ul>
                    </div>
                </div>
            {% endblock tab_nav %}
            <div class="col-md-9">
                <div class="tab-content">
                    {% block tab_content %}
                        {% block category_details %}
                            <div class="tab-pane active" id="category_details">
                                <div class="table-header">
                                    <h3>{% trans "Category details" %}</h3>
                                </div>
                                <div class="card card-body category-details">
                                    {% block category_details_content %}
                                        <span class="error-block">{{ form.non_field_errors }}</span>
                                        {% for field in form.hidden_fields %}
                                            {{ field }}
                                        {% endfor %}
                                        {% for field in form.primary_form_fields %}
                                            {% if 'attr' not in field.id_for_label %}
                                                {% include 'oscar/dashboard/partials/form_field.html' with field=field %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endblock category_details_content %}
                                </div>
                            </div>
                        {% endblock category_details %}
                        {% block seo %}
                            <div class="tab-pane" id="seo">
                                <div class="table-header">
                                    <h3>{% trans "Search engine optimisation" %}</h3>
                                </div>
                                <div class="card card-body">
                                    {% block seo_content %}
                                        {% for field in form.seo_form_fields %}
                                            {% if 'attr' not in field.id_for_label %}
                                                {% include 'oscar/dashboard/partials/form_field.html' with field=field %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endblock seo_content %}
                                </div>
                            </div>
                        {% endblock seo %}
                    {% endblock tab_content %}
                </div>
            </div>
        </div>
        {% block fixed_actions_group %}
            <div class="fixed-actions-group">
                <div class="form-group">
                    <div class="float-right">
                        <a href="{% url 'dashboard:catalogue-category-list' %}">
                            {% trans "Cancel" %}
                        </a>
                        {% trans "or" %}
                        <button class="btn btn-secondary" name="action" type="submit" value="continue" data-loading-text="{% trans 'Saving...' %}">
                            {% trans "Save and continue editing" %}
                        </button>
                        <button class="btn btn-primary" name="action" type="submit" value="save" data-loading-text="{% trans 'Saving...' %}">
                            {% trans "Save" %}
                        </button>
                    </div>
                    {% if category %}
                        <a class="btn btn-success" href="{{ category.get_absolute_url }}">{% trans "View on site" %}</a>
                    {% endif %}
                </div>
            </div>
        {% endblock fixed_actions_group %}
    </form>
{% endblock dashboard_content %}
