{% 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() %}

{% block stylesheets %}
    {% if particle.enabled %}
        {{ parent() }}
        <style type="text/css">
            .uk-accordion {display: block !important;}
        </style>
    {% endif %}
{% endblock %}

{% 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 %}

{% block particle %}
    <div class="g-accordion{% 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-accordion" data-uk-accordion="{collapse: {{ particle.collapse|default("true")|e }}, showfirst: {{ particle.showfirst|default("true")|e }}}">
            {% for article in articles %}
                <div class="g-accordion-item">
                    <h3 class="uk-accordion-title">
                        {{ display.title.limit ? article.title|truncate_text(display.title.limit) : article.title }}
                    </h3>
                    <div class="uk-accordion-content">
                        <div class="g-grid">
                            <div class="g-block">
                                {% 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' %}
                                        <div class="g-accordion-image">
                                            {% if particle.lightbox|default('disable') == 'enable' %}
                                                <a href="{{ url(article.images.image_intro, false, 0) }}" data-uk-lightbox class="uk-overlay uk-overlay-hover">
                                                <span class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></span>
                                            {% endif %}
                                                <img src="{{ url(article.images.image_intro) }}" {{ article.images.image_intro|imagesize|raw }} />
                                            {% if particle.lightbox|default('disable') == 'enable' %}
                                                </a>
                                            {% endif %}
                                        </div>
                                    {% elseif article.images.image_fulltext and display.image.enabled == 'full' %}
                                        <div class="g-accordion-image">
                                            {% if particle.lightbox|default('disable') == 'enable' %}
                                                <a href="{{ url(article.images.image_fulltext, false, 0) }}" data-uk-lightbox class="uk-overlay uk-overlay-hover">
                                                <span class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></span>
                                            {% endif %}
                                                <img src="{{ url(article.images.image_fulltext) }}" {{ article.images.image_fulltext|imagesize|raw }} />
                                            {% if particle.lightbox|default('disable') == 'enable' %}
                                                </a>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                {% endif %}
                                {% if display.text.type or display.read_more.enabled %}
                                    {% set article_text = display.text.type == 'intro' ? article.introtext : article.text %}
                                    <div class="g-accordion-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 display.read_more.enabled %}
                                            <span class="g-article-read-more">
                                                <a href="{{ article.route }}">
                                                    {{ display.read_more.label|default('Read More') }}
                                                </a>
                                            </span>
                                        {% endif %}
                                    </div>
                                {% endif %}
                                {% if display.date.enabled or display.author.enabled or display.category.enabled or display.hits.enabled %}
                                    <div class="g-article-details">
                                        {% 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>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}