{% extends "base.html" %}
{% block content %}
{% if articles %}
	<section id="content">
	{% for article in articles_page.object_list %}
		{% if loop.index <= 3 %}
			<div class="featured">
				<article>
					<h1 class="entry-title p-name">
						<a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
					</h1>
					<div class="entry-subtitle">
						A 
						<span class="entry-category">
							<em>{{ article.category }}</em>
						</span> 
						about 
						<span class="entry-tags">
							{% for tag in article.tags %}
								<span itemprop="keywords">
									<a href="/{{ tag.url }}" rel="tag">{{ tag }}</a>
								</span> 
							{% endfor %}
						</span> 
						published on 
						<span class="entry-date dt-published">{{ article.date | strftime('%d %B %Y') }}</span>
					</div>
					<div class="entry-content e-content">{{ article.content }}</div>
				</article>
			</div>
			{% if loop.index < 3 %}
				{% if loop.last %}
					</section>
				{% endif %}
			{% endif %}
			{% if loop.index == 3 %}
				</section>
				<section id="list">
					<h1>Other articles</h1>
					<hr />
					<ul id="posts-list">
			{% endif %}
		{# other items #}
		{% else %}
			{% if loop.first %}
				</section>
				<section id="list">
					<ol id="posts-list" class="hfeed" start="{{ articles_paginator.per_page -1 }}">
			{% endif %}
			<li>
				<article class="hentry">
					<header>
						<h1 class="p-name">
							<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
						</h1>
						<div class="entry-subtitle">
							A 
							<span class="entry-category">
								<em>{{ article.category }}</em>
							</span> 
							about 
							<span class="entry-tags">
								{% for tag in article.tags %}
									<span itemprop="keywords">
										<a href="/{{ tag.url }}" rel="tag">{{ tag }}</a>
									</span> 
								{% endfor %}
							</span> 
							published on 
							<span class="entry-date dt-published">{{ article.date }}</span>
						</div>
					</header>

					<div class="entry-content">
						<p class="p-summary">{{ article.summary }}</p>
						<span class="entry-readmore"><a class="readmore" href="{{ SITEURL }}/{{ article.url }}"> read more</a></span>
					</div>
				</article>
			</li>
		{% endif %}
	{% endfor %}
{% endif %}
{% endblock content %}