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

{% set attr_extra = '' %}
{% if particle.extra %}
    {% for attributes in particle.extra %}
        {% for key, value in attributes %}
            {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
        {% endfor %}
    {% endfor %}
{% endif %}

{% set article_settings = particle.article %}
{% set filter = article_settings.filter %}
{% set sort = article_settings.sort %}
{% set limit = article_settings.limit %}
{% set display = article_settings.display %}

{# Category Finder #}
{% set category_options = filter.categories ? {id: [filter.categories|split(','), 0]} : {} %}
{% set categories = joomla.finder('category', category_options).published(1).language().limit(0).find() %}

{# Content Finder #}
{% if filter.articles %}
    {% set article_options = filter.articles ? {id: [filter.articles|replace(' ', '')|split(',')]} : {} %}
    {% set article_finder = joomla.finder('content', article_options).published(1).language() %}
{% else %}
    {% set article_finder = joomla.finder('content').category(categories).published(1).language() %}
{% endif %}

{% set featured = filter.featured|default('include') %}
{% if featured == 'exclude' %}
    {% do article_finder.featured(false) %}
{% elseif featured == 'only' %}
    {% do article_finder.featured(true) %}
{% endif %}

{% set articles = article_finder.order(sort.orderby, sort.ordering).limit(limit.total).start(limit.start).find() %}

{% set particleheading %}
    <div class="g-particle-intro">
        {% if particle.mainheading %}
            <h3 class="g-title g-main-title">{{ particle.mainheading|raw }}</h3>
            <div class="g-title-separator {% if particle.introtext == false %}no-intro-text{% endif %}"></div>
        {% endif %} 
        {% if particle.introtext %}<p class="g-introtext">{{ particle.introtext|raw }}</p>{% endif %}
    </div>
{% endset %}

{%- set slideshow_settings -%}
    {
        autoplay:{{ particle.autoplay|default("true")|e }},
        autoplayInterval:{{ particle.autoplayInterval|default(7000)|e }},
        kenburns:{{ particle.kenburns|default("false")|e }},
        animation:'{{ particle.animation|default('fade')|e }}',
        duration:{{ particle.animationDuration|default(500)|e }},
        pauseOnHover:{{ particle.pauseOnHover|default("true")|e }},
        height:'{{ particle.height|default('auto')|e }}'
    }
{%- endset -%}

{% set slideshow_slides %}
    {% for article in articles %}

        {% set slide_media %}
            {% if display.image.enabled and article.images.image_intro or article.images.image_fulltext %}
                {% if article.images.image_intro and display.image.enabled == 'intro' or display.image.enabled == 'show' %}
                    <img src="{{ url(article.images.image_intro) }}" {{ article.images.image_intro|imagesize|raw }} alt="{{ display.title.limit ? article.title|truncate_text(display.title.limit) : article.title }}" />
                {% elseif article.images.image_fulltext and display.image.enabled == 'full' %}
                    <img src="{{ url(article.images.image_fulltext) }}" {{ article.images.image_fulltext|imagesize|raw }} alt="{{ display.title.limit ? article.title|truncate_text(display.title.limit) : article.title }}" />
                {% endif %}
            {% endif %}
        {% endset %} 

        {% set slide_overlay %}

            {% set overlay_position %}
                {%- if particle.overlayposition|default('bottom') == 'bottom' -%}
                    uk-overlay-bottom
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'left' -%}
                    uk-overlay-left
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'right' -%}
                    uk-overlay-right
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'top' -%}
                    uk-overlay-top
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'bottom-left' -%}
                    uk-flex-bottom
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'bottom-center' -%}
                    uk-flex-bottom uk-flex-center
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'bottom-right' -%}
                    uk-flex-bottom uk-flex-right
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'middle-left' -%}
                    uk-flex-middle
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'middle-center' -%}
                    uk-flex-middle uk-flex-center
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'middle-right' -%}
                    uk-flex-middle uk-flex-right
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'top-left' -%}
                    uk-flex-top
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'top-center' -%}
                    uk-flex-top uk-flex-center
                {%- endif -%}

                {%- if particle.overlayposition|default('bottom') == 'top-right' -%}
                    uk-flex-top uk-flex-right
                {%- endif -%}
            {%- endset -%}

            {%- set slide_overlay_animation -%}
                {%- if particle.overlayanimation|default('fade') == 'fade' -%}
                    uk-overlay-fade
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'slide-left' -%}
                    uk-overlay-slide-left
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'slide-right' -%}
                    uk-overlay-slide-right
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'slide-top' -%}
                    uk-overlay-slide-top
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'slide-bottom' -%}
                    uk-overlay-slide-bottom
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'slide-left-short' -%}
                    uk-overlay-slide-left uk-overlay-left-short
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'slide-right-short' -%}
                    uk-overlay-slide-right uk-overlay-right-short
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'slide-top-short' -%}
                    uk-overlay-slide-top uk-overlay-top-short
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'slide-bottom-short' -%}
                    uk-overlay-slide-bottom uk-overlay-bottom-short
                {%- endif -%}

                {%- if particle.overlayanimation|default('fade') == 'scale' -%}
                    uk-overlay-scale
                {%- endif -%}
            {%- endset -%}

            {% set articletitle %}
                <h3 class="g-slideshow-title">
                    {%- if display.title.enabled|default('show') == 'show' -%}
                        <a href="{{ article.route }}">
                            {{- display.title.limit ? article.title|truncate_text(display.title.limit) : article.title -}}
                        </a>
                    {%- else -%}
                        {{- display.title.limit ? article.title|truncate_text(display.title.limit) : article.title -}}
                    {%- endif -%}
                </h3>
            {% endset %}

            {% set articledetails %}
                <div class="g-article-details details-{{ particle.articledetails }}">
                    {% if display.date.enabled %}
                        <span class="g-article-date">
                            {%- if display.date.enabled == 'published' -%}
                                <i class="fa fa-clock-o"></i>{{- article.publish_up|date(display.date.format) -}}
                            {%- elseif display.date.enabled == 'modified' -%}
                                <i class="fa fa-clock-o"></i>{{- article.modified|date(display.date.format) -}}
                            {%- else -%}
                                <i class="fa fa-clock-o"></i>{{- article.created|date(display.date.format) -}}
                            {%- endif -%}
                        </span>
                    {% endif %}

                    {% if display.author.enabled %}
                        <span class="g-article-author">
                            {%- if display.author.enabled|default('show') == 'show' -%}
                                <i class="fa fa-user"></i>{{- article.author.name -}}
                            {%- else -%}
                                {% if article.created_by_alias %}
                                    <i class="fa fa-user"></i>{{- article.created_by_alias -}}
                                {%- else -%}
                                    <i class="fa fa-user"></i>{{- article.author.name -}}
                                {%- endif -%}
                            {%- endif -%}
                        </span>
                    {% endif %}

                    {% if display.category.enabled %}
                        {% set category_link = display.category.enabled == 'link' %}
                        <span class="g-article-category">
                            {% set cat = article.categories|last %}
                            {% if category_link %}
                                <a href="{{ cat.route }}">
                                    <i class="fa fa-folder-open"></i>{{- cat.title -}}
                                </a>
                            {% else %}
                                <i class="fa fa-folder-open"></i>{{- cat.title -}}
                            {% endif %}
                        </span>
                    {% endif %}

                    {% if display.hits.enabled %}
                        <span class="g-article-hits">
                            <i class="fa fa-eye"></i>{{- article.hits -}}
                        </span>
                    {% endif %}
                </div>
            {% endset %}

            {% set readmorebutton %}
                <div class="g-article-read-more">
                    <a href="{{ article.route }}">
                        <button class="button">{{ display.read_more.label|default('Read More...') }}</button>
                    </a>
                </div>
            {% endset %}

            {% set articletext %}
                {% set article_text = display.text.type == 'intro' ? article.introtext : article.text %}
                <div class="g-slideshow-desc">
                    {%- if display.text.formatting == 'text' -%}
                        {{- article_text|truncate_text(display.text.limit)|raw -}}
                    {%- else -%}
                        {{- gantry.platform.filter(article_text)|truncate_html(display.text.limit)|html|raw -}}
                    {%- endif -%}

                    {%- if particle.overlaystyle|default('style1') == 'style2' and display.read_more.enabled -%}
                        {{ readmorebutton }}
                    {%- endif -%}
                </div>
            {% endset %}

            {% if particle.overlaystyle|default('style1') == 'style1' or particle.overlaystyle|default('style1') == 'style3' %}

                {% if (particle.overlayposition|default('bottom') == 'bottom') or (particle.overlayposition|default('bottom') == 'top') or (particle.overlayposition|default('bottom') == 'left') or (particle.overlayposition|default('bottom') == 'right') %}
                     <div class="uk-overlay-panel{% if particle.overlaystyle|default('style1') == 'style1' %} uk-overlay-background{% endif %} {{ overlay_position }} {{ slide_overlay_animation }} {% if particle.overlaywidth|default(auto)|e != 'auto' %} uk-width-1-{{ particle.overlaywidth|default(auto)|e }}{% endif %} {{ particle.overlaystyle|default("style1")|e }}">
                        <div class="slideshow-caption">
                            {% if display.title.enabled %}
                                {{ articletitle }}
                            {% endif %}

                            {% if particle.articledetails|default('show') == 'show' %}
                                {{ articledetails }}
                            {% endif %}

                            {% if display.text.type %}
                                {{ articletext }}
                            {% endif %}

                            {% if particle.articledetails|default('show') == 'showbottom' %}
                                {{ articledetails }}
                            {% endif %}

                            {% if display.read_more.enabled %}
                                {{ readmorebutton }}
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <div class="uk-overlay-panel uk-flex {{ overlay_position }} {{ slide_overlay_animation }}{% if particle.overlaycontainer|default(0) == 1 %} g-overlay-container{% endif %} {{ particle.overlaystyle|default("style1")|e }}">
                        <div class="slideshow-caption{% if particle.overlaystyle|default('style1') == 'style1' %} uk-overlay-background{% endif %} {% if particle.overlaywidth|default(auto)|e != 'auto' %} uk-width-1-{{ particle.overlaywidth|default(auto)|e }}{% endif %}">
                            {% if display.title.enabled %}
                                {{ articletitle }}
                            {% endif %}

                            {% if particle.articledetails|default('show') == 'show' %}
                                {{ articledetails }}
                            {% endif %}

                            {% if display.text.type %}
                                {{ articletext }}
                            {% endif %}

                            {% if particle.articledetails|default('show') == 'showbottom' %}
                                {{ articledetails }}
                            {% endif %}

                            {% if display.read_more.enabled %}
                                {{ readmorebutton }}
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

            {% endif %}

            {% if particle.overlaystyle|default('style1') == 'style2' %}
                
                {% if (particle.overlayposition|default('bottom') == 'bottom') or (particle.overlayposition|default('bottom') == 'top') or (particle.overlayposition|default('bottom') == 'left') or (particle.overlayposition|default('bottom') == 'right') %}
                     <div class="uk-overlay-panel {{ overlay_position }} {{ slide_overlay_animation }} {% if particle.overlaywidth|default(auto)|e != 'auto' %} uk-width-1-{{ particle.overlaywidth|default(auto)|e }}{% endif %} {{ particle.overlaystyle|default("style1")|e }}">
                        <div class="slideshow-caption">
                            {% if display.title.enabled %}
                                {{ articletitle }}
                            {% endif %}

                            {% if display.text.type or display.read_more.enabled %}
                                {{ articletext }}
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <div class="uk-overlay-panel uk-flex {{ overlay_position }} {{ slide_overlay_animation }}{% if particle.overlaycontainer|default(0) == 1 %} g-overlay-container{% endif %} {{ particle.overlaystyle|default("style1")|e }}">
                        <div class="slideshow-caption {% if particle.overlaywidth|default(auto)|e != 'auto' %} uk-width-1-{{ particle.overlaywidth|default(auto)|e }}{% endif %}">
                            {% if display.title.enabled %}
                                {{ articletitle }}
                            {% endif %}
                            {% if display.text.type or display.read_more.enabled %}
                                {{ articletext }}
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

            {% endif %}

        {% endset %}

        <li class="g-slideshow-item">
            {{ slide_media }}
            {% if display.title.enabled or particle.articledetails|default('show') == 'show' or display.text.type or display.read_more.enabled %}
                {{ slide_overlay }}
            {% endif %}
        </li>

    {% endfor %}
{% endset %}

