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

{% block particle %}
	<div class="g-media-box{% if particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>
		{% if particle.mainheading or particle.introtext %}
			{{ particleheading }}
		{% endif %}
		{% for row in particle.items|batch(particle.columns|default('1')|e) %}
			<div class="g-grid">
				{% 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 %}

					{% set toggleid = random() %}
						
					<div class="g-block{% if item.class %} {{ item.class|e }}{% endif %}" {% if item.extra %}{{ attr_extra_item|raw }}{% endif %}>
						<div classs="g-content">
							<div class="g-media-box-item">
								{% if item.image %}
									<img class="g-media-box-image" alt="{{ item.alt|e }}" src="{{ url(item.image) }}" {{ item.image|imagesize|raw }}>
								{% endif %}

								<div class="g-media-box-content">
									{% if item.title %}
										<h4 class="g-media-box-title">
											{%- if item.titlelink -%}
												<a target="{{ item.titletarget|default('_parent')|e }}" href="{{ item.titlelink|e }}">
											{%- endif -%}
												{{- item.title|raw -}}
											{%- if item.titlelink -%}
												</a>
											{%- endif -%}
										</h4>
									{% endif %}

									<div class="g-grid g-media-box-links">
										<div class="g-block">
											{% if item.audio %}
												<div class="g-media-box-play uk-hidden" id="toggle-{{ toggleid }}">
													<audio controls>
														<source src="{{ url(item.audio) }}" type="audio/{{ item.format|default('mpeg')|e }}">
													</audio>
												</div>
												<a class="button-media" data-uk-toggle="{target:'#toggle-{{ toggleid }}', animation:'uk-animation-slide-bottom'}" {% if item.tooltip1 %}data-uk-tooltip="{pos:'{{ particle.tooltippos|default('top') }}'}" title="{{ item.tooltip1|e }}" aria-label="{{ item.tooltip1|e }}"{% endif %}>
													{% if item.buttonicon1 %}
														<i class="{{ item.buttonicon1|e }}"></i>
														{%- if item.tooltip1 -%}
															<span class="g-item-text">{{ item.tooltip1|e }}</span>
														{%- endif -%}
													{% endif %}
												</a>
											{% endif %}

											{% if item.video %}
												<a href="{{ item.video|e }}" class="button-media" data-uk-lightbox {% if item.tooltip2 %}data-uk-tooltip="{pos:'{{ particle.tooltippos|default('top') }}'}" title="{{ item.tooltip2|e }}" aria-label="{{ item.tooltip2|e }}"{% endif %}>
													{% if item.buttonicon2 %}
														<i class="{{ item.buttonicon2|e }}"></i>
														{%- if item.tooltip2 -%}
															<span class="g-item-text">{{ item.tooltip2|e }}</span>
														{%- endif -%}
													{% endif %}
												</a>
											{% endif %}

											{% if item.readfile %}
												<a class="button-media" target="{{ item.target3|default('_parent')|e }}" href="{{ item.readfile|e }}" {% if item.tooltip3 %}data-uk-tooltip="{pos:'{{ particle.tooltippos|default('top') }}'}" title="{{ item.tooltip3|e }}" aria-label="{{ item.tooltip3|e }}"{% endif %}>
													{% if item.buttonicon3 %}
														<i class="{{ item.buttonicon3|e }}"></i>
														{%- if item.tooltip3 -%}
															<span class="g-item-text">{{ item.tooltip3|e }}</span>
														{%- endif -%}
													{% endif %}
												</a>
											{% endif %}

											{% if item.readfile2 %}
												<a class="button-media" target="{{ item.target4|default('_parent')|e }}" href="{{ item.readfile2|e }}" {% if item.tooltip4 %}data-uk-tooltip="{pos:'{{ particle.tooltippos|default('top') }}'}" title="{{ item.tooltip4|e }}" aria-label="{{ item.tooltip4|e }}"{% endif %} download>
													{% if item.buttonicon4 %}
														<i class="{{ item.buttonicon4|e }}"></i>
														{%- if item.tooltip4 -%}
															<span class="g-item-text">{{ item.tooltip4|e }}</span>
														{%- endif -%}
													{% endif %}
												</a>
											{% endif %}

											{% if item.readmore %}
												<a class="button-media" target="{{ item.target5|default('_parent')|e }}" href="{{ item.readmore|e }}" {% if item.tooltip5 %}data-uk-tooltip="{pos:'{{ particle.tooltippos|default('top') }}'}" title="{{ item.tooltip5|e }}" aria-label="{{ item.tooltip5|e }}"{% endif %}>
													{% if item.buttonicon5 %}
														<i class="{{ item.buttonicon5|e }}"></i>
														{%- if item.tooltip5 -%}
															<span class="g-item-text">{{ item.tooltip5|e }}</span>
														{%- endif -%}
													{% endif %}
												</a>
											{% endif %}
										</div>
									</div>

									{% if item.description %}
										<div class="g-media-box-desc">
											{{- item.description|raw -}}
										</div>
									{% endif %}

									{% if item.special1 %}
										<div class="g-media-box-special1">
											{{- item.special1|raw -}}
										</div>
									{% endif %}

									{% if item.special2 %}
										<div class="g-media-box-special2">
											{{- item.special2|raw -}}
											{%- if item.special2text -%}
												<a target="{{ item.target|default('_parent')|e }}" href="{{ item.special2link|e }}">
											{%- endif -%}
												{{- item.special2text|raw -}}
											{%- if item.special2text -%}
												</a>
											{%- endif -%}
										</div>
									{% endif %}
								</div>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
		{% endfor %}
    </div>
{% endblock %}