{% load i18n static arctic_tags %}
<div class="sidebar__header">
    <a href="{{ index_url }}" class="logo">
        <img src="{% static SITE_LOGO %}" />
        <h1>{{ SITE_NAME }}</h1>
    </a>
</div>
<ul class="sidebar__menu" id="side-menu">
    {% for key, value in menu.items %}
        {% if value.submenu %}
            <li class="has-sub">
                <a {% if value.active %}class="active" {% endif %} {% if not value.url %}js--collapse-menu{% endif %} href="{% if value.url %}{% url value.url %}{% endif %}">
                    <i class="sidebar__icon fa {{ value.icon }}"></i>
                    <span>{% trans key %}</span>
                    <i class="fa {% if not value.active %}fa-angle-left{% else %}fa-angle-down{% endif %} menu__arrow" js--collapse-menu-arrow></i>
                </a>
                <ul class="sidebar__submenu {% if value.active %}active{% endif %}">
                    {% for sub_key, sub_value in value.submenu.items %}
                        <li id="menu-{{ sub_value.url|slugify }}">
                            <a {% if sub_value.active %}class="active" {% endif %} href="{% url sub_value.url %}">
                                <i class="sidebar__icon fa {{ sub_value.icon|default_if_none:'' }}"></i>
                                {% trans sub_key %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </li>
        {% elif value.url %}
            <li id="menu-{{ value.url|slugify }}">
                <a {% if value.active %} class="no-sub active"{% endif %} href="{% url value.url %}">
                    <i class="sidebar__icon fa {{ value.icon }}"></i>
                    <span>{% trans key %}</span>
                </a>
            </li>
        {% endif %}
    {% endfor %}
</ul>
