{% load account_tags %}
{% load spa_extras %}
{% load thumbnail %}
<div class="navbar-container">
    <div class="navbar-header pull-left">
        <a href="/" class="navbar-brand">
            Deep|South|Sounds
        </a>
    </div>
    <div class="navbar-header">
        <ul class="nav ace-nav">
            <li><a href="/mixes"><i class="fa fa-music fa fa-white"></i>Mixes</a></li>
            <li><a href="/users"><i class="fa fa-user fa fa-white"></i>Users</a></li>
            {% if user.is_authenticated %}
            <li><a href="/stream" title="Show mixes from people you follow" id="header-stream-button"><i class="fa fa-circle-arrow-down fa fa-white"></i>Stream</a></li>
            {% endif %}
            <li><a data-bypass="true" title="Show random mix from our vaults" id="header-random-button"><i class="fa fa-cogs fa fa-white"></i>Random</a></li>
            <li><a data-bypass="true" target="_blank" href="/podcast"><i class="fa fa-rss fa fa-white"></i>Podcast</a></li>
            <li class="purple">
                <a data-bypass="true" id="header-live-button">&nbsp;Listen Live
                    <i class="fa fa-headphones fa fa-white" id="header-live-icon"></i>
                </a>
            </li>
            {% if user.is_authenticated %}
                <li class="purple">
                    <a href="/mix/upload" id='upload'>Upload
                        <i class="fa fa-hand-up fa fa-white"></i>
                    </a>
                </li>
            {% endif %}
        </ul>
    </div>
    <div class="navbar-header pull-right" role="navigation">
        <ul class="nav ace-nav">
            <li><a class="btn-danger" data-bypass="true" id="header-donate-button"><i class="fa fa-euro" />Donate</a></li>
            <li class="nav ace-nav" id="header-notifications">
                <!-- End Notifications li -->
            </li>
            {% if user.is_authenticated %}
                <li class="light-blue">
                    <a data-toggle="dropdown" data-bypass="true" href="#" class="dropdown-toggle">
                        {% thumbnail user|avatar_image "36x36" crop="center" as im %}
                            <img id="nav-profile-image" class="nav-user-photo"
                                 src="{{ im.url }}"
                                 alt="AAProfileImg"/>
                        {% endthumbnail %}
                        <span class="user-info">
                            <small>Welcome,</small>
                            {{ user.first_name }}
                        </span>
                        <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
                        <li>
                            <a href="/me">
                                <i class="fa fa-cog"></i>
                                Settings
                            </a>
                        </li>
                        <li>
                            <a href="{{ user|profile_url }}">
                                <i class="fa fa-user"></i>
                                Profile
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <form id="logout-form" method="post" action="{% url "account_logout" %}"
                                  style="display: none">
                                {% csrf_token %}
                            </form>
                            <a data-bypass="true" id="header-logout-button"
                               onclick="document.getElementById('logout-form').submit();">
                                <i class="fa fa-off"></i>
                                Logout
                            </a>
                            <input type="hidden" name="user_id" value="{{ user.id }}"/>
                        </li>
                    </ul>
                </li>
            {% else %}
                <li>
                    <a data-bypass="true" id="header-login-button">Login/Signup</a>
                </li>
            {% endif %}
        </ul>
    </div>
</div>