{% import '@SyliusUi/Macro/pagination.html.twig' as pagination %}
{% import 'SyliusUiBundle:Macro:messages.html.twig' as messages %}

{% extends '@SyliusShop/layout.html.twig' %}

{% block content %}
    {% block blog_breadcrumb %}
        <div class="ui breadcrumb">
            <a href="{{ path('sylius_shop_homepage') }}" class="section">{{ 'sylius.ui.home'|trans }}</a>
            <div class="divider"> / </div>
            <div class="active section">{{ 'odiseo_sylius_blog_plugin.ui.blog.header'|trans }}</div>
        </div>
    {% endblock %}

    {% block blog_header %}
        <h1 class="ui header">
            <i class="circular newspaper icon"></i>
            <div class="content">
                {{ 'odiseo_sylius_blog_plugin.ui.blog.header'|trans }}
                <div class="sub header">{{ 'odiseo_sylius_blog_plugin.ui.blog.subheader'|trans }}</div>
            </div>
        </h1>
    {% endblock %}

    {% block blog_articles %}
        <div class="ui grid">
            <div class="sixteen wide mobile twelve wide computer column">
                <div class="ui segment">
                    {% if resources|length > 0 %}
                        <div class="ui divided items">
                            {% for article in resources %}
                                <div class="item">
                                    {% if article.images|length > 0 %}
                                        <div class="image">
                                            <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_small')) }}" alt="{{ article.images[0].path }}">
                                        </div>
                                    {% endif %}
                                    <div class="content">
                                        <a class="header" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
                                            {{ article.title }}
                                        </a>
                                        <br>
                                        <div class="ui aligned grid">
                                            <div class="left aligned eight wide column">
                                                <span>{{ article.createdAt|date }}</span>
                                                {% if article.author %}
                                                    <span>by <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_index_by_author', {'username': article.author.username}) }}"><strong>{{ article.author.username }}</strong></a> </span>
                                                {% endif %}
                                            </div>
                                            <div class="right aligned eight wide column">
                                                {% if disqus_shortname() %}
                                                    <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}#disqus_thread" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
                                                        <div class="ui active inline mini loader"></div>
                                                    </a>
                                                {% else %}
                                                    <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}#blog-comments">
                                                        <i class="ui comment icon"></i> {{ article.enabledComments|length }} comments
                                                    </a>
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="description">
                                            <p>
                                                {% if article.content|striptags|length > 200 %}
                                                    {{ article.content|striptags|slice(0, 200)|raw }}...
                                                {% else %}
                                                    {{ article.content|striptags|raw }}
                                                {% endif %}
                                            </p>
                                        </div>
                                        {% if article.categories|length > 0 %}
                                            <div class="extra">
                                                {% for articleCategory in article.categories %}
                                                    <div class="ui label"><a href="{{ path('odiseo_sylius_blog_plugin_shop_article_index_by_category', {'slug': articleCategory.slug}) }}">{{ articleCategory.title }}</a></div>
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        {{ pagination.simple(resources) }}
                    {% else %}
                        {{ messages.info('sylius.ui.no_results_to_display') }}
                    {% endif %}
                </div>
            </div>
            <div class="sixteen wide mobile four wide computer column">
                {% include '@OdiseoSyliusBlogPlugin/Shop/_sidebar.html.twig' %}
            </div>
        </div>
    {% endblock %}

    {% if disqus_shortname() %}
        {% block blog_disqus %}
            {% include '@OdiseoSyliusBlogPlugin/Shop/Article/_disqus.html.twig' %}
        {% endblock %}
    {% endif %}
{% endblock %}