{% extends "base.twig" %}

{% import "macros/macro.section_1.twig" as section_1 %}
{% import "macros/macro.section_2.twig" as section_2 %}
{% import "macros/macro.section_3.twig" as section_3 %}
{% import "macros/macro.section_4.twig" as section_4 %}
{% import "macros/macro.section_5.twig" as section_5 %}

{% block home_tabs %}
    <div class="m-home-tabs">
    <div class="m-introduction">
	<div class="m-introduction__whitespace"></div>
	<div class="m-introduction__text">
	    {{ post.meta('home_introduction_text') }}
	</div>
    </div>
    
    <div class="m-home-tabs__wrapper">
	<div class="m-home-tabs__item" style="background-image: url('/uploads/Home1.jpg');background-position: 10% 50%;">
	    <div class="m-home-tabs__text__wrapper">
		<div class="m-home-tabs__text">Discover <br/>Kings Hill</div>
	    </div>
	    
	    <div class="m-home-tabs__menu">
		<div class="m-home-tabs__menu__item"><a href="/arts-culture/">ARTS & CULTURE</a></div>
		<div class="m-home-tabs__menu__item"><a href="/sculpture/">SCULPTURE</a></div>
		<div class="m-home-tabs__menu__item"><a href="h/parks-open-spaces/">PARKS AND OPEN SPACES</a></div>
		
	    </div>
	</div>
	<div class="m-home-tabs__item" style="background-image: url('/uploads/Home2.jpg');background-position: 80% 10%;">
	    <div class="m-home-tabs__text__wrapper">
		<div class="m-home-tabs__text">Live in <br/> Kings Hill</div>
	    </div>
	    <div class="m-home-tabs__menu">
		<div class="m-home-tabs__menu__item"><a href="/live/">LOCAL & SOCIAL</a></div>
		<div class="m-home-tabs__menu__item"><a href="/community/">COMMUNITY</a></div>
		<div class="m-home-tabs__menu__item"><a href="/schools/">SCHOOLS</a></div>
		<div class="m-home-tabs__menu__item"><a href="/allotments/">ALLOTMENTS</a></div>
		<div class="m-home-tabs__menu__item"><a href="/homes-for-sale/">NEW HOMES FOR SALE</a></div>
	    </div>
	</div>
	<div class="m-home-tabs__item" style="background-image: url('/uploads/Home3.jpg');background-position: 35% 10%;">
	    <div class="m-home-tabs__text__wrapper">
		<div class="m-home-tabs__text">Work in <br/>Kings Hill</div>
	    </div>
	    <div class="m-home-tabs__menu">
	    <div class="m-home-tabs__menu__item"><a href="/work/">WORK IN KINGS HILL</a></div>
		<div class="m-home-tabs__menu__item"><a href="/office-space-to-let/">OFFICE SPACE TO LET</a></div>
		<div class="m-home-tabs__menu__item"><a href="/office-art-exhibitions/">OFFICE ART EXHIBITIONS</a></div>
		<div class="m-home-tabs__menu__item"><a href="/conferencing/">CONFERENCING</a></div>
	    </div>
	</div>
	<div class="m-home-tabs__item" style="background-image: url('/uploads/Home4.jpg');background-position: 90% 50%;">
	    <div class="m-home-tabs__text__wrapper">
		<div class="m-home-tabs__text">Eat Shop <br/>& Play</div>
	    </div>
	    <div class="m-home-tabs__menu">
		<div class="m-home-tabs__menu__item"><a href="/eat-shop-play/">SHOPPING</a></div>
		<div class="m-home-tabs__menu__item"><a href="/sports/">SPORTS AND HEALTH</a></div>
		<div class="m-home-tabs__menu__item"><a href="/eating-out/">EATING OUT</a></div>
		<div class="m-home-tabs__menu__item"><a href="/hotels/">HOTELS</a></div>
		<div class="m-home-tabs__menu__item"><a href="/events/">EVENTS</a></div>
	    </div>
	</div>
    </div>
    </div>
    
{% endblock %}