{% block particle %}
    
    <div class="g-slideshow{% if particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>
        {% if particle.mainheading or particle.introtext %}
            {{ particleheading }}
        {% endif %}
        <div class="uk-slidenav-position{% if particle.fullscreen|default(0) %} fullscreen{% endif %}{% if particle.navigation|default('arrows') == 'arrowsvisible' or particle.navigation|default('arrows') == 'bothvisible' %} nav-visible{% endif %}" data-uk-slideshow="{{ slideshow_settings }}">
            <ul class="uk-slideshow uk-overlay-active{% if particle.fullscreen|default(0) %} uk-slideshow-fullscreen{% endif %}">
                {{ slideshow_slides }}
            </ul>

            {% if (particle.navigation|default('arrows') == 'arrows') or (particle.navigation|default('arrows') == 'arrowsvisible') or (particle.navigation|default('arrows') == 'both') or (particle.navigation|default('arrows') == 'bothvisible') %}
                <a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideshow-item="previous" aria-label="{{'Previous'|trans_key('IT_ACCESS_PREVIOUS')}}"></a>
                <a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideshow-item="next" aria-label="{{'Next'|trans_key('IT_ACCESS_NEXT')}}"></a>
            {% endif %}

            {% if (particle.navigation|default('arrows') == 'dots') or (particle.navigation|default('arrows') == 'both') or (particle.navigation|default('arrows') == 'bothvisible') %}
                <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                {% set counter = 0 %}
                {% for article in articles %}
                    <li data-uk-slideshow-item="{{ counter }}"><a href="" aria-label="{{'Item'|trans_key('IT_ACCESS_ITEM')}} {{ counter }}"></a></li>
                    {% set counter = counter + 1 %}
                {% endfor %}
                </ul>
            {% endif %}
        </div>
    </div>
{% endblock %}