{% macro nav_link(name, url, icon=None) %}
    <li class="nav-item mx-2">
        <a class="nav-link" href="{{ url }}">
            {% if icon %}
                <i class="material-icons">{{ icon }}</i>
            {% endif %}
            {{ name }}
        </a>
    </li>
{% endmacro %}

{% macro dropdown(title, icon, children) %}
    <li class="nav-item dropdown dropdown-hover mx-2">
        <a role="button" class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="{{ title | replace(' ', '') }}" data-bs-toggle="dropdown" aria-expanded="false">
            {% if icon %}
                <i class="material-icons opacity-6 me-2 text-md">{{ icon }}</i>
            {% endif %}
            {{ title }}
            <img src="{{ url_for('static', filename='assets/img/down-arrow-dark.svg') }}" alt="down-arrow" class="arrow ms-2">
        </a>
        <div class="dropdown-menu dropdown-menu-animation" aria-labelledby="{{ title | replace(' ', '') }}">
            <ul class="list-group w-100">
                {% for child in children %}
                    {% if child.roles %}
                        {% if current_user.has_roles(*child.roles) %}
                            <li class="nav-item dropdown-subitem list-group-item border-0 p-0">
                                <a class="dropdown-item ps-3 border-radius-md mb-1" href="{{ child.url }}">
                                    <span>{{ child.name }}</span>
                                </a>
                            </li>
                        {% endif %}
                    {% else %}
                        <li class="nav-item dropdown-subitem list-group-item border-0 p-0">
                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="{{ child.url }}">
                                <span>{{ child.name }}</span>
                            </a>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </li>
{% endmacro %}