{% extends "index.html" %}

{% block content %}
<div class="layout-wrapper layout-wrapper-background">
	<div class="web-content" id="content-blog">
		<div class="layout-main-section">
			<h1>Blog</h1>
			<br>
			<div id="blog-list">
				<!-- blog list will be generated dynamically -->
			</div>
		</div>
		<div class="layout-side-section">
			<!-- for later
			<h4>Get Updates</h4>
			<p>
			<input name="blog-subscribe">
			<button class="btn" id="blog-subscribe">Subscribe</button>
			</p>-->
			<h4>Subscribe</h4>
			<p>
			<img src="images/feed.png" style="margin-right: 4px; margin-bottom: -4px">
			<a href="rss.xml" target="_blank">RSS Feed</a>
			</p>
		</div>
		<div style="clear: both"></div>
	</div>
</div>

<script>
wrapper.blog_list = new wn.ui.Listing({
	parent: $(wrapper).find('#blog-list').get(0),
	query: 'select tabBlog.name, title, left(content, 1000) as content, tabBlog.creation, \
		ifnull(first_name, "") as first_name, ifnull(last_name, "") as last_name \
		from tabProfile, tabBlog\
	 	where ifnull(published,0)=1 and tabBlog.owner = tabProfile.name \
		order by tabBlog.creation desc',
	hide_refresh: true,
	no_toolbar: true,
	render_row: function(parent, data) {
		if(data.content && data.content.length==1000) data.content += '... (read on)';
		data.content = wn.markdown(data.content);
		if(data.last_name) data.last_name = ' ' + data.last_name;
		data.date = prettyDate(data.creation);
		parent.innerHTML = repl('<h2>%(title)s</h2>\
			<p><div class="help">By %(first_name)s%(last_name)s, %(date)s</div></p>\
			<p>%(content)s</p>\
			<a href="%(name)s.html">Read Full Text</a><br>', data);
	},
	page_length: 10
});
wrapper.blog_list.run();
</script>