{% extends "base.twig" %}

{% block content %}
    <div class="content-wrapper">

	{% if post.meta('layer_list') %}
	    <link rel="stylesheet" href="/content/themes/kings_hill/static/css/map.css">
	    {% if user %}
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
	    {% endif %}

	    <div class="m-map">    
		<div class="m-map__sidebar">

		    <div class="m-map__sidebar-wrapper">
			<div class="m-map__title"> Kings hill</div>

			<div class="m-map__selection-title"> Choose a category: </div>

			<select id="m-map__select"></select>
			<div class="m-map__instructions"> Select a category from the drop down list, rollover the highlighted area, click for more information
<p style="font-size:12px; margin-top:30px"><em>This content is subject to our terms of use, is for indicative purposes only and we may change or update it at any time. It has not been independently verified and we cannot guarantee its accuracy. You should not rely on it for any purpose and should verify it yourself.</em>

			</div>
			<div id="m-map__map-edit"></div> 
		    </div>
		</div>
		
		<div class="m-map__map" id="m-map__map"></div>
		
		<script>
		 (function() {
		     var listener = function() {
			 window.mapInit({{ function( [ 'KingsHill\\Model\\TwigHelpers\\MapACFtoArray', 'transform'], post.meta('layer_list') ) }});
		     };
		     if (window.loggedin) {
			 document.addEventListener("DOMContentLoaded", listener, {once: true});
		     } else {
			 document.addEventListener("turbolinks:load", listener, {once: true});
		     }
		 })()
		 
		</script>
		
	    </div>
	{% endif %}
	
	{% if post.meta('hero').image %}
	    <div class="m-content-hero">
		<div class="m-content-hero__image">
		    <img id="m-content-hero__placeholder" style="filter:blur(2px)" src="{{ function(['KingsHill\\Model\\TwigHelpers\\Base64Placeholder', 'get'], Image(post.meta('hero').image).id)}}">
		    
		    <img sizes="100vw"
			 class="lazyload"
			 src="{{ Image(post.meta('hero').image).src }}"
			 srcset="{{ Image(post.meta('hero').image).srcset() }}"
			 onload="document.getElementById('m-content-hero__placeholder').remove();" />
		</div>
		<div class="l-section l-section--after-slideshow">
		    <div class="m-section-text__wrapper {% if post.meta('hero').wide %} m-section-text__wrapper--wide {% endif %}">
			<div class="m-section-text__title m-section-text__title--after-slideshow">
			    {{ post.meta('hero').title }}
			</div>
			<div class="m-section-text__headline">
			    {{ post.meta('hero').headline }}
			</div>
			<div class="m-section-text__text m-section-text__text--black">
			    {{ post.meta('hero').text }}
			</div>
			
		    </div>
		</div>
	    </div>
	{% endif %}

	{% for item in post.meta('content') %}
	    {% if item.acf_fc_layout == 'paragraph' %}
		{% import "pagecontent-macros/paragraph.macro.twig" as paragraph %}
		{{ paragraph.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'dual_images' %}
		{% import "pagecontent-macros/dual_images.macro.twig" as dual_images %}
		{{ dual_images.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'banner' %}
		{% import "pagecontent-macros/banner.macro.twig" as banner %}
		{{ banner.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'page_schools' %}
		{% import "pagecontent-macros/schools.macro.twig" as schools %}
		{{ schools.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'columns_image_text' %}
		{% import "pagecontent-macros/columnns_image_text.macro.twig" as columnns_image_text %}
		{{ columnns_image_text.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'table' %}
		{% import "pagecontent-macros/table.macro.twig" as table %}
		{{ table.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'work_page_contact' %}
		{% import "pagecontent-macros/work_page_contact.macro.twig" as work_page_contact %}
		
		{{ work_page_contact.get(item) }}
	    {% elseif item.acf_fc_layout == 'offices_list' %}
		{% import "pagecontent-macros/office.macro.twig" as office %}
		{{ office.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'history_story' %}
		{% import "pagecontent-macros/history.macro.twig" as history %}
		{{ history.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'page-public-art' %}
		{% import "pagecontent-macros/public-art.macro.twig" as page_public_art %}
		{{ page_public_art.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'sidelabel' %}
		{% import "pagecontent-macros/sidelabel.macro.twig" as sidelabel %}
		{{ sidelabel.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'image_grid' %}
		{% import "pagecontent-macros/imagegrid.macro.twig" as imagegrid %}
		{{ imagegrid.get(item) }}
		
	    {% elseif item.acf_fc_layout == 'dualcolumn_text' %}
		{% import "pagecontent-macros/dualcolumn_text.macro.twig" as dualcolumn_text %}
		
		{{ dualcolumn_text.get(item) }}

	    {% elseif item.acf_fc_layout == 'page_exhibitions' %}
			{% import "pagecontent-macros/exhibition_list.macro.twig" as page_exhibitions %}
			{{ page_exhibitions.get(item) }}

		{% elseif item.acf_fc_layout == 'exhibition_date' %}
			{% import "pagecontent-macros/exhibition_date.macro.twig" as current_exhibition %}
			{{ current_exhibition.get(item) }}

		{% elseif item.acf_fc_layout == 'btn_previous_exhibitions' %}
			{% import "pagecontent-macros/btn_previous_exhibitions.macro.twig" as btn_previous_exhibitions %}
			{{ btn_previous_exhibitions.get() }}
		
		{% elseif item.acf_fc_layout == 'hidden_exhibitions_enabled' %}
			{% import "pagecontent-macros/hidden_exhibitions_enabled.macro.twig" as hidden_exhibitions_enabled %}
			{{ hidden_exhibitions_enabled.get() }}


		{% endif %}
		
	{% endfor %}

	{% if post.meta('related') %}
	    <div class="m-page-related">
		<div class="m-page-related__title">
		    Related
		</div>
		<div class="m-page-related__container">
		    {% for item in post.meta('related') %}

			<a class="m-page-related__item" href="{{item.link}}">
			    <img class="lazyload"
				 data-src="{{ Image(item.image).src }}"
				 data-srcset="{{ Image(item.image).srcset() }}"
				 data-sizes="auto" />

			    <div class="m-page-related__wrapper">
				<div class="m-page-related__text">
				    {{ item.text }}
				</div>
			    </div>
			</a>

			
		    {% endfor %}
		</div>
	    </div>
	{% endif %}
    </div>

    <script>
        var classname = 'm-content-exhibition-date';
        var dates = document.getElementsByClassName(classname);

        // Wait until content is loaded
        document.addEventListener('DOMContentLoaded', () => {
            
            // loop through classname
            Array.from(dates).forEach((elemenet) => {
                
                // get the next element of this class
                var nextElement = elemenet.nextElementSibling;
                
                // ... and hide the element
                nextElement.style.display = 'none';
                
                // Add event listener to toggle
                elemenet.addEventListener('click', (e) => {
                    nextElement.style.display = nextElement.style.display == 'block' ? 'none' : 'block'
                })
            })
        })

        
    </script>
	
{% endblock %}