<!DOCTYPE html>
<%! import markdown %>
<html>
	<head>
		<title>${tracklist.title}</title>
		<link rel="alternate" type="application/xspf+xml" href="index.xspf" />
		<link rel="alternate" type="application/rss+xml" title="RSS" href="index.rss" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="stylesheet" type="text/css" href="local.css" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="moxie.js"></script>
		<script type="text/javascript">
			$(function () {
				swfobject.embedSWF("MusicPlayer.swf", "player", "0", "0", "8.0.0", "expressInstall.swf", {playlist: "index.xspf"}, {}, {});
			});
		</script>
	</head>
	<body>
		<div id="header">
			<h1>${tracklist.title}</h1>
			${markdown.markdown(tracklist.subtitle)}
		</div>

		<noscript>
			<div>
				Javascript + Flash = <a href="http://www.nbc.com/Saturday_Night_Live/video/clips/chronicles-of-narnia-lazy-sunday/2921/">Crazy Delicious</a>!
			</div>
		</noscript>

		<ul class="songs">
		% for count, (fn, info) in enumerate(sorted(tracklist.items())):
			<li class="song" id="${count}">
				<span class="time">
					<span class="position"></span>
					<span class="duration">${info.duration | h}</span>
				</span>
				<span class="title">
					${info.artist | h} - ${info.title | h}
				</span>
			</li>
		% endfor
		</ul>

		<div id="player" />
	</body>
</html>
