{% load base %}
<div class="kt-header__topbar-item kt-header__topbar-item--user">
    <div class="kt-header__topbar-wrapper" data-toggle="dropdown" data-offset="10px,0px" aria-expanded="false">
        <div class="kt-header__topbar-user">
            <span class="kt-hidden kt-header__topbar-welcome kt-hidden-mobile">Olá,</span>
            <span class="kt-header__topbar-username kt-hidden-mobile"></span>
            {% comment %} <img alt="Pic" class="kt-radius-100" src="https://static-storage.dnoticias.pt/www-assets.dnoticias.pt/backoffice/media/users/default.png"> {% endcomment %}

            <!--use below badge element instead the user avatar to display username's first letter(remove kt-hidden class to display it) -->
            <span class="kt-badge kt-badge--username kt-badge--danger kt-badge--xl kt-badge--bold">{% get_initials request.user %}</span>
        </div>
    </div>
    <div class="dropdown-menu dropdown-menu-fit dropdown-menu-right dropdown-menu-anim dropdown-menu-top-unround dropdown-menu-xl" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(609px, 50px, 0px);">

        <!--begin: Head -->
        <div class="kt-user-card kt-user-card--skin-light kt-notification-item-padding-x">
            <div class="kt-user-card__avatar">
                {% comment %} <img class="kt-hidden-" alt="Pic" src="https://static-storage.dnoticias.pt/www-assets.dnoticias.pt/backoffice/media/users/default.png"> {% endcomment %}

                <!--use below badge element instead the user avatar to display username's first letter(remove kt-hidden class to display it) -->
                <span class="kt-badge kt-badge--username kt-badge--unified-danger kt-badge--lg kt-badge--rounded kt-badge--bold">{% get_initials request.user %}</span>
            </div>
            <div class="kt-user-card__name">
                {{ request.user.get_full_name|default:request.user.email }}
            </div>
            
        </div>

        <!--end: Head -->

        <!--begin: Navigation -->
        <div class="kt-notification">
            
            
            <div class="kt-notification__custom kt-space-between">
                <form method="POST" action="{% url 'dnoticias-auth-logout' %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-danger btn-sm">Terminar sessão</button>
                </form>
            </div>
        </div>

        <!--end: Navigation -->
    </div>
</div>