{% load account_tags %}
{% load spa_extras %}
<div class="navbar navbar-fixed-top navbar-inverse" xmlns="http://www.w3.org/1999/html">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a href="/" class="brand">
                Deep|South|Sounds
            </a>

            <div class="nav-collapse">
                <ul class="nav">
                    <li><a href="/mixes">Mixes</a></li>
                    {% comment %}
                    <li><a href="/releases">Releases</a></li>
                    <li><a href="/events">Events</a></li>
{% endcomment %}
                    <li><a href="/users">Users</a></li>
                    {% if user.is_authenticated %}
                        <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();">Logout&nbsp;<i
                                    class="icon-eject icon-white"></i>
                            </a>
                            <input type="hidden" name="user_id" value="{{ user.id }}"/>
                        </li>
                    {% else %}
                        <li>
                            <a data-bypass="true" id="header-login-button">Login/Signup&nbsp;<i
                                    class="icon-music icon-white"></i></a>
                        </li>
                    {% endif %}
                </ul>
                <a href="#" id="header-live-button" class="btn btn-success">
                    <i class="icon-headphones icon-white" id="header-live-icon"></i>Listen Live
                </a>
                {% if user.is_authenticated %}
                    <a class="pull-right btn btn-primary" href="/mix/upload" id='upload'>
                        <i class="icon-hand-up icon-white"></i>Upload</a>
                {% endif %}
                <ul class="nav pull-right">
                    <li>
                        <a class="volume-button" data-mode="volume" id="header-volume-button">
                            <i class="icon-volume-up icon-white" id="header-volume-icon"></i>
                        </a>
                    <li>
                    <li>
                        <a id="header-profile-edit" href="/me">{{ user|nice_name }}</a>
                    </li>

                </ul>
{% comment %}
                <form class="navbar-search pull-right" action="">
                    <input type="text" class="search-query span2" placeholder="Search">
                </form>
{% endcomment %}
            </div>
        </div>
    </div>
</div>
