{% extends 'base.html' %}

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

{% block sidebar %}

 <div class="w3-card-4 w3-black w3-opacity sidebar w3-round">

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

</div>

{% endblock %}


{% block content %}

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

		<header class="w3-row w3-green">
			<div class="w3-col w3-container w3-green" style="width:95%">
					 <h3 ><a href="/album/{{i.id}}" style="text-decoration:none">{{i.album_name}}</a></h3>
			</div>

			{% if request.user.is_authenticated %}
			<div class="w3-col w3-container w3-green " style="width:5%" >
				  <div class="w3-dropdown-hover w3-right w3-green">
					  <button id="search_type" class="w3-button" "><i class="fa fa-plus fa-2x" aria-hidden="true"></i> </button>
					  <div class="w3-dropdown-content w3-bar-block w3-card-4"  style="right:0">
							  <button class=" w3-bar-item w3-button">Update existing playlist</button>
							  <button class=" w3-bar-item w3-button">Create new playlist</button>
					  </div>
				  </div>
			</div>
			{% endif %}

		</header>

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


		</div>

		{% endif %}


		{% if type == "artist" %}

		<header class="w3-row w3-green">
			<div class="w3-col w3-container w3-green" style="width:95%">
					<h3 ><a href="/artist/{{i.id}}" style="text-decoration:none">{{i.name}}</a></h3>
			</div>

			{% if request.user.is_authenticated %}
			<div class="w3-col w3-container w3-green " style="width:5%" >
				  <div class="w3-dropdown-hover w3-right w3-green">
					  <button id="search_type" class="w3-button"><i class="fa fa-plus fa-2x" aria-hidden="true"></i> </button>
					  <div class="w3-dropdown-content w3-bar-block w3-card-4"  style="right:0">
							  <button class=" w3-bar-item w3-button">Update existing playlist</button>
							  <button class=" w3-bar-item w3-button">Create new playlist</button>
					  </div>
				  </div>
			</div>
			{% endif %}

		</header>

		<div class="w3-container w3-opacity w3-black">
			{% 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>



		{% endif %}


		{% if type == "song" %}
		<header class="w3-row w3-green">
			<div class="w3-col w3-container w3-green" style="width:95%">
						<h3>{{i.song_name}}</h3>
			</div>

			{% if request.user.is_authenticated %}
			<div class="w3-col w3-container w3-green " style="width:5%" >
				  <div class="w3-dropdown-hover w3-right w3-indigo">
					  <button id="search_type" class="w3-button"><i class="fa fa-plus fa-2x" aria-hidden="true"></i> </button>
					  <div class="w3-dropdown-content w3-bar-block w3-card-4"  style="right:0">
							  <button class=" w3-bar-item w3-button">Update existing playlist</button>
							  <button class=" w3-bar-item w3-button">Create new playlist</button>
					  </div>
				  </div>
			</div>
			{% endif %}

		</header>

		<div class="w3-container  w3-opacity  w3-black">
			<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>




		{% endif %}

	</div>
	{% endfor %}


{% endblock %}
