<div class="h2" style="padding-top:0">
		Reading Recently...
		   
		<a href="" onclick="showUserBookRelation('2'); return false;">See All (${readingTotal })</a>
	</div>

{for book in readingList}
		<a class="book-detail" title="${book.name }" href="${book.link }" target="_blank"><img alt="${book.name }" class="book" src="${getImageByWidth(book, imageWidth)}" /></a>
	{forelse}
		<div class="hint">No books added. <a href="" onclick="gotoCanvas(); return false;">Search books</a> and click the red button "I'm reading", the book will been there.</div>
	{/for}

<div class="h2">
		Want To Read...
		   
		<a href="" onclick="showUserBookRelation('3'); return false;">See All (${wishReadTotal })</a>
	</div>
	{for book in wishReadList}
		<a class="book-detail" title="${book.name }" href="${book.link }" target="_blank"><img alt="${book.name }" class="book" src="${getImageByWidth(book, imageWidth)}" /></a>
	{forelse}
		<div class="hint">No books added.</div>
	{/for}

<div class="h2">
		Already Read...
		   
		<a href="" onclick="showUserBookRelation('1'); return false;">See All (${alreadyReadTotal })</a>
	</div>
	{for book in alreadyReadList}
		<a class="book-detail" title="${book.name }" href="${book.link }" target="_blank"><img alt="${book.name }" class="book" src="${getImageByWidth(book, imageWidth)}" /></a>
	{forelse}
		<div class="hint">No books added.</div>
	{/for}