{# Load Content From WordPress #}
{% 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 %}
{% 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
} %}

{% set categories = filter.categories|replace({' ': ',', ', ': ','}) %}

{% if filter.posts %}
    {% set query_parameters = query_parameters|merge({'post__in': filter.posts|replace({' ': ',', ', ': ','})|split(',')}) %}
{% else %}
    {% set query_parameters = query_parameters|merge({'cat': categories}) %}
{% 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)) - 1) %}

<div id="{{ id }}" class="g-swiper swiper-container {{ particle.class|e }}" data-swiper-id="{{ id }}" {{ swiper_settings }} {{ swiper_slides }} {{ swiper_thumbs }} {{ swiper_breakpoints }} {% if gantry.page.direction == 'rtl' %}dir="rtl"{% endif %}>
    <div class="g-swiper-slider swiper-wrapper" style="height: {{ particle.height|default('70vh') }};">
        {% for post in posts %}
            {% if display.image.enabled and post.thumbnail.src %}
                {% set post_image = post.thumbnail.src %}
            {% endif %}

            <div class="swiper-slide">
                {% if particle.slides_linkable == "enabled" %}
                    <a href="{{ post.link|e }}" target="{{ display.link.target|default('_self') }}" class="swiper-link-overlay"></a>
                {% endif %}
                {% if display.image.enabled and post_image %}
                    {% if particle.image == "img" %}
                        <img src="{{ url(post_image)|e }}" />
                    {% else %} 
                        <div class="swiper-bg" style="background-image: url({{ url(post_image)|e }});"></div>
                    {% endif %}
                {% endif %}
                <div class="slide">
                    <div class="slide-content-wrapper">
                        <div class="slide-content">

                            {% if display.title.enabled and post.title %}
                                <div class="g-swiper-title">
                                    {{ (display.title.limit ? post.title|truncate_text(display.title.limit) : post.title)|raw }}
                                </div>
                            {% endif %}


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

                            {% if display.link.enabled %}
                                <a href="{{ post.link|e }}" target="{{ display.link.target|default('_self') }}" class="button">{{ display.link.label|default('Read More') }}</a>
                            {% endif %}

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

    {% if particle.nav == 'enabled' %}
        {% if gantry.page.direction == 'rtl' %}
            <div class="swiper-navigation rtl">
                <div class="swiper-button-next-{{ id|replace({'swiper-': ''}) }}">
                    <i class="fa fa-angle-left"></i>
                </div>
                <div class="swiper-button-prev-{{ id|replace({'swiper-': ''}) }}">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
        {% else %}
            <div class="swiper-navigation">
                <div class="swiper-button-next-{{ id|replace({'swiper-': ''}) }}">
                    <i class="fa fa-angle-right"></i>
                </div>
                <div class="swiper-button-prev-{{ id|replace({'swiper-': ''}) }}">
                    <i class="fa fa-angle-left"></i>
                </div>
            </div>
        {% endif %}
    {% endif %}
    {% if particle.pagination %}
        <!-- pagination -->
        <div class="swiper-pagination-parent-{{ id|replace({'swiper-': ''}) }}"></div>
    {% endif %}
</div>

{% if particle.thumbs == 'enabled' %}
    <div id="{{ id }}-thumbs" class="g-swiper-thumbs swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            {% for post in posts %}
                {% if display.image.enabled and post.thumbnail.src %}
                    {% set post_image = post.thumbnail.src %}
                {% endif %}
                <div class="swiper-slide" style="background-image: url({{ url(post_image)|e }});">
                    {% if display.title.enabled and post.title %}
                        <div class="g-swiper-thumbs-title">
                            <span>{{ display.title.limit ? post.title|truncate_text(display.title.limit)|raw : post.title|raw }}</span>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        {% if particle.thumbsnav == 'enabled' %}
            {% if gantry.page.direction == 'rtl' %}
                <div class="swiper-navigation rtl">
                    <div class="swiper-thumbs-button-next">
                        <i class="fa fa-angle-left"></i>
                    </div>
                    <div class="swiper-thumbs-button-prev">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </div>
            {% else %}
                <div class="swiper-navigation">
                    <div class="swiper-thumbs-button-next">
                        <i class="fa fa-angle-right"></i>
                    </div>
                    <div class="swiper-thumbs-button-prev">
                        <i class="fa fa-angle-left"></i>
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>
{% endif %}