--- a/app/views/Application/index.html	Thu Sep 13 01:02:58 2012 +0900
+++ b/app/views/Application/index.html	Thu Sep 13 01:40:32 2012 +0900
@@ -1,39 +1,71 @@
 #{extends 'main.html' /}
 #{set title:'Home' /}
 
-#{ifnot tasks}
-	<p>
-		No tasks 
-	</p>
-#{/ifnot}
-
-<ul>
-	#{list items:tasks, as:'task'}
-		<li>
-			<input type="checkbox" id="${task.id}" ${task.done ? 'checked':'' }>
-			${task.title}
-		</li>
-	#{/list}
-
-</ul>
+#{if frontPost}
+	<div class="post">
+		<h2 class="post-title">
+			<a href="#">${frontPost.title}</a>
+		</h2>
+		
+		<div clas="post-metadata">
+			<span class="post-author">by ${frontPost.author.fullname}</span>
+			<span class="post-data">by ${frontPost.postedAt.format('MMM dd')}</span>
+			<span class="post-comments">
+				&nbsp;|&nbsp;
+				${frontPost.comments.size() ?:'no'}
+				comment${frontPost.comments.size().pluralize()}
+				#{if frontPost.comments}
+					,latest by ${PfrontPost.comments[-1].author}
+					
+				#{/if}
+			</span>
+		</div>
+		<div class="post-content">
+			${frontPost.content.nl2br()}
+		</div>
+	</div>
 
-<p>
-	<a id="createTask" href="#">Create a new task</a>
-</p>
+	#{if olderPosts}
+		<div class="older-posts">
+			<h3>Older posts <span class="from">from this blog</span></h3>
+			
+			#{list items:olderPosts, as:'oldPost'}
+				<div class="post">
+					<h2 class="post-title">
+						<a href="#">${oldPost.title}</a>
+					</h2>
+					<div class="post-metadata">
+						<span class="post-author">
+							by ${oldPost.author.fullname}
+						</span>
+						<span class="post-date">
+							${oldPost.postedAt.format('dd MMM yy')}
+						</span>
+						<div class="post-comments">
+							${oldPost.comments.size() ?:'no'}
+							comment${oldPost.comments.size().pluralize()}
+							#{if oldPost.comments}
+								- latest by ${oldPost.comments[-1].author}
+							#{/if}
+						</div>
+					</div>
+				</div>
+			#{/list}
+		</div>
 
-<script type="text/javascript" charset="utf-8">
-	// Create a task
-	$('#createTask').click(function() {
-		$.post('@{createTask()}', {title: prompt('Task title ?')}, function(task){
-			$('ul').prepend(
-				'<li><input type="checkbox" id="'+task.id+'">'+task.title+'</li>'
-			)}, 'json')
-	})
+	#{/if}
+
+#{/if}
+
 
-	// change status
-	$('input').live('click', function() {
-		$.post('@{changeStatus()}', {id: $(this).attr('id'), done: $(this).val()})
-	})
-	
+#{else}
+	<div class="empty">
+		There is currently nothing to read here.
+	</div>
+#{/else}
 
-</script>
\ No newline at end of file
+
+
+
+
+