{% extends 'base.html' %}

{% block title %}Song search test{% endblock %}

{% block sidebar %}
<h2> Search results (by {{type}})</h2>
<p>
	You searched for '{{term}}' <br>
	Found {{results.count}} results <br>
	Source: Local</p>
{% endblock %}

{% block content %}

	{% for i in results %}
	<div class = " main w3-margin w3-card-4">
		{% if type == "album" %}

		<header class="w3-container w3-green">
		  <h3><a href="/album/{{i.id}}">{{i.album_name}}</a></h3>
		</header>
		<div class="w3-container w3-black">
			<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
				Year: {{i.year}} </p>

		</div>
		
			<!-- ... -->
			{% if request.user.is_authenticated %}
			<!-- ... -->
			<div class="w3-dropdown-hover">
				<button id="search_type" class="w3-button" style="width:200px; text-align: left;"><i class="fa fa-caret-down"></i> </button>
				<div class="w3-dropdown-content w3-bar-block w3-card-4">
						<button class=" w3-bar-item w3-button">Update existing playlist</button>
						<button onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
						<button class=" w3-bar-item w3-button">Create new playlist</button>
				</div>
			</div>
			<!-- ... -->
			{% endif %}
			<!-- ... -->
		
		
		{% endif %}


		{% if type == "artist" %}
		<header class="w3-container w3-blue">
		<h3><a href="/artist/{{i.id}}">{{i.name}}</a></h3>
		</header>

		<div class="w3-container">
			{% for j in albums %}
			<p> <tab>
			{% if j.artist.name == i.name %}
			<h3><a href="/album/{{j.id}}">{{ j.album_name }}</a> - {{ j.year }} </h3>
			{% endif %} </p>
			{% endfor %}
		</div>
		
			<!-- ... -->
			{% if request.user.is_authenticated %}
			<!-- ... -->
			<div class="w3-dropdown-hover">
				<button id="search_type" class="w3-button" style="width:200px; text-align: left;"><i class="fa fa-caret-down"></i> </button>
				<div class="w3-dropdown-content w3-bar-block w3-card-4">
						<button class=" w3-bar-item w3-button">Update existing playlist</button>
						<button onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
						<button class=" w3-bar-item w3-button">Create new playlist</button>
				</div>
			</div>
			<!-- ... -->
			{% endif %}
			<!-- ... -->
		

		{% endif %}


		{% if type == "song" %}
		<header class="w3-container w3-green">
			<h3>{{i.song_name}}</h3>
		</header>

		<div class="w3-container">
			<h3><a href="/album/{{i.album.id}}">{{i.album.album_name}}</a></h3>
			<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
				Year: {{i.album.year}} </p>
		</div>
		
			<!-- ... -->
			{% if request.user.is_authenticated %}
			<!-- ... -->
			<div class="w3-dropdown-hover">
				<button id="search_type" class="w3-button" style="width:200px; text-align: left;"><i id = {{i.id}} class="fa fa-caret-down"></i> </button>
				<div class="w3-dropdown-content w3-bar-block w3-card-4">
						<button class="w3-bar-item w3-button">Update existing playlist</button>
						<button onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
						<button onclick="addSong({{i.id}},0)" class=" w3-bar-item w3-button">Create new playlist</button>
				</div>
			</div>
			<!-- ... -->
			{% endif %}
			<!-- ... -->
		

		{% endif %}

	</div>
	{% endfor %}
	<script>
		function addSong(song, plname){
			if(plname == 0){
				plname = "New";
			}
			var xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4) {
					if(this.status == 200) {
						document.getElementById(song).className = "fa fa-check-circle-o";
					} else if (this.status= 403){
						document.getElementById(song).className = "fa fa-times-circle";
					} else{
						alert("failed?");
					}
				}
    		};
			xhttp.open("GET", "/manageplaylist/?song=" + song + "&playlist=" + plname, true);
			xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhttp.send();

		}
	</script>

{% endblock %}