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

{% set imagecontent %}
    {% if particle.image %}
        <img class="g-hotspots-image{% if particle.imagebottom|default('yes')|e == 'yes' %} image-bottom{% endif %}" alt="{{ particle.alt|e }}" src="{{ url(particle.image) }}" {{ particle.image|imagesize|raw }}>
    {% endif %}
{% endset %}

{% set hotspots %}
    {% for item in particle.items %}
        {% 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 %}

        <li class="g-hotspots-item {% if item.defaultitem %}uk-active{% endif %}{% if item.class %} {{ item.class|e }}{% endif %}" style="left: {{ item.left|e }}%; top: {{ item.top|e }}%;" {% if item.extra %}{{ attr_extra_item|raw }}{% endif %}>
            <a class="g-hotspots-item-toggle" aria-label="{{- item.title|raw -}}">
                <span class="{{ item.toggleicon|default('fa fa-plus')|e }}"></span>
            </a>
        </li>

    {% endfor %}
{% endset %}

{% set hotspotscontent %}
    {% for item in particle.items %}

        {% set itemimage %}
            <div class="g-hotspots-item-image">
                {% if particle.lightbox|default('enable') == 'enable' or particle.lightbox|default('enable') == 'disable' %}
                    {% if particle.lightbox|default('enable') == 'enable' %}
                        <a href="{{ url(item.image, 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 alt="{{ item.alt|e }}" src="{{ url(item.image) }}" {{ item.image|imagesize|raw }}>
                    {% if particle.lightbox|default('enable') == 'enable' %}
                        </a>
                    {% endif %}
                {% endif %}

                {% if particle.lightbox|default('enable') == 'disablelink' %}
                    {% if item.link %}<a target="{{ item.target|default('_parent')|e }}" href="{{ item.link|e }}">{% endif %}
                        <img alt="{{ item.alt|e }}" src="{{ url(item.image) }}" {{ item.image|imagesize|raw }}>
                    {% if item.link %}</a>{% endif %}
                {% endif %}
            </div>
        {% endset %}

        {% set title %}
            <h3 class="g-hotspots-title">
                {%- if item.link -%}
                    <a target="{{ item.target|default('_parent')|e }}" href="{{ item.link|e }}">
                {%- endif -%}
                    {{- item.title|raw -}}
                {%- if item.link -%}
                    </a>
                {%- endif -%}
            </h3>
        {% endset %}

        {% set description %}
            <div class="g-hotspots-desc">
                {{- item.description|raw -}}
            </div>
        {% endset %}

        {% set specialtext %}
            <div class="g-hotspots-special">
                {%- if item.specialicon -%}
                    <i class="{{ item.specialicon|e }}"></i>
                {%- endif -%}
                {{- item.specialtext|raw -}}
            </div>
        {% endset %}

        {% set bottomlink %}
            <div class="g-hotspots-link">
                <a class="button" target="{{ item.target|default('_parent')|e }}" href="{{ item.link|e }}">
                    {{- item.bottomlink|raw -}}
                </a>
            </div>
        {% endset %}

        <li class="g-hotspots-content{% if item.class %} {{ item.class|e }}{% endif %}">
            {% if item.image %}
                {{ itemimage }}
            {% endif %}

            {% if item.title %}
                {{ title }}
            {% endif %}

            {% if item.description %}
                {{ description }}
            {% endif %}

            {% if item.specialtext or item.bottomlink %}
                <div class="g-bottom-info clearfix{% if item.specialtext == false %} no-special{% endif %}{% if item.bottomlink == false %} no-link{% endif %}">
                    {% if item.specialtext %}
                        {{ specialtext }}
                    {% endif %}

                    {% if item.bottomlink %}
                        {{ bottomlink }}
                    {% endif %}
                </div>
            {% endif %}
        </li>

    {% endfor %}
{% endset %}

{% set hotspotscontainer %}
    <div class="g-hotspots-container">
        {{ imagecontent }}
        <ul data-uk-switcher="{connect:'#hotspots-content_{{ hotspotsid }}', animation: '{{ particle.animation|default('fade')|e }}'}">
            {{ hotspots }}
        </ul>
    </div>
{% endset %}

{% set hotspotscontentcontainer %}
    <ul id="hotspots-content_{{ hotspotsid }}" class="uk-switcher">
        {{ hotspotscontent }}
    </ul>
{% endset %}

{% block particle %}
    <div class="g-hotspots{% 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="g-grid">
            <div class="g-block g-hotspots-left{% if particle.css.left %} {{ particle.css.left|e }}{% endif %}{% if particle.layout|default('left')|e == 'left' %} image-block size-{{ particle.imagewidth|default(50)|e }}{% endif %}" {% if particle.extra_left %}{{ attr_extra_left|raw }}{% endif %}>
                <div class="g-content">
                    {% if particle.layout|default('left')|e == 'right' %}{{ hotspotscontentcontainer }}{% endif %}
                    {% if particle.layout|default('left')|e == 'left' %}{{ hotspotscontainer }}{% endif %}
                </div>
            </div>

            <div class="g-block g-hotspots-right{% if particle.css.right %} {{ particle.css.right|e }}{% endif %}{% if particle.layout|default('left')|e == 'right' %} image-block size-{{ particle.imagewidth|default(50)|e }}{% endif %}" {% if particle.extra_right %}{{ attr_extra_right|raw }}{% endif %}>
                <div class="g-content">
                    {% if particle.layout|default('left')|e == 'right' %}{{ hotspotscontainer }}{% endif %}
                    {% if particle.layout|default('left')|e == 'left' %}{{ hotspotscontentcontainer }}{% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}