{% extends 'layout.html.twig' %}

{% block content %}
    {{ include('Includes/content-default.html.twig') }}

    <hr />

    <div class="row blog">
        <div class="col-md-8 list">

            {% for article in articles %}
                {# @var article \Pimcore\Model\DataObject\BlogArticle #}

                <div class="media">
                    {% set detailLink = path('blog', {
                        id: article.getId(),
                        text: article.getTitle(),
                        prefix: document.getFullPath()
                    }) %}

                    <div class="media-body">
                        <h2 class="media-heading">
                            <a href="{{ detailLink }}">{{ article.getTitle() }}</a>
                        </h2>

                        {% include 'Blog/meta.html.twig' with { article: article } only %}

                        <hr />

                        {% if article.getPosterImage() %}
                            {{ article.getPosterImage().getThumbnail('content').getHTML()|raw }}
                            <br /><br />
                        {% endif %}

                        {{ article.getText()|raw }}
                    </div>
                </div>

            {% endfor %}

            <!-- pagination start -->
            {% include 'Includes/paging.html.twig' with { paginator: articles } only %}
            <!-- pagination end -->
        </div>

        <div class="col-md-4 filters">
            <div class="box">
                <h4>{{ 'Categories'|trans }}</h4>

                <ul class="nav nav-pills nav-stacked">
                    <li{% if selectedCategory is not defined %} class="active"{% endif %}>
                        <a href="{{ document }}">{{ 'All Categories'|trans }}</a>
                    </li>

                    {% for category in categories %}
                        <li{% if selectedCategory is defined and selectedCategory == category %} class="active"{% endif %}>
                            <a href="?category={{ category.getId() }}">
                                {{ category.getName() }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="box">
                <h4>{{ 'Archive'|trans }}</h4>

                <ul class="nav nav-pills nav-stacked">
                    <li{% if selectedArchive is not defined %} class="active"{% endif %}>
                        <a href="{{ document }}">{{ 'All Dates'|trans }}</a>
                    </li>

                    {% for range in archiveRanges %}
                        <li{% if selectedArchive is defined and selectedArchive == range %} class="active"{% endif %}>
                            <a href="?archive={{ range }}">
                                {# always use the 20th #}
                                {{ date(range ~ '-20')|date('F Y') }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}