{% macro _side_menu_item(item, classes='', icon='') %}
    {% if item.disabled %}
        {% set classes = classes + 'disabled' %}
    {% else %}
        {% if item.active %}
            {% set classes = classes + ' active' %}
        {% endif %}
    {% endif %}
    <li class="item {{ classes }}">
        {%- if item.disabled %}
            <span class="title {{ icon or '' }}">
                {%- if item.sui_icon %}
                    <i class="{{ item.sui_icon }} icon"></i>
                {%- endif -%}
                <span class="side-menu-label">
                    {{- item.title -}}
                </span>
                {% if item.badge is not none %}
                    <span class="badge">{{ item.badge }}</span>
                {% endif %}
            </span>
        {%- else -%}
            <a class="title {{ icon or '' }}" href="{{ item.url }}">
                {%- if item.sui_icon %}
                    <i class="{{ item.sui_icon }} icon"></i>
                {%- endif -%}
                <span class="side-menu-label">
                    {{- item.title -}}
                </span>
                {% if item.badge is not none %}
                    <span class="badge">{{ item.badge }}</span>
                {% endif %}
            </a>
        {%- endif -%}
    </li>
{% endmacro %}

{% macro _side_menu_section(section) %}
    {% if section.items %}
        <li class="section {{ 'collapsed' if not section.active }}" data-section-name="{{ section.name }}">
            <div class="title-wrapper">
                <span class="title {{ section.icon }} side-menu-label">{{ section.title }}</span>
            </div>
            <ul class="{{ 'weak-hidden' if not section.active }}">
                {% for item in section.items %}
                    {{ _side_menu_item(item) }}
                {% endfor %}
            </ul>
        </li>
    {% endif %}
{% endmacro %}

<div class="side-menu" id="side-menu-{{ menu_id }}">
    <ul class="menu-items flexcol">
        {% for item in items %}
            {% if item.is_section %}
                {{ _side_menu_section(item) }}
            {% else %}
                {{ _side_menu_item(item, icon=item.icon) }}
            {% endif %}
        {% endfor %}
    </ul>
</div>

<script>
    (function() {
        'use strict';

        var menu = $('#side-menu-{{ menu_id }}');
        var userId = $('body').data('userId');

        function getSectionKey(section) {
            return 'side-menu-{{ menu_id }}-{0}-{1}'.format(userId, section.data('sectionName'));
        }

        menu.find('.section .title-wrapper').on('click', function() {
            var $this = $(this);
            var section = $this.closest('.section');
            $this.next('ul').slideToggle(300);
            section.toggleClass('collapsed');
            localStorage.setItem(getSectionKey(section), section.hasClass('collapsed'));
        });

        menu.find('.section').each(function() {
            var section = $(this);
            var collapsed = localStorage.getItem(getSectionKey(section));
            // if the active menu item is in the section, we don't touch it
            if (collapsed !== null && !section.find('.active').length) {
                section.toggleClass('collapsed', collapsed === 'true');
                section.children('ul').toggle(collapsed === 'false');
            }
        });

        $('.side-menu-label').on('mouseenter', function() {
            const $this = $(this);
            if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
                $this.attr('title', $this.text());
            }
        });
    })();
</script>
