{% 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 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 feedbackitems %}
	{% if particle.behaviour|default('static') == 'static' %}<div class="g-grid">{% endif %}
		{% 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 %}

			{% set feedbacktext %}
				<div class="g-feedback-text">
					{{- item.feedback|raw -}}
				</div>
			{% endset %}

			{% set image %}
				<span class="g-user-image">
					<img alt="{{ item.alt|e }}" src="{{ url(item.image) }}" {{ item.image|imagesize|raw }}>
				</span>
			{% endset %}

			{% set customername %}
				<div class="g-user-name">
					{{- item.customername|e -}}
				</div>
			{% endset %}

			{% set usercompany %}
				<div class="g-user-company">
					{%- if item.position -%}
						{{- item.position|e -}}{% if item.company and item.position %} {{ item.wordconnector|e }} {% endif %}

						{%- if item.company -%}
							{%- if item.companylink -%}
								<a target="{{ item.target|default('_parent')|e }}" href="{{ item.companylink|e }}">
							{%- endif -%}
								{{- item.company|e -}}
							{%- if item.companylink -%}
								</a>
							{%- endif -%}
						{%- endif -%}
					{%- endif -%}
				</div>
			{% endset %}

			{% set style1 %}
				<div class="g-feedback-item">
					{% if item.feedback %}
						{{ feedbacktext }}

						{% if particle.style|default("style1") == "style2" %}
							<div class="g-feedback-separator">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
							</div>
						{% endif %}
					{% endif %}

					{% if item.customername or item.image %}
						<div class="g-user-info clearfix">
							{% if item.image %}
								{{ image }}
							{% endif %}

							{% if item.customername or item.position or item.company %}
								<div class="g-user-details">
									{% if item.customername %}
										{{ customername }}
									{% endif %}

									{% if item.position or item.company %}
										{{ usercompany }}
									{% endif %}
								</div>
							{% endif %}
						</div>
					{% endif %}
				</div>
			{% endset %}

			{% set style3 %}
				<div class="g-feedback-item">
					{% if item.customername or item.image %}
						<div class="g-user-info clearfix">
							{% if item.image %}
								{{ image }}
							{% endif %}

							{% if item.customername or item.position or item.company %}
								<div class="g-user-details">
									{% if item.customername %}
										{{ customername }}
									{% endif %}

									{% if item.position or item.company %}
										{{ usercompany }}
									{% endif %}
								</div>
							{% endif %}
						</div>
					{% endif %}

					{% if item.feedback %}
						{{ feedbacktext }}
					{% endif %}
				</div>
			{% endset %}

			{% if particle.behaviour|default('static') == 'static' %}
				<div class="g-block{% if item.class %} {{ item.class|e }}{% endif %}" {% if item.extra %}{{ attr_extra_item|raw }}{% endif %}>
					<div class="g-content">
						{% if particle.style|default("style1") == "style1" or particle.style|default('style1') == 'style2' %}{{ style1 }}{% endif %}
						{% if particle.style|default("style1") == "style3" %}{{ style3 }}{% endif %}
					</div>
				</div>
			{% endif %}

			{% if particle.behaviour|default('static') == 'slider' or particle.behaviour|default('static') == 'slideset' %}
				<li {% if item.class %}class="{{ item.class|e }}"{% endif %} {% if item.extra %}{{ attr_extra_item|raw }}{% endif %}>
					{% if particle.style|default("style1") == "style1" or particle.style|default('style1') == 'style2' %}{{ style1 }}{% endif %}
					{% if particle.style|default("style1") == "style3" %}{{ style3 }}{% endif %}
				</li>
			{% endif %}

		{% endfor %}
	{% if particle.behaviour|default('static') == 'static' %}</div>{% endif %}
{% endset %}

{% block particle %}
	
	{% if particle.behaviour|default('static') == 'static' %}
		<div class="g-feedback{% if particle.css.class %} {{ particle.css.class|e }}{% endif %} {{ particle.style|default("style1")|e }}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>
			{% if particle.mainheading or particle.introtext %}
				{{ particleheading }}
			{% endif %}
			{{ feedbackitems }}
		</div>
	{% endif %}
	{% if particle.behaviour|default('static') == 'slider' %}
		<div class="g-feedback-slider{% if particle.css.class %} {{ particle.css.class|e }}{% endif %} {{ particle.style|default("style1")|e }}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>
			{% if particle.mainheading or particle.introtext %}
				{{ particleheading }}
			{% endif %}	    	
			<div class="uk-slidenav-position" data-uk-slider{% if particle.autoplay|default("disable") == "enable" %}="{autoplay:true, autoplayInterval: {{ particle.autoplayInterval|default(7000)|e}}}"{% endif %}>
				<div class="uk-slider-container">
					<ul class="uk-slider uk-grid uk-grid-width-medium-1-{{ particle.columns|default('3')|e }}">
						{{ feedbackitems }}
					</ul>
				</div>
				{% if (particle.navigation|default('arrows') == 'arrows') or (particle.navigation|default('arrows') == 'both') %}
					<div class="g-particle-navigation">
						<a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slider-item="previous" aria-label="{{'Previous'|trans_key('IT_ACCESS_PREVIOUS')}}"></a>
						<a href="" class="uk-slidenav uk-slidenav-next" data-uk-slider-item="next" aria-label="{{'Next'|trans_key('IT_ACCESS_NEXT')}}"></a>
					</div>
				{% endif %}
			</div>		    	
		</div>
	{% endif %}
	{% if particle.behaviour|default('static') == 'slideset' %}
		<div class="g-feedback-slideset{% if particle.css.class %} {{ particle.css.class|e }}{% endif %} {{ particle.style|default("style1")|e }}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>
			{% if particle.mainheading or particle.introtext %}
				{{ particleheading }}
			{% endif %}	    	
			<div class="uk-slidenav-position" data-uk-slideset="{small: 1, medium: {{ particle.columns|default('3')|e }}, large: {{ particle.columns|default('3')|e }}, duration: {{ particle.duration|default(200)|e}}, {% if particle.autoplay|default("disable") == "enable" %}autoplay: 'true', autoplayInterval: {{ particle.autoplayInterval|default(7000)|e}},{% endif %} animation: '{{ particle.animation|default('fade')|e}}'}">
				<div class="uk-slider-container">
					<ul class="uk-slideset uk-grid">
						{{ feedbackitems }}
					</ul>
				</div>
				{% if (particle.navigation|default('arrows') == 'arrows') or (particle.navigation|default('arrows') == 'both') %}
					<div class="g-particle-navigation">
						<a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous" aria-label="{{'Previous'|trans_key('IT_ACCESS_PREVIOUS')}}"></a>
						<a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next" aria-label="{{'Next'|trans_key('IT_ACCESS_NEXT')}}"></a>
					</div>
				{% endif %}
				{% if (particle.navigation|default('arrows') == 'dots') or (particle.navigation|default('arrows') == 'both') %}
					<ul class="uk-slideset-nav uk-dotnav uk-flex-center">
	    			{% set counter = 0 %}
	    			{% for item in particle.items %}
	    				<li data-uk-slideset-item="{{ counter }}"><a href="" aria-label="{{'Item'|trans_key('IT_ACCESS_ITEM')}} {{ counter }}"></a></li>
	    				{% set counter = counter + 1 %}
	    			{% endfor %}
					</ul>
				{% endif %}
			</div>    	
		</div>
	{% endif %}
{% endblock %}