{# vars #}
{% set image_page = page.permalink|setpath(rootpath)|e('html') %}
{% set preview_image_url = assetspath ~ preview_image|trim('.') %}
{% set image_ratio = (myimage.height/myimage.width * 100) %}
{% set date = myimage.exif["date_taken"] %}



{# Image nav #}
{% if parent and parent.images and parent.images|length > 1 %}
	{% set parent_images = sortby(parent.images, parent.gallery.sortby, (parent.gallery.sort == 'desc' ? true : false)) %}



	{% set siblings = get_sibling_landing_pages(parent_images, myimage) %}


	{% if siblings is not empty %}
	<div class="pagenav pagenav-static">

		{# previous #}
		{% set url = '../' ~ getSibling(siblings[0].file_name|removeExtension) ~ '/' %}
			<a href="{{ url }}" class="pagenav-link pagenav-prev"><span class="pagenav-text">{{ siblings[0].title|default(siblings[0].name) }}</span></a>

		{# next #}
		{% set url = '../' ~ getSibling(siblings[1].file_name|removeExtension) ~ '/' %}
		<a href="{{ url }}" class="pagenav-link pagenav-next"><span class="pagenav-text">{{ siblings[1].title|default(siblings[1].name) }}</span></a>
	</div>
	{% endif %}
{% endif %}


{# Fotomoto #}
{% set fotomoto = '' %}
{% set fotomoto_collection = '' %}
{% if settings.plugins.fotomoto.enabled and settings.plugins.fotomoto.store_id and settings.plugins.fotomoto.enabled_page %}
	{% if settings.plugins.fotomoto.buy_button %}
		{% set fotomoto = ' file-fotomoto file-fotomoto-buybutton' %}
	{% else %}
		{% set fotomoto = ' file-fotomoto' %}
	{% endif %}
	{% if settings.plugins.fotomoto.collection|trim %}
		{% set fotomoto_collection = ' data-fotomoto-collection="' ~ settings.plugins.fotomoto.collection|trim ~ '"' %}
	{% endif %}
{% endif %}

{# EXIF and GEO #}
{% set data_exif = '' %}
{% set meta = '' %}
{% set data_geo = '' %}
{% if myimage.exif %}

	{# caption and meta EXIF #}
	{% if settings.popup.caption.exif %}
		{% set exif_items = settings.popup.caption.exif_items|split(',') %}
		{% if exif_items|length > 0 %}

			{% set exif_array = [] %}
			{% for key in exif_items if myimage.exif[key] %}
		    {% set exif_array = exif_array|merge({ (key): myimage.exif[key] }) %}
		    {% set meta = meta ~ '<div class="row file-exif-' ~ key ~ '"><div class="small-6 columns file-exif-key"><span>' ~ key|title|replace({'_':' '}) ~ '</span></div><div class="small-6 columns file-exif-value styled">' ~ myimage.exif[key] ~ '</div></div>' %}
			{% endfor %}
			{% if exif_array|length %}{% set data_exif = ' data-exif="' ~ exif_array|json_encode()|e('html_attr') ~ '"' %}{% endif %}

		{% endif %}
	{% endif %}

	{# caption map button #}
	{% if myimage.exif.latitude and myimage.exif.longitude %}
		{% set geo = myimage.exif.latitude ~ ',' ~ myimage.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>' %}
		{% if settings.popup.caption.map %}{% set data_geo = ' data-geo="' ~ geo ~ '"' %}{% endif %}
	{% endif %}
{% endif %}

{# replace geo links in title and description #}
{% if geo %}
	{% set page_title = page_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}) %}
	{% if image_description is not empty %}
		{% set image_description = image_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 %}
{% endif %}

{# File template #}
<div class="module row file gallery{{ fotomoto }}"{{fotomoto_collection}}>
  <div data-options="caption:" class="images clearfix context small-12 medium-10 large-8 small-centered columns narrower text-center frame{% if page.popup.enabled == true %} x3-hover-icon-primary{% endif %}">

  {# Comments icon with comments count #}
  <h1 class="title">{{ page_title }}</h1>
  {% if image_description is not empty %}<h2 class="subheader">{{ image_description }}</h2>{% endif %}
  {% if date is not empty %}<h6 class="date"><time itemprop="dateCreated" datetime="{{ date|date('c') }}">{{ date|date('d F Y') }}</time></h6>{% endif %}

  {# close (back) button #}
	{#<a href="{{ (page.permalink|dirname|replace({' ':'_'}) ~ '/')|e|setpath(rootpath)|replace({'/.':'/'}) }}" class="file-back"></a>#}
	<a href="../" class="file-back"></a>

	{# Image element #}
	<div class="gallery">
		<a class="item img-link item-link{% if page.popup.enabled == true %} x3-popup{% endif %}"{{ data_exif }}{{ data_geo }} id="image-{{ page.slug|attribute_friendly|default('1') }}" data-width="{{ myimage.width }}" data-height="{{ myimage.height }}" href="{{ image_page }}" data-image="{{ preview_image_url|e }}" data-title="{{ page_title|e('html') }}" data-description="{{ image_description|e('html') }}" data-date="{{ date|default(myimage.date)|date("d F Y") }}">
			<figure>
				<div class="image-container" style="padding-bottom:{{ image_ratio }}%;">
					<img data-src="{{ preview_image_url|e }}{{ page.settings.image_cachebuster ? '?' ~ myimage.date : '' }}" alt="{{ page_title|striptags|e }}">
				</div>
			</figure>
		</a>
	</div>

	{# EXIF #}
	{% if meta %}<div class="file-exif">{{ meta }}</div>{% endif %}

	{# Disqus comments? #}
	{% if page.accounts.disqus_shortname and page.plugins.disqus.image %}
		<hr>
		{% include 'partials/module.disqus.html' %}
	{% endif %}

	</div>
</div>