{% load materialize_nav %}
<!-- ========== Nav Headers ========== -->
{% if AppNavigation and AppNavigation.get_nav_items %}
<ul class="right show-on-median hide-on-small-and-down hide-on-large-only">
    <!-- User Navigation -->
{% for key, navheader in AppNavigation %}
    {% render_navbar_header navheader %}
{% endfor %}
</ul>

<!-- ===== User Nav Header Dropdown ===== -->
{% for key, navheader in AppNavigation %}
    {% render_navbar_dropdown_items navheader %}
{% endfor %}
{% endif %}
<!-- ========== END Navigation Bar ========== -->


<!-- ========== User Nav Header ========== -->
<ul class="right show-on-median hide-on-small-and-down hide-on-large-only">
    <!-- User Navigation -->
    {% if user.is_authenticated %}
        <li><a id="nav_dropdown_trig_user" style="max-height: 64px;" class="dropdown-trigger" data-target="nav_dropdown_user">
            {% render_user_image user style="max-height: 64px; float: left;" class_names="circular center" %}
            {{ user.username }}
            <i class="material-icons right">arrow_drop_down</i></a></li>
    {% else %}
        <li><a href="{% url 'login' %}">Login</a></li>
    {% endif %}
</ul>

<!-- ===== User Nav Header Dropdown ===== -->
<ul id="nav_dropdown_user" class="dropdown-content">
    <li><a href="{% url 'logout' %}">Sign Out</a></li>
</ul>


<script>
    $(document).ready(function() {
        // Init search filter dropdown
        var nav_dropdown_trig_el = document.querySelector('#nav_dropdown_trig_user');
        var nav_dropdown_trig_inst = M.Dropdown.init(nav_dropdown_trig_el, {
            coverTrigger: false, constrainWidth: true, closeOnClick: false
        });
    });
</script>
<!-- ========== END Navigation Bar ========== -->
