<div class="container">
    <div class="d-flex">
        <a class="navbar-brand" href="/">
            <img src="/images/favicons/favicon-32x32.png" border="0"> &nbsp; <%- i18n('main', 'app') %>
        </a>

        <div class="d-flex align-items-center order-lg-2 ml-auto">
            <div class="dropdown">
                <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(<%- getUserField('avatar', '/images/default-avatar.jpg') %>)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default"><%- getUserField('nickname', null) || getUserField('name', i18n('main', 'unknown-user')) %></span>
                      <small class="text-muted d-block mt-1"><%- getRole() %></small>
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item edit-details" href="#">
                        <i class="dropdown-icon fe fe-user"></i> <%- i18n('users', 'edit-details') %>
                    </a>
                    <a class="dropdown-item change-password" href="#">
                        <i class="dropdown-icon fe fe-lock"></i> <%- i18n('users', 'change-password') %>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item logout" href="/logout">
                        <i class="dropdown-icon fe fe-log-out"></i> <%- getLogoutText() %>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>