<%inherit file="base.html" />
<%!
        from mylar import db
        import mylar
%>

<%def name="headerIncludes()">
	<div id="subhead_container">
			&nbsp;
	</div>	
	<a href="manage" class="back">&laquo; Back to manage overview</a>
</%def>


<%def name="body()">
	<div class="table_wrapper">
	<div id="manageheader" class="title">
		<h1 class="clearfix"><img src="interfaces/default/images/icon_manage.png" alt="manage"/>Manage comics</h1>
	</div>
	<form action="markArtists" method="get" id="markArtists">
	<div id="markalbum">
		<select name="action" onChange="doAjaxCall('markArtists',$(this),'table',true);" data-error="You didn't select any comics">
  			<option disabled="disabled" selected="selected">Choose...</option>
  			<option value="pause">Pause</option>
  			<option value="resume">Resume</option>
  			<option value="refresh">Refresh</option>
  			<option value="delete">Delete</option>
		</select>
		selected comics
		<input type="hidden" value="Go">
	</div>
	<table class="display" id="manage_comic">
		<thead>
			<tr>
				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
				<th id="albumart"></th>
				<th id="name">Comic Name</th>
				<th id="status">Status</th>
				<th id="latest">Latest Issue</th>
                                <th id="publisher">Publisher</th>
                                <th id="have">Have</th>
				<th id="lastupdated">Updated</th>
			</tr>
		</thead>
		<tbody>
		%for comic in comics:
			<%
                                totaltracks = comic['Total']
                                havetracks = comic['Have']
                                if not havetracks:
                                        havetracks = 0
                                try:
                                        percent = (havetracks*100.0)/totaltracks
                                        if percent > 100:
                                                percent = 100
                                except (ZeroDivisionError, TypeError):
                                        percent = 0
                                        totaltracks = '?'

				if comic['Status'] == 'Paused':
					grade = 'X'
				elif comic['Status'] == 'Loading':
					grade = 'C'
				else:
					grade = 'Z'
			%>
			<tr class="grade${grade}">
				<td id="select"><input type="checkbox" name="${comic['ComicID']}" class="checkbox" /></td>
				<td id="albumart"><div><img class="albumArt" src="${comic['ComicImage']}" height="75" width="50"></div></td>
				<td id="name"><span title="${comic['ComicSortName']}"></span><a href="artistPage?ComicID=${comic['ComicID']}">${comic['ComicName']} (${comic['ComicYear']})</a></td>
				<td id="status">${comic['Status']}</td>	
				<td id="latest">${comic['LatestIssue']} (${comic['LatestDate']})</td>
                                <td id="publisher">${comic['ComicPublisher']}</td>
                                <td id="have"><span title="${percent}"></span><div class="progress-container"><div style="width:${percent}%"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
				<td id="lastupdated">${comic['DateAdded']}</td>
			</tr>
		%endfor
		</tbody>
	</table>
	</form>
	</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 getArtistArt() {
		$("table#artist_table tr td#albumart #artistImg").each(function(){	
			var id = $(this).children('img').attr('id');
			var image = $(this).children('img');
			if ( !image.hasClass('done') ) {
				image.addClass('done');
				getThumb(image,id,'artist');
			}
		});
	}

	function initThisPage() {
		getArtistArt();
		$('#artist_table').dataTable({	
			"bDestroy":true,		
			"aoColumns": [
				null,
				null,
				{ "sType": "title-string"},
				null,
				{ "sType": "title-string"},
				null
			],
			"oLanguage": {
				"sSearch" : ""},
			"bStateSave": true,
			"bPaginate": false
		});
		resetFilters("comics");
	}
	$(document).ready(function() {
		initThisPage();
	});
	$(window).load(function(){
		initFancybox();
	});
	</script>
</%def>