{% embed 'partials/base.html.twig' %}

	{% set collection = page.collection() %}

	{% block content %}
		{% set blog_image = page.media.images|first.grayscale().contrast(20).brightness(-100).colorize(-35,81,122) %}

		{% if blog_image %}
		<div class="flush-top blog-header blog-header-image" style="background-image: url({{ blog_image.url }});">
		{% else %}
		<div class="blog-header">
		{% endif %}
			{{ page.content }}
		</div>

			{% if config.plugins.breadcrumbs.enabled %}
				{% include 'partials/breadcrumbs.html.twig' %}
			{% endif %}

		<div class="content-wrapper blog-content-list grid pure-g">
			<div id="listing" class="block pure-u-2-3">
				{% for child in collection %}
			        {% include 'partials/blog_item.html.twig' with {'blog':page, 'page':child, 'truncate':true} %}
			    {% endfor %}

                {% if config.plugins.pagination.enabled and collection.params.pagination %}
                    {% include 'partials/pagination.html.twig' with {'base_url':page.url, 'pagination':collection.params.pagination} %}
                {% endif %}
			</div>
			<div id="sidebar" class="block size-1-3 pure-u-1-3">
				{% include 'partials/sidebar.html.twig' with {'blog':page} %}
			</div>
		</div>
	{% endblock %}

{% endembed %}