{% load static %}
<div class="kt-header__topbar-item kt-header__topbar-item--user">
    <div class="kt-header__topbar-wrapper" data-toggle="dropdown" data-offset="10px,10px">
        {% if user_blank_avatar and not user_avatar %}
            <img alt="Pic" src="{{ user_blank_avatar }}"/>
        {% elif user_avatar %}
            <img alt="Pic" src="{{ user_avatar }}"/>
        {% else %}
            <div class="kt-media t-media--lg kt-media--{{ user_avatar_color }}">
                <span>{{ user_initials }}</span>
            </div>
        {% endif %}
    </div>
    <div class="dropdown-menu dropdown-menu-fit dropdown-menu-right dropdown-menu-anim dropdown-menu-md">
        <div class="kt-user-card-v4 kt-user-card-v4--skin-light kt-notification-item-padding-x">
            <div class="kt-user-card-v4__avatar">
                {% if user_blank_avatar and not user_avatar %}
                    <img alt="Pic" src="{{ user_blank_avatar }}"/>
                {% elif not user_avatar %}
                <div class="kt-media kt-media--{{ user_avatar_color }}">
                    <span>{{ user_initials }}</span>
                </div>
                {% else %}
                <img class="kt-rounded-" alt="pic" src="{{ user_avatar }}"/>
                {% endif %}

            </div>
            <div class="kt-user-card-v4__name">
                {{ user_name }}
                <small>{{ user_subtitle }}</small>
            </div>
            <div class="kt-user-card-v4__badge kt-hidden">
                <span class="btn btn-label-primary btn-sm btn-bold btn-font-md">23 messages</span>
            </div>
        </div>
        <ul class="kt-nav kt-margin-b-10">
            {% for label, itens in user_menus %}
                {% if itens.has_perm %}
                    <li class="kt-nav__item">
                        <a href="{{ itens.url }}" class="kt-nav__link">
                            <span class="kt-nav__link-icon">
                                <i class="{{ itens.icon }}"></i>
                            </span>
                            <span class="kt-nav__link-text">{{ label }}</span>
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
            <li class="kt-nav__separator kt-nav__separator--fit"></li>
            <li class="kt-nav__custom kt-space-between">
                <a href="{{ signout_url }}"
                   class="btn btn-label-brand btn-upper btn-sm btn-bold">
                    <span class="kt-nav__link-icon"><i class="{{ menu.0 }}"></i></span>
                    <i class="fas fa-sign-out-alt"></i> Sair
                </a>
            </li>
        </ul>
    </div>
</div>