{% load static %}

<header class="header">
    <div class="logo-container">
        <a href="{% url 'cabinet:index' %}" class="logo">
            <img src="{% static 'img/logo-light.png' %}" height="35" alt="Porto Admin"/>
        </a>
        <div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
            <i class="fas fa-bars" aria-label="Toggle sidebar"></i>
        </div>
    </div>

    <div class="header-right">
        <ul class="notifications">
            <li>
                <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
                    <i class="fas fa-bell"></i>
                    <span class="badge">0</span>
                </a>
                <div class="dropdown-menu notification-menu">
                    <div class="notification-title">
                        <span class="float-right badge badge-default">0</span>
                        Alerts
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                No notifications
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
        <span class="separator"></span>
        <div id="userbox" class="userbox">
            <a href="#" data-toggle="dropdown">
                <figure class="profile-picture">
                    <img src="{% static 'img/!logged-user.jpg' %}" alt="{{ request.user.username }}" class="img-circle"
                         data-lock-picture="{% static 'octopus/images/!logged-user.jpg' %}"/>
                </figure>
                <div class="profile-info" data-lock-name="{{ request.user.username }}"{# data-lock-email="johndoe@okler.com" #}>
                    <span class="name">{{ request.user.username }}</span>
                    <span class="role">{% if request.user.is_superuser %}administrator{% else %}user{% endif %}</span>
                </div>
                <i class="fa custom-caret"></i>
            </a>
            <div class="dropdown-menu">
                <ul class="list-unstyled mb-2">
                    <li class="divider"></li>
                    <li>
                        <a role="menuitem" tabindex="-1" href="#">
                            <i class="fas fa-user"></i> My Profile
                        </a>
                    </li>
                    <li>
                        <a role="menuitem" tabindex="-1" href="{% url 'cabinet:logout' %}">
                            <i class="fas fa-power-off"></i> Logout
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>