<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{% block title %}MyMusicList{% endblock %}</title>
  <link rel="stylesheet" href="/files/css/mymusiclist.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <header>
    {% if request.user.is_authenticated %}
      <ul id='nav_bar'>
        <li><a class="nav_bar_home" href="/">MyMusicList</a></li>
        <li><a class="nav_bar_tab" href="/profile/{{request.user.username}}">Hi, {{request.user.username}}</a></li>
        <li style="float:right"><a class="nav_bar_tab" href="{% url 'logout' %}">Logout</a></li>
      </ul>
    {% else %}
      <ul id='nav_bar'>
        <li><a class="nav_bar_home" href="/">MyMusicList</a></li>
        <li><a class="nav_bar_tab" href="{% url 'login' %}">LOGIN</a></li>
        <li><a class="nav_bar_tab" href="{% url 'signup' %}">SIGN UP</a></li>
        <li>
             <div class="search_nav">
                  <form action="{% url 'search' %}" method="get">
                            <div class="wrap">
                 			<div class="search">
                 			<input class="searchbar" type="text" name="search" placeholder="Search..">
                 			<input id="searchbytype" type="hidden" name="searchtype" value="album">
                 		     <button class="button"> <i class="fa fa-search" aria-hidden="true"></i></button>
                 			</div>
                 		</div>
                  </form>
             </div>
        </li>
        <li class="dropdown nav_bar_tab">
             <a id=search_type href=# class="dropbtn">SEARCH  <i class="fa fa-caret-down"></i></a>
                   <div class="dropdown-content">
                        <a href="#" onclick="mainA()" >Album</a>
                        <a href="#" onclick="mainB()">Artist</a>
                        <a href="#" onclick="mainC()">Song</a>
                   </div>
       </li>
        <li style="float:right"><button class="nav_bar_tab"type="button" onclick="toggleWallpaper()"></button></li>
      </ul>
    {% endif %}








    <div class="boxified sidebar">
      {% block sidebar %}
        <h2>Featured Songs</h2>
        <img src="/files/images/divide_edsheeran.jpeg" alt="Divide - Ed Sheeran">
        Divide - Ed Sheeran
        <img src="/files/images/palette_iu.jpeg" alt="Palette - IU">
        Palette - IU
        <img src="/files/images/rockstar_postmalone21savage.jpeg" alt="Rockstar">
        Rockstar
      {% endblock %}
    </div>
  </header>







	<script>
	function mainA(){
		document.getElementById("search_type").innerHTML = "Album Search";
		document.getElementById("searchbytype").value = "album";
	}
	function mainB(){
		document.getElementById("search_type").innerHTML = "Artist Search";
		document.getElementById("searchbytype").value = "artist";
	}
	function mainC(){
		document.getElementById("search_type").innerHTML = "Song Search";
		document.getElementById("searchbytype").value = "song";
	}
	</script>













    {% block content %}
    {% endblock %}
  <script>
    function toggleWallpaper() {
      document.getElementByID("nav_bar").style.background-color = "white";
    }
  </script>
</body>
</html>
