{% load gravatar %}

<script>
    // TODO: move to separate js file
    async function flushCache() {
        let response = await fetch('/api/flush-cache/');
        return await response.json();
    }
</script>

<header class="main-header">

    <a class="logo" href="/">
        <span class="logo-mini"><b>DB</b></span>
        <span class="logo-lg"><b>DB</b>LRA</span>
    </a>

    <nav class="navbar navbar-static-top">
        <a class="sidebar-toggle" data-toggle="push-menu" href="#" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#" aria-expanded="false" onclick="flushCache()" title="Flush cache">
                        <i class="fa fa-refresh"></i>
                    </a>
                </li>
                {% if user.is_authenticated %}
                    <li class="dropdown user user-menu">
                        <!-- Menu Toggle Button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!-- The user image in the navbar-->
                            <img src="{{ user.email|gravatar_url:160 }}"
                                 class="user-image" alt="User Image">
                            <!-- hidden-xs hides the username on small devices so only the image appears. -->
                            <span class="hidden-xs">{{ user.first_name }} {{ user.last_name }}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- The user image in the menu -->
                            <li class="user-header">
                                <img src="{{ user.email|gravatar_url:160 }}"
                                     class="img-circle" alt="User Image">

                                <p>
                                    {{ user.first_name }} {{ user.last_name }}
                                    <small>@{{ user.username }}</small>
                                </p>
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-right">
                                    <a href="{% url 'logout' %}" class="btn btn-default btn-flat">Sign out</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                {% else %}
                    <li>
                        <a href="{% url 'login' %}">
                            <i class="fa fa-lock"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </nav>

</header>
