{% extends "allianceauth/base-bs5.html" %}

{% load i18n %}
{% load navactive %}

{% block header_nav_brand %}{% translate "Fittings and Doctrines" %}{% endblock %}

{% block header_nav_collapse_left %}
    <li class="nav-item">
        <a
            class="nav-link {% navactive request 'fittings:dashboard fittings:add_doctrine fittings:view_doctrine fittings:delete_doctrine fittings:edit_doctrine' %}"
            href="{% url 'fittings:dashboard' %}"
        >
            {% translate "View All Doctrines" %}
        </a>
    </li>

    <li class="nav-item">
        <a
            class="nav-link {% navactive request 'fittings:add_fit fittings:view_all_fits fittings:view_fit fittings:delete_fit fittings:save_fit fittings:edit_fit' %}"
            href="{% url 'fittings:view_all_fits' %}"
        >
            {% translate "View All Fittings" %}
        </a>
    </li>

    <li class="nav-item">
        <a
            class="nav-link {% navactive request 'fittings:view_all_categories fittings:add_category fittings:view_category fittings:edit_category fittings:delete_category' %}"
            href="{% url 'fittings:view_all_categories' %}"
        >
            {% translate "View All Categories" %}
        </a>
    </li>
{% endblock %}

{% block header_nav_collapse_right %}
    {% if perms.fittings.manage %}
        <li class="nav-item dropdown aa-fittings-add-dropdown me-2">
            <a
                class="dropdown-toggle btn btn-success btn-sm"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                <span class="fa-regular fa-plus"></span>
            </a>

            <ul class="dropdown-menu clearfix" role="menu">
                <li>
                    <a class="dropdown-item" href="{% url 'fittings:add_fit' %}">
                        {% translate "Fitting" %}
                    </a>
                </li>

                <li>
                    <a class="dropdown-item" href="{% url 'fittings:add_doctrine' %}">
                        {% translate "Doctrine" %}
                    </a>
                </li>

                <li>
                    <a class="dropdown-item" href="{% url 'fittings:add_category' %}">
                        {% translate "Category" %}
                    </a>
                </li>
            </ul>
        </li>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="aa-fittings">
        {% block fittings_block %}{% endblock %}
    </div>
{% endblock %}

{% block extra_css %}
        <style>
    {#        .flex-container {#}
    {#            display: flex;#}
    {#            flex-direction: row;#}
    {#            height: 100%;#}
    {#            align-items: center;#}
    {#            justify-content: center;#}
    {#        }#}

    {#        .flex-wrap {#}
    {#            display: -webkit-flex; /* Safari */#}
    {#            -webkit-flex-wrap: wrap; /* Safari 6.1+ */#}
    {#            display: flex;#}
    {#            flex-wrap: wrap;#}
    {#        }#}

            a.nostyle,
            .table a.nostyle:not(.btn),
            table a.nostyle:not(.btn) {
                color: inherit;
                text-decoration: none;
            }
        </style>

    {% include 'bundles/datatables-css-bs5.html' %}

    {% block more_css %}{%endblock%}
{% endblock extra_css %}
