{% extends "base.html" %}

{% block header %}
		<table>
		<tr valign="top">
			<td><img src="{{ user.avatar(128) }}"></td>
			<td>
				<div>
				<h1>{% block title %}{{ user.username }} - Profile{% endblock %}</h1>
				{% if user.about_me %}
					<p><b>About me:</b> {{user.about_me}}</p>
				{% endif %}
				{% if user.created %}
					<p><b>Created:</b> {{user.created.strftime('%d-%m-%Y %H:%M')}}</p>
				{% endif %}
				{% if user.last_seen %}
					<p><b>Last seen on:</b> {{user.last_seen.strftime('%d-%m-%Y %H:%M')}}</p>
				{% endif %}
				{% if current_user.id == user.id %}
				<p><a href="{{ url_for('blog.edit_profile', username=user.username) }}">Edit Profile</a></p>
				{% endif %}
			</td>
		</tr>
	</table>
{% endblock %}

{% block content %}
	<head>
		<script type="text/javascript">
			function activateTab(pageId) {
					var tabCtrl = document.getElementById('tabCtrl');
					var pageToActivate = document.getElementById(pageId);
					for (var i = 0; i < tabCtrl.childNodes.length; i++) {
							var node = tabCtrl.childNodes[i];
							if (node.nodeType == 1) { /* Element */
									node.style.display = (node == pageToActivate) ? 'block' : 'none';
							}
					}
			}

		</script>
	</head>
	<body>
		<ul>
			<li><a href="javascript:activateTab('Posts')">Posts</a>
			<li><a href="javascript:activateTab('Comments')">Comments</a>
		</ul>
		<div id="tabCtrl">
			<div id="Posts" style="display: block">
				{% for post in posts %}
					{% include "blog/_post.html" %}	
					{% if not loop.last %}
						<hr>
					{% endif %}
				{% endfor %}
			</div>
			<div id="Comments" style="display: none">
				{% for comment in comments %}
					<article class="post">
						<header>
							<h1>
								Original Post: <a href="{{ url_for('blog.show_post', post_id=comment.original_post.id) }}">{{ comment.original_post.title }}</a>
							</h1>
						<header>
					</article>
					{% include "blog/_comment.html" %}	
					{% if not loop.last %}
						<hr>
					{% endif %}
				{% endfor %}
			</div>
		</div>
	</body>
{% endblock %}
