{% extends "atoum/base.html" %}
{% load i18n %}
{% block header-title %}{{ assortment_object.title }} - {{ block.super }}{% endblock header-title %}

{% block title-content %}{% spaceless %}
    <p class="mb-0">
        <small class="text-body-secondary"><i class="bi bi-stack"></i> {% translate "Assortment" %}&nbsp;:</small>
    </p>

    <h1>{{ assortment_object.title }}</h1>
{% endspaceless %}{% endblock title-content %}

{% block page-submenu %}
    <div class="page-submenu">
        {% if request.user.is_staff %}
            <div class="manage-object dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-gear"></i> {% translate "Manage" %}
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="{% url "admin:atoum_assortment_change" object_id=assortment_object.id %}"
                            class="dropdown-item">
                            <small class="me-3"><i class="bi bi-pencil text-primary"></i> {% translate "Change" %}</small>
                        </a>
                    </li>
                    <li>
                        <a href="{% url "admin:atoum_assortment_delete" object_id=assortment_object.id %}"
                            class="dropdown-item">
                            <small class="me-3"><i class="bi bi-trash3 text-danger"></i> {% translate "Delete" %}</small>
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a href="{% url "admin:atoum_category_add" %}?assortment={{ assortment_object.id }}"
                            class="dropdown-item">
                            <small class="me-3"><i class="bi bi-plus-circle text-success"></i> {% translate "Add a new Category" %}</small>
                        </a>
                    </li>
                </ul>
            </div>
        {% endif %}
    </div>
{% endblock page-submenu %}

{% block app_content %}{% spaceless %}
    <div class="assortment-detail mt-3">
        <div class="assortment-categories">
            <h3 class="h4 mb-4">
                <i class="bi bi-tags"></i>
                {% translate "Categories" %}
            </h3>

            <div class="categories cartouches">
                {% for category in object_list %}
                    <a class="item item--category" href="{{ category.get_absolute_url }}">
                        <div class="cover"></div>
                        <div class="body">
                            <span class="title">{{ category.title }}</span>
                        </div>
                    </a>
                {% empty %}
                    <div class="empty">
                        <p><em>{% translate "No category yet." %}</em></p>
                    </div>
                {% endfor %}
            </div>
        </div>

        {% include "atoum/pagination.html" %}
    </div>
{% endspaceless %}{% endblock app_content %}
