{% extends "base.twig" %}
{% macro yearlink(itemyear, year) %}
    {% if year == itemyear %}
	<span class="current"> {{ year }}</span>
    {% else %}
	<a href="/news/{{ itemyear }}"> {{ itemyear }}</a>
    {% endif %}
{% endmacro %}

{% block content %}
    <div class="m-content-hero">
	<div class="l-section l-section--after-slideshow">
	    <div class="m-section-text__wrapper {% if post.meta('hero').wide %} m-section-text__wrapper--wide {% endif %}">
		<div class="m-section-text__title m-section-text__title--after-slideshow">
		    {{ post.meta('hero').title }}
		</div>
		<div class="m-section-text__headline">
		    {{ post.meta('hero').headline}}
		</div>
		<div class="m-section-text__text m-section-text__text--black">
		    {{ post.meta('hero').text}}
		</div>
		
	    </div>
	</div>
    </div>
    {% from _self import yearlink %}
    <div class="m-news">
	<div class="m-news__filter">
	    Filter:
	    {% for itemyear in available_years | reverse %}
		{% if not loop.first %}
		    /
		{% endif %}
		{{ yearlink(itemyear, year) }}
	    {% endfor %}
	    
	</div>
	<div class="m-news__container">
	    {% for post in posts %}
		<div class="m-news__post">
		    <a href="{{ post.link }}" class="m-news__post-image">
			{% if post.thumbnail  %}
			    <img class="lazyload"
				 data-src="{{ TimberImage(post.thumbnail).src }}"
				 data-srcset="{{ TimberImage(post.thumbnail).srcset() }}"
				 data-sizes="auto" />
			{% endif %}
		    </a>
		    <div class="m-news__post-title-wrapper">
			<a href="{{ post.link }}" class="m-news__post-title"> {{ post.post_title }}</a>
		    </div>
		    <div class="m-news__post-date-wrapper">
			<div class="m-news__post-date"> {{ post.date('jS F Y') }} </div>
		    </div>
		    <div class="m-news__post-blurb"> {{ post.get_field('frontpage_blurb') }}</div>
		    <a href="{{ post.link }}" class="m-readmore"><span>MORE</span></a>
		</div>
	    {% endfor %}
	</div>
    </div>
	
    {% include 'partial/pagination.twig' with { pagination: posts.pagination({show_all: false, mid_size: 3, end_size: 2}) } %}
{% endblock %}