{% extends 'allianceauth/base.html' %}
{% load i18n %}
{% load navactive %}
{% 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;
        }
        .flex-item {

        }
        a.nostyle {
            color: inherit;
            text-decoration: none !important;
        }
    </style>
    {% include 'bundles/datatables-css.html' %}
    {% block more_css %}{%endblock%}
{% endblock extra_css %}
{% block content %}
    <div class="col-lg-12">
        <br>
        <div class="col-lg-12 container">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".fittings-menus-collapse" aria-expanded="false">
                            <span class="sr-only">{% translate "Toggle navigation" %}</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="{% url 'fittings:dashboard' %}">{% translate "Fittings and Doctrines" %}</a>
                    </div>
                    <div class="collapse navbar-collapse fittings-menus-collapse">
                    <ul class="nav navbar-nav">
                            <li class="{% navactive request 'fittings:dashboard fittings:add_doctrine fittings:view_doctrine fittings:delete_doctrine fittings:edit_doctrine' %}"><a href="{% url 'fittings:dashboard' %}">{% translate "View All Doctrines" %}</a></li>
                            <li class="{% navactive request 'fittings:add_fit fittings:view_all_fits fittings:view_fit fittings:delete_fit fittings:save_fit fittings:edit_fit' %}"><a href="{% url 'fittings:view_all_fits' %}">{% translate "View All Fits" %}</a></li>
                            <li class="{% navactive request 'fittings:view_all_categories fittings:add_category fittings:view_category fittings:edit_category fittings:delete_category' %}"><a href="{% url 'fittings:view_all_categories' %}">{% translate "View All Categories" %}</a></li>
                    </ul>
                    {% if perms.fittings.manage %}
                        <div class="dropdown pull-right" style="margin-top: .8em;">
                            <button class="btn btn-success btn-sm dropdown-toggle" type="button" id="manageDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fa fa-plus"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="manageDrop">
                                <li> <a href="{% url 'fittings:add_fit' %}">{% translate "Fitting" %}</a></li>
                                <li> <a href="{% url 'fittings:add_doctrine' %}">{% translate "Doctrine" %}</a></li>
                                <li> <a href="{% url 'fittings:add_category' %}">{% translate "Category" %}</a></li>
                            </ul>
                        </div>
                    {% endif %}
                    </div>
                </div>
            </nav>
            {% block fittings_block %}{% endblock %}
        </div>
    </div>
{% endblock %}
