  <header>
    <div class="container">
      <div class="row">      
	<div class="col-xs-9 search">
	  <!-- Logo -->
	  <a href="/" class="logo">
	      WA
	  </a>

	  <!-- Search -->
	  <form action="" method="get" id="search-form">
	    <input type="text" class="form-control" id="searchbar"
		   placeholder="What do you want to learn?"
		   data-provide="typeahead"
		   autocomplete="off"
		   name="query" value="{{query}}">
	    <input type='submit' class="hidden"/>
	    <i class="fa fa-search" aria-hidden="true"></i>    

	  </form>
	</div>
	<!-- Menu -->
	<div class="col-xs-3 main-menu">
	  <div class="right">
	    {% if user.is_authenticated %}
	    <a data-toggle="modal" data-target="#submit" class="btn btn-default">
	      <i class="fa fa-plus"></i>			      
	    </a>
	    <!-- 
            <li>
	      <a data-toggle="modal" data-target="#submit">
		{{user.username}}
	      </a>
	    </li>
	    -->
	    <!-- 
            <li>
	      <a data-toggle="modal" data-target="#submit">
		<i class="fa fa-gear"></i>		
	      </a>
	    </li>
	     -->
	    <!-- Logout -->
	    <a href="/logout" class="btn btn-default">
	      <i class="fa fa-sign-out"></i>		
	    </a>

	    {% else %}
	    <a data-toggle="modal" data-target="#login" class="btn btn-default">
	      <!-- Submit -->
	      <i class="fa fa-plus"></i>			      
	    </a>
	    <a data-toggle="modal" data-target="#login" class="btn btn-default">
	      <!-- Login -->
	      <i class="fa fa-sign-in"></i>	      
	    </a>
	    {% endif %}	    	    
	  </div>	  
	</div>
      </div>

    <!-- Subnav -->
    <div class="row subnav">      
      <div class="col-xs-12 filters">
	<div class="dropdown">
	  <a class="btn btn-default" data-toggle="dropdown">
	    {% if not category %}
	    Category: All
	    {% else %}
	    {{category}}
	    {% endif %}	    	    
	  </a>
	  <ul class="dropdown-menu" role="menu" id="category">
	    <li><a href="all">All</a></li>
	    {% for category in categories %}
            <li><a href="{{category.slug}}">{{category.title}}</a></li>
	    {% endfor %}	    
          </ul>	
	</div>

	<!-- 
	<div class="dropdown">
	  <a class="btn btn-default" data-toggle="dropdown">
	    Sorting: Hot
	  </a>
	  <ul class="dropdown-menu" role="menu">
            <li><a href="#">Top</a></li>
            <li><a href="#">New</a></li>
          </ul>	
	</div>
	-->
	<div class="dropdown">
	  <a class="btn btn-default" data-toggle="dropdown">
	    {% if not posttype %}
	    Format: All
	    {% else %}
	    {{posttype}}
	    {% endif %}		    
	  </a>
	  <ul class="dropdown-menu" role="menu" id="posttype">
            <li><a href="all">All</a></li>	    
            <li><a href="video">Video</a></li>
            <li><a href="article">Article</a></li>
            <li><a href="book">Book</a></li>
          </ul>	
	</div>


	<div class="dropdown">
	  <a class="btn btn-default" data-toggle="dropdown">
	    {% if not level %}
	    Level: All
	    {% else %}
	    {{level}}
	    {% endif %}		    
	  </a>
	  <ul class="dropdown-menu" role="menu" id="level">
            <li><a href="all">All</a></li>	    
            <li><a href="beginner">Beginner</a></li>
            <li><a href="intermediate">Intermediate</a></li>
            <li><a href="advanced">Advanced</a></li>
          </ul>	
	</div>


	<div class="dropdown">
	  <a class="btn btn-default" data-toggle="dropdown">
	    {% if not price %}
	    Price: All
	    {% else %}
	    {{price}}
	    {% endif %}		    
	  </a>
	  <ul class="dropdown-menu" role="menu" id="price">
            <li><a href="all">All</a></li>	    
            <li><a href="free">Free</a></li>
            <li><a href="paid">Paid</a></li>
          </ul>	
	</div>

      </div> <!-- End .filters -->
    </div> <!-- End .container -->

  </header>
