{% extends '@nucleus/partials/particle.html.twig' %}

{% set attr_extra = particle.extra|attribute_array %}
{% set post_settings = particle.post %}
{% set filter = post_settings.filter %}
{% set sort = post_settings.sort %}
{% set limit = post_settings.limit %}
{% set start = limit.start + max(0, ajax.start|int) %}
{% set display = post_settings.display %}

{# Sticky Posts #}
{% set sticky_posts = filter.sticky ? false : true %}

{# Query Posts #}
{% set query_parameters = {
    'posts_per_page': limit.total|default('-1'),
    'offset': start,
    'orderby': sort.orderby,
    'order': sort.ordering,
    'ignore_sticky_posts': sticky_posts
} %}

{% if filter.posts %}
    {% set query_parameters = query_parameters|merge({'post__in': filter.posts|replace({' ': ',', ', ': ','})|split(',')}) %}
{% else %}
    {% set query_parameters = query_parameters|merge({'cat': filter.categories|replace({' ': ',', ', ': ','})}) %}
{% endif %}

{% set posts = wordpress.query_posts(query_parameters) %}
{% set total = posts.get_pagination([]).total|abs %}
{% set total = max(posts|length, (total * max(0, limit.total))) %}

{% block particle %}

    {# All Posts #}
    <div class="g-content-array g-wordpress-posts{% if particle.css.class %} {{ particle.css.class }}{% endif %}" {{- attr_extra|raw }}>

        {% for column in posts|batch(limit.columns) %}
            <div class="g-grid">
                {% for post in column %}

                    <div class="g-block">
                        <div class="g-content">
                            <div class="g-array-item">
                                {% if display.image.enabled and post.thumbnail.src %}
                                    <div class="g-array-item-image">
                                        <a href="{{ post.link|raw }}">
                                            <img src="{{ url(post.thumbnail.src) }}" />
                                        </a>
                                    </div>
                                {% endif %}

                                {% if display.title.enabled %}
                                    <div class="g-array-item-title">
                                        <h3 class="g-item-title">
                                            <a href="{{ post.link|raw }}">
                                                {{ display.title.limit ? post.title|truncate_text(display.title.limit)|raw : post.title|raw }}
                                            </a>
                                        </h3>
                                    </div>
                                {% endif %}

                                {% if display.date.enabled or display.author.enabled or display.category.enabled or display.comments.enabled %}
                                    <div class="g-array-item-details">
                                        {% if display.date.enabled %}
                                            <span class="g-array-item-date">
                                                {% if display.date.enabled == 'modified' %}
                                                    <i class="far fa-clock" aria-hidden="true"></i>{{ post.post_modified|date(display.date.format) }}
                                                {% else %}
                                                    <i class="far fa-clock" aria-hidden="true"></i>{{ post.post_date|date(display.date.format) }}
                                                {% endif %}
                                            </span>
                                        {% endif %}

                                        {% if display.author.enabled %}
                                            <span class="g-array-item-author">
                                                <i class="fa fa-user" aria-hidden="true"></i>{{ post.author.name|raw }}
                                            </span>
                                        {% endif %}

                                        {% if display.category.enabled %}
                                            {% set category_link = display.category.enabled == 'link' %}
                                            {%- set post_categories -%}
                                                {% for category in post.categories %}
                                                    {%- if category_link -%}
                                                        <a href="{{ category.link }}">
                                                            {{ category.title|raw }}
                                                        </a>
                                                    {%- else -%}
                                                        {{ category.title|raw }}
                                                    {%- endif -%}
                                                    {% if not loop.last %}{{ ','|trim }}{% endif %}
                                                {% endfor %}
                                            {%- endset -%}

                                            <span class="g-array-item-category">
                                                <i class="fa fa-folder-open" aria-hidden="true"></i>{{ post_categories|raw }}
                                            </span>
                                        {% endif %}

                                        {% if display.comments.enabled %}
                                            {%- set comment_count -%}
                                                {%- if post.comment_count == '0' -%}
                                                    {{ __('No comments', 'gantry5') }}
                                                {%- elseif post.comment_count == '1' -%}
                                                    {{ post.comment_count ~ ' ' ~ __('Comment', 'gantry5') }}
                                                {%- else -%}
                                                    {{ post.comment_count ~ ' ' ~ __('Comments', 'gantry5') }}
                                                {%- endif -%}
                                            {%- endset -%}

                                            <span class="g-array-item-comments">
                                                <i class="fa fa-comments" aria-hidden="true"></i>{{ comment_count }}
                                            </span>
                                        {% endif %}
                                    </div>
                                {% endif %}

                                {% if display.text.type %}
                                    {% set post_text = display.text.type == 'excerpt' ? post.post_excerpt : post.content %}
                                    <div class="g-array-item-text">
                                        {% if display.text.formatting == 'text' %}
                                            {{ post_text|truncate_text(display.text.limit)|raw }}
                                        {% else %}
                                            {{ post_text|truncate_html(display.text.limit)|raw }}
                                        {% endif %}
                                    </div>
                                {% endif %}

                                {% if display.read_more.enabled %}
                                    <div class="g-array-item-read-more">
                                        <a href="{{ post.link|raw }}" class="button{% if display.read_more.css %} {{ display.read_more.css }}{% endif %}">
                                            {{ display.read_more.label|default('Read More...') }}
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                {% endfor %}
            </div>
        {% endfor %}

        {% if total > limit.total and display.pagination_buttons %}
            <div class="g-content-array-pagination">
                <button class="button float-left contentarray-button pagination-button pagination-button-prev" data-id="{{ id }}" data-start="{{ max(0, start - limit.total|int|default(2)) }}"{{ start - limit.total|int|default(2) < 0 ? ' disabled' }}>{{ 'GANTRY5_ENGINE_PREV'|trans }}</button>
                <button class="button float-right contentarray-button pagination-button pagination-button-next" data-id="{{ id }}" data-start="{{ start + limit.total|int|default(2) }}"{{ start + limit.total|int|default(2) >= total ? ' disabled' }}>{{ 'GANTRY5_ENGINE_NEXT'|trans }}</button>
                <div class="clearfix"></div>
            </div>
        {% endif %}
    </div>

{% endblock %}

{% block javascript_footer %}
    {% if total > limit.total and display.pagination_buttons %}
        {% do gantry.load('jquery') %}
        <script>
            (function ($) {
                $(document).on('click', 'button.contentarray-button', function () {
                    var id = $(this).attr('data-id'),
                        start = $(this).attr('data-start'),
                        request = {
                            'action' : 'particle',
                            'outline' : {{ gantry.page.outline|json_encode|raw }},
                            'id'     : id,
                            'start'  : start,
                            'format' : 'json'
                        };
                    $.ajax({{ wordpress.call('admin_url', 'admin-ajax.php')|json_encode|raw }}, {
                        type        : 'GET',
                        data        : request,
                        indexValue  : id + '-particle',
                        success: function (response) {
                            if(response.html){
                                $('#' + this.indexValue).html(response.html);
                            } else {
                                // TODO: Improve error handling -- instead of replacing particle content, display flash message or something...
                                $('#' + this.indexValue).html(response.message);
                            }
                        },
                        error: function(response) {
                            // TODO: Improve error handling -- instead of replacing particle content, display flash message or something...
                            $('#' + this.indexValue).html('AJAX FAILED ON ERROR');
                        }
                    });
                    return false;
                });
            })(jQuery)
        </script>
    {% endif %}
{% endblock %}