{% 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 attr_extra_left = '' %}
{% if particle.extra_left %}
    {% for attributes in particle.extra_left %}
        {% for key, value in attributes %}
            {% set attr_extra_left = attr_extra_left ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
        {% endfor %}
    {% endfor %}
{% endif %}

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

{% set textcontent %}
    {% if particle.title %}
        <h3 class="g-gallery-feature-title">
            {{- particle.title|raw -}}
        </h3>
    {% endif %}

    {% if particle.description %}
        <p class="g-gallery-feature-desc">
            {{- particle.description|raw -}}
        </p>
    {% endif %}

    {% if particle.link %}
        <a class="button g-gallery-feature-link" href="{{ particle.link|e }}" target="{{ particle.target|default('_blank')|e }}">
            {%- if particle.buttonicon -%}
                <i class="{{ particle.buttonicon|e }}"></i>
            {%- endif -%}
            {{- particle.buttontext|raw -}}
        </a>
    {% endif %}
{% endset %}

{% set galleryid = random() %}

{% set gallerycontent %}
    <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-{{ particle.columns|default('3')|e }}" data-uk-grid="{ {% if particle.gutter|default('enabled') == 'enabled' %}gutter: 30{% endif %} }">
        {% for row in particle.items|batch(particle.columns|default('3')|e) %}
            {% for item in row %}
                {% set attr_extra_item = '' %}
                {% for extra in item.extra %}
                    {% set attr_extra_item = attr_extra_item ~ ' ' ~ extra|keys|first|e ~ '="' ~ extra|values|first|e('html_attr') ~ '"' %}
                {% endfor %}
                {% if item.image %}
                    <div class="g-gallery-feature-item{% if item.class %} {{ item.class|e }}{% endif %}" {% if item.extra %}{{ attr_extra_item|raw }}{% endif %}>
                        <a class="uk-overlay uk-overlay-hover" href="{{ url(item.image, false, 0) }}" {% if item.title %}title="{{ item.title|e }}"{% endif %} data-uk-lightbox="{group:'{{ galleryid }}'}">
                            <span class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></span>
                            <img alt="{{ item.alt|e }}" src="{{ url(item.image) }}" {{ item.image|imagesize|raw }}>
                        </a>
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>
{% endset %}

{% block particle %}

    <div class="g-gallery-feature{% if particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>
        <div class="g-grid">
            <div class="g-block g-gallery-feature-left{% if particle.css.left %} {{ particle.css.left|e }}{% endif %}{% if particle.layout|default('right')|e == 'left' %} image-block size-{{ particle.gallerywidth|default(50)|e }}{% endif %}" {% if particle.extra_left %}{{ attr_extra_left|raw }}{% endif %}>
                <div class="g-content">
                    {% if particle.layout|default('right')|e == 'right' %}{{ textcontent }}{% endif %}
                    {% if particle.layout|default('right')|e == 'left' %}{{ gallerycontent }}{% endif %}
                </div>
            </div>

            <div class="g-block g-gallery-feature-right{% if particle.css.right %} {{ particle.css.right|e }}{% endif %}{% if particle.layout|default('right')|e == 'right' %} align-right image-block size-{{ particle.gallerywidth|default(50)|e }}{% endif %}" {% if particle.extra_right %}{{ attr_extra_right|raw }}{% endif %}>
                <div class="g-content">
                    {% if particle.layout|default('right')|e == 'right' %}{{ gallerycontent }}{% endif %}
                    {% if particle.layout|default('right')|e == 'left' %}{{ textcontent }}{% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}