{% extends "base.html" %}

{%block title %}
<title>{{ config.title }}</title>
{% endblock title %}

{%block seo %}
{% endblock seo%}

{%block header %}
<div class="page-heading">
	<h1>{{ config.title }}</h1>
</div>
{% endblock header%}

{% block main %}
<div class="posts-list">
	{% if paginator %}
	{% for page in paginator.pages %}
	<article class="post-preview">
		<div class="thumb">
			<picture>
				{% if page.extra.image_avif %}
				<source srcset="{{ get_url(path=page.extra.image_avif) }}" type="image/avif">
				{% endif %}
				{% if page.extra.image_webp %}
				<source srcset="{{ get_url(path=page.extra.image_webp) }}" type="image/webp">
				{% endif %}
				<source srcset="{{ get_url(path=page.extra.image) }}" type="image/{% if page.extra.image is matching("\\.jpe?g") %}jpeg{% else %}png{% endif %}">
				<img src="{{ get_url(path=page.extra.image) }}" alt="{{ page.extra.alt }}">
			</picture>
		</div>
		<div class="post-preview-header-container">
			<div class="post-preview-header">
				<a href="{{ page.permalink }}">
					<h2 class="post-title">
						{% if page.taxonomies.t %}
						<div class="post-subtitle">
							{{ page.taxonomies.t[0] }}
						</div>
					{% endif %}
						{{ page.title }}
					</h2>
				</a>
				<span class="post-meta">
					<span class="fa fa-calendar"></span>&nbsp;{{ trans(key="postedOnDate",lang=lang)}} {{ page.date | date(format=trans(key="dateFormat",lang=lang),locale=trans(key="locale",lang=lang)) }}
					{% if page.updated %}
						&nbsp;({{ trans(key="lastModified",lang=lang) }} {{ page.updated | date(format=trans(key="dateFormat",lang=lang),locale=trans(key="locale",lang=lang)) }})
					{% endif %}
					{% if page.translations -%}
						{% for translation in page.translations %}
							{% if translation.lang != lang %}
								&bullet;&nbsp;
								<a href="{{ translation.permalink }}">{{ translation.lang }}</a>
							{% endif %}
						{% endfor %}
					{%- endif %}
				</span>
			</div>
		</div>
	</article>
	{% endfor %}
	{% endif %}
</div>

{% if paginator.previous or paginator.next %}
<div class="wrapper">
	<nav class="pagination" role="navigation" aria-label="navigation">
		{% if paginator.next %}
		<a class="pagination-previous" href="{{ paginator.next }}"> &larr;{{ trans(key="olderPosts",lang=lang) }}</a>
		{% else %}
		<a class="pagination-previous" disabled> &larr;{{ trans(key="olderPosts",lang=lang) }}</a>
		{% endif %}
		{% if paginator.previous %}
		<a class="pagination-next" href="{{ paginator.previous }}">{{ trans(key="newerPosts",lang=lang) }} &rarr;</a>
		{% else %}
		<a class="pagination-next" disabled>{{ trans(key="newerPosts",lang=lang) }} &rarr;</a>
		{% endif %}
	</nav>
</div>
{% endif %}
{% endblock main %}