
{# GLOBAL VARS #}
{% set settings = page.gallery %}
{% set items = settings.items|split(',') %}
{% set limit = settings.limit %}
{% set folder_path = assetspath ~ gallery.file_path|trim(".") ~ '/' %}
{% if limit is empty or limit < 1 %}{% set limit = 99999 %}{% endif %}
{% set exif_items = page.popup.caption.exif_items|split(',') %}

{# Video include #}
{% if gallery_videos|length > 0 and 'hide-video' not in settings.classes and 'video-bottom' not in settings.classes %}
	{% include 'partials/module.video.html' %}
	{% if gallery_images|length > 0 %}
		<hr>
	{% endif %}
{% endif %}

{# image_noindex rel="nofollow" #}
{% set nofollow = page.settings.image_noindex ? ' rel="nofollow"' : '' %}

{# set crop ratio if defined #}
{% if settings.crop.enabled and settings.layout != "justified" and settings.layout != "columns" %}
	{% set crop_ratio = settings.crop.crop[1] / settings.crop.crop[0] * 100 %}
	{% set data_crop = ' data-crop="' ~ settings.crop.crop[0]|round ~ '.' ~ settings.crop.crop[1]|round ~ '"' %}
{% endif %}

{# split #}
{% set gallery_split_view = settings.split.enabled and settings.layout != "justified" and settings.layout != "columns" %}
{% if gallery_split_view %}
	{# invert #}
	{% if settings.split.invert %}
		{% set push = 'medium-push-' ~ (12 - settings.split.ratio) %}
		{% set pull = 'medium-pull-' ~ settings.split.ratio %}
	{% endif %}
{% endif %}

{# grid #}
{% if settings.layout == "grid" %}

	{# custom grid space style #}
	{% if settings.grid.space > -1 %}
		{% set ul_style = ' style="margin: 0 ' ~ (width == 'wide' ? settings.grid.space / 2 : - settings.grid.space / 4 ) ~ 'px"' %}
		{% set li_style = ' style="padding: 0 ' ~ settings.grid.space / 2 ~ 'px ' ~ settings.grid.space ~ 'px"' %}
	{% endif %}

	{# use width #}
	{% if settings.grid.use_width %}
		{% set ul_open = '<ul class="items"' ~ ul_style ~ '>' %}

	{# use amount #}
	{% else %}
		{% set block_grid = settings.grid.columns|replace({' ': ''})|split(',') %}
		{% set columns_max = max(min(limit, gallery_images|length), 3) %}
		{% set small_grid = min(block_grid[2]|default(block_grid[1])|default(block_grid[0])|default('1'), columns_max) %}
		{% set medium_grid = min(block_grid[1]|default(block_grid[0])|default('2'), columns_max) %}
		{% set large_grid = min(block_grid[0]|default('3'), columns_max) %}
		{% set ul_open = '<ul class="small-block-grid-' ~ small_grid ~ ' medium-block-grid-' ~ medium_grid ~ ' large-block-grid-' ~ large_grid ~ ' items"' ~ ul_style ~ '>' %}
	{% endif %}

	{# <ul><li> tags #}	
	{% set li_open = '<li' ~ li_style ~ '>' %}
	{% set li_close = '</li>' %}
	{% set ul_close = '</ul>' %}
{% endif %}

{# grid start #}
{{ ul_open }}

{# START LOOP #}
{% for image in gallery_images %}

{# Loop only within limit #}
{% if loop.index0 < limit %}

	{# SET ALL ITEM VARS #}
	{% set url = assetspath ~ (gallery.file_path ~ '/' ~ image.file_name)|trim('.') %}
	{% set url_escaped = url|e %}
	{% set image_link = image.link|default(settings.image.link) %}
	{% set link_target = image.target|default(settings.image.link_target) %}
	{% set name_no_ext = image.file_name|removeExtension %}
	{% set nofollow = '' %}

	{# Check if image link is set #}
	{% if image_link %}

		{# nofollow #}
		{% if image_link ends with ':nofollow' %}
			{% set nofollow = ' rel="nofollow"' %}
			{% set image_link = image_link|replace({':nofollow': ''}) %}
		{% endif %}

		{# href #}
		{% set link_href = image_link|replace({'{file_name}': name_no_ext, '{file_name_ext}': image.file_name, '{path}': folder_path, '{image_path}': folder_path ~ image.file_name, '{{files}}': assetspath ~ '/content/custom/files' }) %}

		{# auto link target #}
		{% if link_target is empty or link_target == 'auto' %}
			{% if link_href|lower starts with 'http' or hasExtension(link_href) %}
				{% set link_target = ' target="_blank"' %}
			{% else %}
				{% set link_target = '' %}
			{% endif %}

		{# popup target #}
		{% elseif link_target == 'popup' %}
			{% set link_target = ' data-popup-window="' ~ image.name|replace({" ": "-"}) ~ ',' ~ settings.image.popup_width ~ ',' ~ settings.image.popup_height ~ '"' %}

		{# blank target #}
		{% elseif link_target == '_blank' %}
			{% set link_target = ' target="_blank"' %}

		{# x3 popup #}
		{% elseif link_target == 'x3_popup' %}
			{% set link_target = ' data-popup' %}

		{# self _self #}
		{% else %}
			{% set link_target = '' %}
		{% endif %}

	{# normal image popup link #}
	{% else %}
		{% set link_href = gallery.permalink|setpath(rootpath) ~ name_no_ext|replace({' ': '_'}) ~ '/' %}
		{% set link_target = '' %}
	{% endif %}

	{# EXIF and GEO vars #}
	{% set exif_array = [] %}
	{#{% set exif_string = '' %}#}
	{% set data_exif = '' %}
	{% set geo = '' %}
	{% set data_geo = '' %}

	{# EXIF and GEO #}
	{% if image.exif %}

		{# caption EXIF #}
		{% if exif_items|length > 0 %}
			{% for key in exif_items if image.exif[key] %}
		    {% set exif_array = exif_array|merge({ (key): image.exif[key] }) %}
			{% endfor %}
			{% if exif_array|length %}{% set data_exif = ' data-exif="' ~ exif_array|json_encode()|e('html_attr') ~ '"' %}{% endif %}
		{% endif %}

		{# caption map button #}
		{% if image.exif.latitude and image.exif.longitude %}
			{% set geo = image.exif.latitude ~ ',' ~ image.exif.longitude %}
			{% set map_embed_src = 'https://www.google.com/maps/embed/v1/place?q=' ~ geo ~ '&amp;key=AIzaSyDRp6xla9SxUmTBu6l_kprhjjI9e5-EVZk' %}
			{% set map_link_src = 'https://www.google.com/maps/search/?api=1&query=' ~ geo %}
			{#{% set map_embed_button_item = '<button data-href="' ~ map_link_src ~ '" data-popup-href="' ~ map_embed_src ~ '" class="button small button-map" data-popup-class="x3-popup-iframe-full" data-popup></button>' %}#}
			{% set map_embed_button_item = '<button data-href="' ~ map_link_src ~ '" data-embed-modal="' ~ map_embed_src ~ '" class="button small button-map" data-lang="map"></button>' %}
			{% set map_button_popup = '<a href="' ~ map_link_src ~ '" data-embed-modal="' ~ map_embed_src ~ '" class="button small button-map" target="_blank" data-lang="map"></a>' %}
			{% set map_link_popup = '<a href="' ~ map_link_src ~ '" data-embed-modal="' ~ map_embed_src ~ '" class="link-map" target="_blank" data-lang="map"></a>' %}
			{% set map_button = '<a href="' ~ map_link_src ~ '" class="button small button-map" target="_blank" data-lang="map"></a>' %}
			{% set map_link = '<a href="' ~ map_link_src ~ '" class="link-map" target="_blank" data-lang="map"></a>' %}
			{% set data_geo = ' data-geo="' ~ geo ~ '"' %}
		{% endif %}
	{% endif %}

	{# image title #}
	{% set title = getDefault(image.title, settings.image.title, settings.image.title_include)|striptags('<a><span><em><i><b><strong><small><s><mark>')|replace({'{file_name}': name_no_ext, '{file_name_ext}': image.file_name, '{path}': folder_path, '{image_path}': folder_path ~ image.file_name, '{{files}}': assetspath ~ '/content/custom/files'}) %}
	{% set title_name = title|default(image.name) %}
	{% if title and geo %}{% set title = title|replace({'{latitude}': image.exif.latitude, '{longitude}': image.exif.longitude, '{map_embed_src}': map_embed_src, '{map_link_src}': map_link_src, '{map_button_popup}': map_button_popup, '{map_link_popup}': map_link_popup, '{map_button}': map_button, '{map_link}': map_link}) %}{% endif %}
	{% set title_pseudo = title_name|replace({'<a': '<span', '</a>': '</span>', ' href=': ' data-href=', ' target=': ' data-target='}) %}

	{# image description #}
	{% set image_description = getDefault(image.description, settings.image.description, settings.image.description_include) %}
	{% if image_description is empty %}
		{% set description = '' %}
		{% set description_pseudo = '' %}
	{% else %}
		{% set description = image_description|striptags('<a><span><em><i><b><strong><small><s><br><mark><img><kbd><code><button>')|replace({'{file_name}': name_no_ext, '{file_name_ext}': image.file_name, '{path}': folder_path, '{image_path}': folder_path ~ image.file_name, '{{files}}': assetspath ~ '/content/custom/files'}) %}
		{% if geo %}{% set description = description|replace({'{latitude}': image.exif.latitude, '{longitude}': image.exif.longitude, '{map_embed_src}': map_embed_src, '{map_link_src}': map_link_src, '{map_button_popup}': map_button_popup, '{map_link_popup}': map_link_popup, '{map_button}': map_button, '{map_link}': map_link}) %}{% endif %}
		{% set description_pseudo = description|replace({'<a': '<span', '</a>': '</span>', ' href=': ' data-href=', ' target=': ' data-target='}) %}
	{% endif %}

	{# image.date #}
	{% set date = image.date %}
	{% if page.settings.date_format == 'timeago' %}
		{% set date_formatted = date|date("d F Y") %}
		{% set date_class = 'date timeago' %}
	{% else %}
		{% set date_formatted = date|date(page.settings.date_format|default('d F Y')) %}
		{% set date_class = 'date' %}
	{% endif %}
	{% set time_tag = '<time itemprop="dateCreated" datetime="' ~ date|date('c') ~ '" class="' ~ date_class ~ '">' ~ date_formatted ~ '</time>' %}

	{# Set image ratio for responsive layout #}
	{% set image_ratio = crop_ratio|default(image.height / image.width * 100) %}

	{# Set link_title attr if tooltip #}
	{% if settings.tooltip.enabled %}
		{% set tooltip_items = settings.tooltip.items|split(',') %}
		{% set link_title_content %}
		{% for item in tooltip_items %}
			{% if item == 'title' %}<span class="title">{{ title_name }}</span>
			{% elseif item == 'date' %}{{ time_tag }}
			{% elseif item == 'filename' %}<span>{{ name_no_ext }}</span>
			{% elseif item == 'filename_ext' %}<span>{{ image.file_name }}</span>
			{% elseif item == 'description' and description is not empty %}<span class="description">{{ description }}</span>{% endif %}
		{% endfor %}
		{% endset %}
		{% set link_title_content = link_title_content|e('html')|trim %}
		{% if link_title_content is not empty %}{% set link_title %} title="{{ link_title_content }}"{% endset %}{% endif %}
	{% endif %}

	{# Set figure #}
	{% set figure %}
	{% if settings.layout != "slideshow" %}
	<figure>
			<div class="image-container" style="padding-bottom:{{ image_ratio }}%;">
				<img data-src="{{ url_escaped }}" data-width="{{ image.width }}"{{ data_crop }} alt="{{ title_name|striptags|e('html') }}" itemprop="thumbnail">
			</div>

		{# If captions enabled #}
		{% if settings.caption.enabled %}

			{# Set figcaption content #}
			{% set figcaption_content %}
				{% for item in settings.caption.items|split(",") %}
					{% if item == 'title' %}<span class="title">{{ title_pseudo }}</span>
					{% elseif item == 'date' %}{{ time_tag }}
					{% elseif item == 'filename' %}<span>{{ name_no_ext }}</span>
					{% elseif item == 'filename_ext' %}<span>{{ image.file_name }}</span>
					{% elseif item == 'maplink' and geo %} {{ map_embed_button_item }}
					{% elseif item == 'description' and description_pseudo is not empty %}<span class="description">{{ description_pseudo }}</span>{% endif %}
				{% endfor %}
			{% endset %}
			{% set figcaption_content =  figcaption_content|trim %}

			{# Only populate if figcaption is not empty #}
			{% if figcaption_content is not empty %}
				<figcaption itemprop="caption description">{{ figcaption_content }}</figcaption>
			{% endif %}

  	{% endif %}
	</figure>
	{% endif %}
	{% endset %}

	{# Set item #}
	{% set item %}

		{{ li_open }}

		{# anchor classes #}
		{% set anchor_class = 'item img-link item-link' %}
		{% if settings.clickable and page.popup.enabled and image_link is empty and settings.layout != "slideshow" %}
			{% set anchor_class = anchor_class ~ ' x3-popup' %}
		{% endif %}

		{# gallery split view add row class #}
		{% if gallery_split_view %}
			{% set anchor_class = anchor_class ~ ' row' %}
		{% endif %}

		{# clickable #}
		{% set link_tag = settings.clickable ? 'a' : 'span' %}

		{# panorama #}
		{% if page.plugins.panorama.enabled %}
			{% set data_pano = pano_params(image, assetspath) %}
			{% if data_pano starts with ' data-panorama=' %}{% set anchor_class = anchor_class ~ ' x3-panorama' %}{% endif %}
		{% endif %}

		{# is link #}
		{% set data_is_link = image_link ? ' data-is-link="true"' : '' %}

		{# anchor #}
		<{{link_tag}} class="{{ anchor_class }}"{{ data_exif }}{{ data_geo }} data-width="{{ image.width }}" data-height="{{ image.height }}" data-image="{{ url_escaped }}" data-title="{{ title|e('html') }}" data-name="{{ image.name }}" data-description="{{ description|e('html') }}" data-date="{{ date_formatted }}"{{ data_is_link }} href="{{ link_href|e }}"{{link_target}} id="image-{{ image.id|default(loop.index) }}"{{ link_title }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"{{ nofollow }}{{ data_pano }}>

		{# Lets just set anchor text if slideshow #}
		{% if settings.layout != "slideshow" %}

			{# SPLIT #}
			{% if gallery_split_view %}

				{# split text-align #}
				{% if settings.split.invert %}
					{% set text_align = 'medium-text-left' %}
				{% elseif 'text-right' not in settings.classes and 'text-left' not in settings.classes %}
					{% set text_align = 'medium-text-right' %}
				{% endif %}

				{# split layout #}
				<div class="medium-{{ settings.split.ratio }} columns {{ push }} {{ text_align }}">
					{# assign title and description if items < 2 (only preview) #}
					{% if items|length < 2 %}{% set items = items|merge(['title', 'description']) %}{% endif %}
					{% for item in items %}
						{% if item == "title" %}
							<h2 class="title" itemprop="caption">{{ title_pseudo }}</h2>
						{% elseif item == 'description' and description is not empty %}
							<p itemprop="description">{{ description_pseudo }}</p>
						{% elseif item == 'date' %}
							<h6 class="date">{{time_tag}}</h6>
						{% elseif item == 'filename' %}
							<span class="gallery-filename">{{ name_no_ext }}</span>
						{% elseif item == 'filename_ext' %}
							<span class="gallery-filename_ext">{{ image.file_name }}</span>
						{% elseif item == 'maplink' and geo %}
							{{ map_embed_button_item }}
						{% endif %}
					{% endfor %}

				</div>
				<div class="medium-{{ (12 - settings.split.ratio) }} columns {{ pull }}">
					{{ figure }}
				</div>

			{# Sort all items from items #}
			{% elseif settings.layout != "justified" %}
				{% for item in items %}
					{% if item == 'title' %}
						<h2 class="title" itemprop="caption">{{ title_pseudo }}</h2>
					{% elseif item == 'description' and description is not empty %}
						<p itemprop="description">{{ description_pseudo }}</p>
					{% elseif item == 'date' %}
						<h6 class="date">{{time_tag}}</h6>
					{% elseif item == 'filename' %}
						<span class="gallery-filename">{{ name_no_ext }}</span>
					{% elseif item == 'filename_ext' %}
						<span class="gallery-filename_ext">{{ image.file_name }}</span>
					{% elseif item == 'maplink' and geo %}
						{{ map_embed_button_item }}
					{% elseif item == 'preview' %}
						{{ figure }}
					{% endif %}
				{% endfor %}

			{# Layouts that only support preview #}
			{% else %}
				{{ figure }}
			{% endif %}

		{% endif %}

		</{{link_tag}}>

		{# horizontal rule #}
		{% if not loop.last and settings.layout == "vertical" and settings.vertical.horizontal_rule %}
			<hr class="hr">
		{% endif %}

		{{ li_close }}

	{% endset %}

	{# Filter landscape/portrait aspects #}
	{% if 'landscape' in module_classes or 'portrait' in module_classes %}
		{% if 'landscape' in module_classes and image.width > image.height %}
			{{ item }}
		{% elseif 'portrait' in module_classes and image.height > image.width %}
			{{ item }}
		{% endif %}
	{% else %}
		{{ item }}
	{% endif %}

{% endif %}
{% endfor %}

{# grid end #}
{{ ul_close }}

{# Video include BOTTOM #}
{% if gallery_videos|length > 0 and 'hide-video' not in settings.classes and 'video-bottom' in settings.classes %}
	{% if gallery_images|length > 0 %}<hr>{% endif %}
	{% include 'partials/module.video.html' %}
{% endif %}
