<div id="highlightedSlider" class="carousel slide" data-ride="carousel">
	<ol class="carousel-indicators">
		{% for post in posts %}
		<li data-target="#highlightedSlider" data-slide-to="{{ loop.index0 }}" {% if loop.index == 1 %} class="active"{% endif %}></li>
		{% endfor %}
	</ol>
	<div class="carousel-inner">
		
		{% for post in posts %}
		<div class="carousel-item{% if loop.index == 1 %} active{% endif %}">
			<div class="overlay"></div>
			<img src="{{post.thumbnail|resize(1100,800)}}" class="img-fluid" alt="{{post.title}}">
			<div class="carousel-caption text-left d-flex h-100 align-items-center">
				<div>
					<h3><a href="{{post.link}}">{{ post.title|truncate(17) }}</a></h3>
					<p class="text-uppercase meta">{{post.post_date|date('j F ')}} / {% for term in post.terms %}{% if loop.index != 1 %}&nbsp;&bull;&nbsp;{% endif %}<a href="{{term.link}}">{{term.name}}</a>{% endfor %}</p>
				</div>
			</div>
		</div>
		{% endfor %}
		
	</div>
	<a class="carousel-control-prev" href="#highlightedSlider" role="button" data-slide="prev">
	<i class="fa fa-angle-left fa-lg" aria-hidden="true"></i>
	<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#highlightedSlider" role="button" data-slide="next">
	<i class="fa fa-angle-right fa-lg" aria-hidden="true"></i>
	<span class="sr-only">Next</span>
	</a>
</div>
