{% set blog_image = page.media.images[page.header.hero_image]?: page.media.images | first %}
{% set collection = page.collection() %}
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_pagination = header_var('show_pagination', [page, blog]) | defined(true) %}

{% block stylesheets %}
    {% do assets.addCss('theme://css/bricklayer.css') %}
{% endblock %}

{% block javascripts %}
    {% do assets.add('theme://js/bricklayer.min.js') %}
    {% do assets.add('theme://js/scopedQuerySelectorShim.min.js') %}
{% endblock %}

<!-- blog ================================================== -->
<section class="section modular-blog {{ page.header.class}}">
    <section class="container grid-lg">

        <div class="modular-blog header">
            <h1>{{ page.title }}</h1>
            <p class="lead">{{ page.content|striptags }}</p>
        </div>

        <section class="modular-blog section listing">
            <section class="container {{ grid_size }}">
                {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
                    {% include 'partials/breadcrumbs.html.twig' %}
                {% endif %}

                {% embed 'partials/layout.html.twig' with {blog: page} %}
                    {% block item %}

                        <div class="bricklayer">
                        {% for child in collection %}
                            {% include 'partials/blog-list-item.html.twig' with {blog: page, page: child} %}
                        {% endfor %}
                        </div>

                        {% if show_pagination and config.plugins.pagination.enabled and collection.params.pagination %}
                            <div id="listing-footer">
                                {% include 'partials/pagination.html.twig' with {base_url: page.url, pagination: collection.params.pagination} %}
                            </div>
                        {% endif %}

                    {% endblock %}

                    {% block sidebar %}
                        {% include 'partials/sidebar.html.twig' %}
                    {% endblock %}
                {% endembed %}
            </section>
        </section>

        <div class="modular-blog footer">
            <a class="btn" href="/blog">View all</a>
        </div>
    </section>
    <script>
        //Bricklayer
        var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
    </script>
</section>