{% extends '@nucleus/partials/particle.html.twig' %}

{% block particle %}

	{% if particle.title %}<h2 class="g-title g-infolist-title">{{ particle.title|raw }}</h2>{% endif %}

	<div class="g-infolist {{ particle.cols|e }} {{ particle.class|e }}">
		
		{% if particle.intro %}
		<p>{{ particle.intro|raw }}</p>
		{% endif %}

		{% for infolist in particle.infolists %}
			<div class="g-infolist-item {% if infolist.image %} g-infolist-with-img{% endif %}">
				
				{% set imagedata %}
				<div class="g-infolist-item-img g-block{% if infolist.imagestyle == 'compact' %} size-22 hidden-phone{% endif %}{% if infolist.imagestyle == 'browser' %} browser{% endif %} {{ infolist.imageloc|e }}">
					{% if infolist.imagestyle == 'browser' %}
					<div class="browser-wrapper">
						<div class="browser-bar">
							<span class="browser-button"></span>
						</div>
					{% endif %}
					<img src="{{ url(infolist.image)|e }}" alt="image" />
					{% if infolist.imagestyle == 'browser' %}
					</div>
					{% endif %}
				</div>
				{% endset %}
				
				{% if infolist.image and infolist.imageloc == 'left' %}
				{{ imagedata }}
				{% endif %}
				
				<div class="g-infolist-item-text {% if infolist.image %}g-block{% endif %}">
					{% if infolist.title %}
					<div class="g-infolist-item-title {% if infolist.textstyle == 'bold' %}g-bold{% endif %}">
						{% if infolist.textstyle == 'large' %}
						<div class="g-title-hero">
						{% endif %}	
						{% if infolist.link %}
						<a href="{{ infolist.link|e }}">
						{% endif %}	
							{{ infolist.title|raw }}
						{% if infolist.link %}
						</a>
						{% endif %}	
						{% if infolist.textstyle == 'large' %}
						</div>
						{% endif %}
					</div>
					{% endif %}
					
					{% if infolist.tag or infolist.subtag %}
					<div class="g-infolist-tags">
					{% if infolist.tag %}
						{% if infolist.link %}
						<a href="{{ infolist.link|e }}">
						{% endif %}	
							<span class="g-tag">{{ infolist.tag|e }}</span>
						{% if infolist.link %}
						</a>
						{% endif %}	
					{% endif %}	
			
					{% if infolist.subtag %}
					<span class="g-small">{{ infolist.subtag|e }}</span>
					{% endif %}
					</div>
					{% endif %}

					{% if infolist.desc %}
					<div class="g-infolist-item-desc">
						{% if infolist.textstyle == 'large' %}
						<div class="g-large">
						{% endif %}
						{{ infolist.desc|raw }}
						{% if infolist.textstyle == 'large' %}
						</div>
						{% endif %}
					</div>
					{% endif %}
					
					{% if infolist.link and infolist.label %}
					<div class="g-infolist-link">
						<a href="{{ infolist.link|e }}" class="button {{ infolist.readmoreclass|e }}">{% if infolist.icon %}<i class="{{ infolist.icon|e }}"></i>{% endif %}
							{{ infolist.label|e }}
						</a>
					</div>
					{% endif %}
				</div>
				
				{% if infolist.image and infolist.imageloc == 'right' %}
				{{ imagedata }}
				{% endif %}
			</div>
		{% endfor %}

	</div>

{% endblock %}