{% block content %}



    {{ section_1.get(post.meta('first_section')) }}

    {% set featured_posts = function( [ 'KingsHill\\Model\\TwigHelpers\\FeaturedPosts', 'get'], 2 ) %}

    {% if featured_posts is not empty %}
	<div class="m-home-recent">
	    <div class="m-home-recent__triangle"></div>
	    <div class="m-home-recent__divider"></div>
	    <div class="m-home-recent__title">RECENT NEWS</div>
	    <div class="m-home-recent__container">
		{% for post in featured_posts %}
		    <div class="m-home-recent__post">
			<a href="{{ post.link }}" class="m-home-recent__post-image">
			    <img class="lazyload"
				 data-src="{{ TimberImage(post.thumbnail).src }}"
				 data-srcset="{{ TimberImage(post.thumbnail).srcset() }}"
				 data-sizes="auto" />
			</a>
		    <div class="m-home-recent__post-title-wrapper">
			<a href="{{ post.link }}" class="m-home-recent__post-title"> {{ post.post_title }}</a>
		    </div>
		    <div class="m-home-recent__post-date-wrapper">
			<div class="m-home-recent__post-date"> {{ post.date('jS F Y') }} </div>
		    </div>
		    <div class="m-home-recent__post-blurb"> {{ post.get_field('frontpage_blurb') }}</div>
		    <a href="{{ post.link }}" class="m-readmore"><span>MORE</span></a>
		    </div>
		{% endfor %}
	    </div>
	</div>
    {% endif %}

    {% set slideShowId = 'm-slideshow__id__' ~ random() %}
    <div id="{{ slideShowId }}">
	<script>
	 window.lazySlideShow = window.lazySlideShow || [];
	 window.lazySlideShow.push({el: '{{ '#' ~ slideShowId }}',
				    slides: {{ function( [ 'KingsHill\\Model\\TwigHelpers\\SliderJson', 'get'], post.meta('slideshow')) }}}
	 );
	</script>
    </div>
    


   {{ section_2.get(post.meta('second_section')) }}

    {{ section_3.get(post.meta('third_section')) }}

    <!-- {{ section_4.get(post.meta('fourth_section')) }}


     <div class="m-home-banner">
	<div class="m-home-banner__title"> {{ post.meta('hero_image').text }}</div>
	<img class="lazyload"
	     data-src="{{ TimberImage(post.meta('hero_image').image).src }}"
	     data-srcset="{{ TimberImage(post.meta('hero_image').image).srcset() }}"
	     data-sizes="auto" />

	<div class="m-home-banner__button">
	    <span>
		<a href="{{ post.meta('hero_image').link_url }}">
		    {{ post.meta('hero_image').link_text }}
		</a>
	    </span>
	</div>
    </div> -->

    {{ section_5.get(post.meta('fifth_section')) }}


	<!-- instagram feed -->
	{% import "pagecontent-macros/instagram_feed.macro.twig" as instagram_feed %}
	{{ instagram_feed.get() }}<!-- instagram feed ends -->

    {% if home_popup_options.popup_enabled == 'Enabled' %}
	<div class="m-home-popup" data-toggle-name="home-popup">
	    <div class="m-home-popup__background" data-toggle-target="home-popup"></div>
	    <div class="m-home-popup__container">
		<div class="m-home-popoup__image-wrapper">
		   <img alt="" src="/content/uploads/2019/03/Layer-8-copy.png"/>	
		    <!--  <img alt="" src="/content/uploads/2021/08/yinka-apple-slice.jpg"/>	-->    
		</div>
		<div class="m-home-popup__text-container">
		    <div class="m-home-popup__close-button-wrapper" data-toggle-target="home-popup">
			CLOSE
			<div class="m-home-popup__close-button-icon"></div>
		    </div>
		    <div class="m-home-popup__text-wrapper">
			<div class="m-home-popup__title">
			    {{ home_popup_options.popup_title }}
			    
			</div>
			<div class="m-home-popup__text">
			    {{ home_popup_options.popup_text }}
			</div>
		    </div>
		</div>
	    </div>
	</div>
    {% endif %}


    
{% endblock %}