<!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="/files/css/font-awesome.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 style="float:right"><button class="nav_bar_tab"type="button" onclick="toggleWallpaper()"></button></li>
      </ul>
    {% endif %}
  </header>
  <main>
  <div class="boxified 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
  </div>
    {% block content %}
    {% endblock %}
  </main>
  <script>
    function toggleWallpaper() {
      document.getElementByID("nav_bar").style.background-color = "white";
    }
  </script>
</body>
</html>
