<%inherit file="base.html" />

<%def name="body()">
	<div class="table_wrapper">
	<div id="paddingheader">
		<h1 class="clearfix"><i class="fa fa-search"></i> Search Result</h1>
	</div>
	<table class="display" id="searchresults_table">
		<thead>
			<tr>
				<th id="albumart"></th>
				%if type == 'album':
					<th id="albumname">Album Name</th>
				%endif
				<th id="artistname">Artist Name</th>
				<th id="score">Score</th>
				<th id="add"></th>
			</tr>
		</thead>
		<tbody>
			%if searchresults:
				%for result in searchresults:
				<%
					if result['score'] == 100:
						grade = 'A'
					else:
						grade = 'Z'
				%>
				<tr class="grade${grade}">
				%if type == 'album':
					<td id="albumart"><div id="artistImg"><img title="${result['albumid']}" class="albumArt" height="50" width="50"></div></td>
				%else:
					<td id="albumart"><div id="artistImg"><img title="${result['id']}" class="albumArt" height="50" width="50"></div></td>
				%endif
				%if type == 'album':
					<td id="albumname"><a href="${result['albumurl']}">${result['title']}</a></td>
				%endif
					<td id="artistname"><a href="${result['url']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
					<td id="score"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></td>
				%if type == 'album':	
					<td id="add"><a href="addReleaseById?rid=${result['albumid']}"><i class="fa fa-plus"></i> Add this album</a></td>
				%else:
					<td id="add"><a href="addArtist?artistid=${result['id']}"><i class="fa fa-plus"></i> Add this artist</a></td>
				%endif
				</tr>
				%endfor
			%endif
		</tbody>
	</table>
	</div>
</%def>

<%def name="headIncludes()">
	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
</%def>

<%def name="javascriptIncludes()">

	<script src="js/libs/jquery.dataTables.min.js"></script>
	
	<script>
	function getArt() {
		$("table#searchresults_table tr td#albumart img").each(function(){	
			var id = $(this).attr('title');
			var image = $(this);
			if ( !image.hasClass('done') ) {
				image.addClass('done');
				getImageLinks(image,id,"${type}");
			}
		});
	}
	function initThisPage() {
		getArt();
		$('#searchresults_table').dataTable(
			{
				"bDestroy": true,
				"aoColumnDefs": [
			          { 'bSortable': false, 'aTargets': [ 0,3 ] }
				],	
				"oLanguage": {
					"sLengthMenu":"Show _MENU_ results per page",
					"sEmptyTable": "No results",
					"sInfo":"Showing _START_ to _END_ of _TOTAL_ results",
					"sInfoEmpty":"Showing 0 to 0 of 0 results",
					"sInfoFiltered":"(filtered from _MAX_ total results)",
					"sSearch" : ""},
				"iDisplayLength": 25,
				"sPaginationType": "full_numbers",
				"aaSorting": []
			});
			resetFilters("album");
	}
	$(document).ready(function(){
			initThisPage();		
	});
	$(window).load(function(){
		initFancybox();
	});
	</script>
</%def>
