{#
 # Homepage template
 # ---------------
 #}

{% extends "layouts/_layout" %}


{% block block_seo %}

    <title>{{ entry.metaTitle }}</title>
    <meta name="description" value="{{ entry.metaDescription }}">

{% endblock %}


{% block content %}

	<section class="site-hero" style="background-image: url({{ entry.coverImage[0].getUrl('cover') }})">
		
		{% include 'partials/_header.html' %}

		<div class="site-hero-wrapper">
			
			<div class="site-hero-content">
				
				<h3 class="site-hero-tip tips">
					<span class="tips-label positive">New</span>
					<span class="tips-text">Dive into the undiscovered parts of <strong>Tokyo</strong>.</span>
				</h3>

				<h1 class="heading-1 light">{{ entry.tagline }}</h1>

				<div class="site-hero-description reading-text">{{ entry.shortDescription }}</div>

				<nav class="actions">
					<a class="button-icon secondary-color" href="{{ globalLinks.briefslink }}">
						<span class="text">Explore jobs</span>
						<svg class="icon" viewbox="0 0 7 12">
							<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
						</svg>
					</a>
					<a class="button-icon secondary-color" href="{{ url('cities') }}">
						<span class="text">Explore cities</span>
						<svg class="icon" viewbox="0 0 7 12">
							<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
						</svg>
					</a>
				</nav>

			</div>

		</div>

	</section>




	{% if entry.briefs | length %}

	<section class="block-discovery reverse">

		<div class="section-title">
			<div class="section-title-wrapper">
				<h2 class="block-left heading-3 light">Latest&nbsp;<strong>Jobs</strong></h2>

				<div class="block-right">
					<a class="link-icon light" href="{{ globalLinks.briefslink }}">
						<span class="text">Explore all</span>
						<svg class="icon" viewbox="0 0 12 8">
							<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
						</svg>	
					</a>
				</div>
			</div>
		</div>

		<div class="block-discovery-wrapper">

			<aside class="block-discovery-header">
				<h2 class="block-discovery-title heading-2 third-color"><strong>Latest</strong> Jobs</h2>
				<p class="block-discovery-description reading-text huge">Trade your skills for life-changing experiences abroad at top companies.</p>
				<a class="block-discovery-more link-icon" href="{{ globalLinks.briefslink }}" target="_blank">
					<span class="text">Explore all</span>
					<svg class="icon" viewbox="0 0 12 8">
						<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
					</svg>	
				</a>
			</aside>

			<div class="block-discovery-elements slider-discovery-reverse">
				
				<div class="block-discovery-elements-wrapper swiper-wrapper">
				
					{% for brief in entry.briefs %}

						{% if brief.briefCoverImage | length %}
							<article class="brief-component swiper-slide" style="background-image: url({{ brief.briefCoverImage[0].getUrl('square') }})">
						{% else %}
							<article class="brief-component swiper-slide">
						{% endif %}

							<span class="brief-component-label">{{ brief.company }}</span>

							{% if brief.promotionActive %}

								{% if brief.promotionStartAt and brief.promotionEndAt %}

									{% if "now"|date('Y-m-d') > brief.promotionStartAt|date('Y-m-d') and "now"|date('Y-m-d') < brief.promotionEndAt|date('Y-m-d') %}
										
										{% if brief.announcerLogo | length %}
											<div class="sponsor">
												<span class="sponsor-text">Sponsored by</span>
												<img class="sponsor-logo" src="{{ brief.announcerLogo[0].getUrl('logo') }}" alt="{{ brief.announcerName }}">
											</div>
										{% endif %}

									{% endif %}

								{% else %}

									{% if brief.announcerLogo | length %}
										<div class="sponsor">
											<span class="sponsor-text">Sponsored by</span>
											<img class="sponsor-logo" src="{{ brief.announcerLogo[0].getUrl('logo') }}" alt="{{ brief.announcerName }}">
										</div>
									{% endif %}

								{% endif %}

							{% endif %}

							<div class="brief-component-content">
									
								<span class="brief-component-continent">{{ brief.location }}</span>

								<h3 class="brief-component-title heading-3 light">{{ brief.title }}</h3>

								<a class="button-icon third-color small" href="{{ brief.siteUrl }}" target="_blank">
									<span class="text">Apply on this job</span>
									<svg class="icon" viewbox="0 0 7 12">
										<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
									</svg>
								</a>

							</div>

						</article>

					{% endfor %}

				</div>

				<span class="slider-next">
					<svg class="icon" viewbox="0 0 7 12">
						<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
					</svg>
				</span>
				<span class="slider-prev">
					<svg class="icon" viewbox="0 0 7 12">
						<use xlink:href="/assets/icons/icons.svg#chevron-left"></use>
					</svg>
				</span>

			</div>	

		</div>

		<div class="slider-navigation third-color">
			<div class="slider-navigation-wrapper"></div>
		</div>

	</section>

	{% endif %}




	{% if entry.cities | length %}

	<section class="block-discovery">

		<div class="section-title">
			<div class="section-title-wrapper">
				<h2 class="block-left heading-3 light">Featured&nbsp;<strong>Cityguides</strong></h2>

				<div class="block-right">
					<a class="link-icon light" href="{{ url('cities') }}">
						<span class="text">Explore all</span>
						<svg class="icon" viewbox="0 0 12 8">
							<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
						</svg>	
					</a>
				</div>
			</div>
		</div>

		<div class="block-discovery-wrapper">

			<aside class="block-discovery-header">
				<h2 class="block-discovery-title heading-2 secondary-color"><strong>Top</strong> Cities</h2>
				<p class="block-discovery-description reading-text huge">The ultimate guide for travelling freelancers, entrepreneurs and digital nomads.</p>
				<a class="block-discovery-more link-icon" href="{{ url('cities') }}">
					<span class="text">Explore all</span>
					<svg class="icon" viewbox="0 0 12 8">
						<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
					</svg>	
				</a>
			</aside>

			<div class="block-discovery-elements slider-discovery">
				
				<div class="block-discovery-elements-wrapper swiper-wrapper">

					{% for city in entry.cities %}

						{% if city.cityCoverImage | length %}
							<article class="city-component swiper-slide" style="background-image: url({{ city.cityCoverImage[0].getUrl('square') }})">
						{% else %}
							<article class="city-component swiper-slide">
						{% endif %}

							{% if city.promotionActive %}

								{% if city.promotionStartAt and city.promotionEndAt %}

									{% if "now"|date('Y-m-d') > city.promotionStartAt|date('Y-m-d') and "now"|date('Y-m-d') < city.promotionEndAt|date('Y-m-d') %}
										
										{% if city.announcerLogo | length %}
											<div class="sponsor">
												<span class="sponsor-text">In collaboration with</span>
												<img class="sponsor-logo" src="{{ city.announcerLogo[0].getUrl('logo') }}" alt="{{ city.announcerName }}">
											</div>
										{% endif %}

									{% endif %}

								{% else %}

									{% if city.announcerLogo | length %}
										<div class="sponsor">
											<span class="sponsor-text">In collaboration with</span>
											<img class="sponsor-logo" src="{{ city.announcerLogo[0].getUrl('logo') }}" alt="{{ city.announcerName }}">
										</div>
									{% endif %}

								{% endif %}

							{% endif %}

							<div class="city-component-content">
									
								<span class="city-component-continent">{{ city.continent }}</span>

								<h3 class="city-component-title heading-3 light">{{ city.title }}</h3>

								<a class="button-icon secondary-color small" href="{{ city.url }}">
									<span class="text">Visit guide</span>
									<svg class="icon" viewbox="0 0 7 12">
										<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
									</svg>
								</a>

							</div>

						</article>

					{% endfor %}

				</div>

				<span class="slider-next">
					<svg class="icon" viewbox="0 0 7 12">
						<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
					</svg>
				</span>
				<span class="slider-prev">
					<svg class="icon" viewbox="0 0 7 12">
						<use xlink:href="/assets/icons/icons.svg#chevron-left"></use>
					</svg>
				</span>

			</div>	

		</div>

		<div class="slider-navigation secondary-color">
			<div class="slider-navigation-wrapper"></div>
		</div>

	</section>

	{% endif %}






	{% if entry.featuredCity | length %}

		{% if entry.featuredCity[0].cityCoverImage | length %}
			<article class="block-featured-city" style="background-image: url({{ entry.featuredCity[0].cityCoverImage[0].getUrl('cover') }})">
		{% else %}
			<article class="block-featured-city">
		{% endif %}
			<div class="block-featured-city-wrapper">
			
				<h3 class="block-featured-city-title heading-1 light">{{ entry.featuredCity[0].title }}</h3>

				{% if entry.featuredCity[0].quote %}
					<div class="quote light">
						<p class="quote-text">{{ entry.featuredCity[0].quote }}</p>
                        <div class="quote-author">
                            <img class="quote-author-avatar" src="{{ entry.featuredCity[0].authorUser[0].avatar[0].getUrl('square') }}">
                            <a class="quote-author-name" href="{{ entry.featuredCity[0].authorUser[0].siteUrl }}">{{ entry.featuredCity[0].authorUser[0].title }}</a>
                        </div>
					</div>
				{% endif %}

				<a class="button-icon secondary-color small" href="{{ entry.featuredCity[0].url }}">
					<span class="text">Visit guide</span>
					<svg class="icon" viewbox="0 0 7 12">
						<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
					</svg>
				</a>
			
				{% if entry.featuredCity[0].promotionActive %}

					{% if entry.featuredCity[0].promotionStartAt and entry.featuredCity[0].promotionEndAt %}

						{% if "now"|date('Y-m-d') > entry.featuredCity[0].promotionStartAt|date('Y-m-d') and "now"|date('Y-m-d') < entry.featuredCity[0].promotionEndAt|date('Y-m-d') %}
						
							<div class="sponsor inline">
								<span class="sponsor-text">In collaboration with</span>
								<img class="sponsor-logo" src="{{ entry.featuredCity[0].announcerLogo[0].getUrl('logo') }}" alt="{{ entry.featuredCity[0].announcerName }}">
							</div>

						{% endif %}

					{% else %}

						<div class="sponsor inline">
							<span class="sponsor-text">In collaboration with</span>
							<img class="sponsor-logo" src="{{ entry.featuredCity[0].announcerLogo[0].getUrl('logo') }}" alt="{{ entry.featuredCity[0].announcerName }}">
						</div>

					{% endif %}

				{% endif %}

			</div>				
		
		    <aside class="block-stats centered">
		        <div class="block-stats-wrapper">
		            <div class="block-stats-content">

		                <div class="block-left">
		                    {% if entry.featuredCity[0].lat and entry.featuredCity[0].lng %}

		                        {% set weather = craft.weather.findByGeo(entry.featuredCity[0].lat, entry.featuredCity[0].lng) %}

		                        {% if weather['icon'] %}
		                        
		                            <article class="weather-component light">
		                                <div class="weather-component-number weather">
		                                    <span class="icon weather-component-icon weather-component-icon-{{ weather['icon'] }}"></span>
		                                    <span class="temperature">{{ round(weather['temperature']) }}&deg;C</span>
		                                </div>
		                                <h5 class="weather-component-title heading-5">Weather</h5>
		                            </article>

		                        {% endif %}

		                    {% endif %}

		                    {% cache for 1 month %}

		                        {% if entry.featuredCity[0].internetSpeed %}

		                            <article class="stat-component light">
		                                <div class="stat-component-number">
		                                    {{ entry.featuredCity[0].internetSpeed }}<span class="pourcentage">Mbps</span>
		                                </div>
		                                <h5 class="stat-component-title heading-5">Internet Speed</h5>
		                            </article>
		                            
		                        {% endif %}
		
		                        {% if entry.featuredCity[0].communityPourcentage and entry.featuredCity[0].communityStatus %}
		                            <article class="stat-component light">
		                                <div class="stat-component-number with-status">
		                                    {{ entry.featuredCity[0].communityPourcentage }}<span class="pourcentage">%</span>
		                                    {% if entry.featuredCity[0].communityStatus == 'decreasing' %}
		                                    <svg class="rate" viewbox="0 0 12 8">
		                                        <use xlink:href="/assets/icons/icons.svg#fall"></use>
		                                    </svg> 
		                                    {% else %}
		                                    <svg class="rate" viewbox="0 0 12 8">
		                                        <use xlink:href="/assets/icons/icons.svg#rise"></use>
		                                    </svg> 
		                                    {% endif %}
		                                </div>
		                                <h5 class="stat-component-title heading-5">Wanderbriefers</h5>
		                            </article>
		                        {% endif %}

		                    {% endcache %}
		                </div>
		            </div>
		        </div>
		        <div class="icon-slide">
		            <svg class="icon" viewbox="0 0 49 19">
		                <use xlink:href="/assets/icons/icons.svg#slide"></use>
		            </svg>
		        </div>
		    </aside>

		</article>

	{% endif %}






	{% if entry.places | length %}

	<section class="block-discovery reverse">

		<div class="block-discovery-wrapper">

			<aside class="block-discovery-header">
				<h2 class="block-discovery-title heading-2 third-color"><strong>Top</strong> Places</h2>
				<p class="block-discovery-description reading-text huge">A curated overview so you won’t miss out on the best places these cities have to offer.</p>
				<a class="block-discovery-more link-icon" href="{{ url('places') }}">
					<span class="text">Explore all</span>
					<svg class="icon" viewbox="0 0 12 8">
						<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
					</svg>	
				</a>
			</aside>

			<div class="block-discovery-elements slider-discovery-reverse">
				
				<div class="block-discovery-elements-wrapper swiper-wrapper">
				
					{% for place in entry.places %}

						{% if place.placeImages | length %}
							<article class="place-component swiper-slide" style="background-image: url({{ place.placeImages[0].getUrl('square') }})">
						{% else %}
							<article class="place-component swiper-slide">
						{% endif %}

							<span class="place-component-label">{{ place.placeType }}</span>

							{% if place.promotionActive %}

								{% if place.promotionStartAt and place.promotionEndAt %}

									{% if "now"|date('Y-m-d') > place.promotionStartAt|date('Y-m-d') and "now"|date('Y-m-d') < place.promotionEndAt|date('Y-m-d') %}
										
										{% if place.announcerLogo | length %}
											<div class="sponsor">
												<span class="sponsor-text">Sponsored by</span>
												<img class="sponsor-logo" src="{{ place.announcerLogo[0].getUrl('logo') }}" alt="{{ place.announcerName }}">
											</div>
										{% endif %}

									{% endif %}

								{% else %}

									{% if place.announcerLogo | length %}
										<div class="sponsor">
											<span class="sponsor-text">Sponsored by</span>
											<img class="sponsor-logo" src="{{ place.announcerLogo[0].getUrl('logo') }}" alt="{{ place.announcerName }}">
										</div>
									{% endif %}

								{% endif %}

							{% endif %}

							<div class="place-component-content">
									
								<div class="place-component-rating">
									<svg class="icon" viewbox="0 0 17 16">
										<use xlink:href="/assets/icons/icons.svg#star"></use>
									</svg>
									<span>&nbsp;{{ place.rating }}</span>
								</div>

								<h3 class="place-component-title heading-3 light">{{ place.title }}</h3>

								<a class="button-icon third-color small" href="{{ place.url }}">
									<span class="text">See details</span>
									<svg class="icon" viewbox="0 0 7 12">
										<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
									</svg>
								</a>

							</div>

						</article>

					{% endfor %}

				</div>

				<span class="slider-next">
					<svg class="icon" viewbox="0 0 7 12">
						<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
					</svg>
				</span>
				<span class="slider-prev">
					<svg class="icon" viewbox="0 0 7 12">
						<use xlink:href="/assets/icons/icons.svg#chevron-left"></use>
					</svg>
				</span>

			</div>	

		</div>

		<div class="slider-navigation third-color">
			<div class="slider-navigation-wrapper"></div>
		</div>

	</section>

	{% endif %}



	{% if entry.featuredGear | length %}

	<section class="block-popular">
		
		<div class="section-title">
			<div class="section-title-wrapper">
				<h2 class="block-left heading-3 light"><strong>Essentials</strong>&nbsp;of {{ entry.featuredGear[0].dateFrom |date("F") }}</h2>

				<div class="block-right">
					<a class="link-icon light" href="{{ homepage.featuredGear[0].url }}">
						<span class="text">See selection</span>
						<svg class="icon" viewbox="0 0 12 8">
							<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
						</svg>	
					</a>
				</div>
			</div>
		</div>

		{% if entry.featuredGear[0].gearCover | length %}
			<div class="block-popular-featured gear-component" style="background-image: url({{ entry.featuredGear[0].gearCover[0].getUrl('cover') }})">
		{% else %}
			<div class="block-popular-featured gear-component">
		{% endif %}

			<div class="block-popular-featured-wrapper gear-component-content">

				<h3 class="gear-component-title heading-2 light">Wanderbrief <strong>Essentials</strong></h3>
				
				<p class="block-popular-featured-description reading-text margin">Every month the most inspiring freelancers, entrepreneurs and digital nomads share their essentials to help you conquer the world.</p>

				<a class="button-icon secondary-color small" href="{{ entry.featuredGear[0].url }}">
					<span class="text">{{ entry.featuredGear[0].dateFrom |date("F Y") }} selection</span>
					<svg class="icon" viewbox="0 0 7 12">
						<use xlink:href="/assets/icons/icons.svg#chevron-right"></use>
					</svg>
				</a>
			</div>				
		</div>

	</section>

	{% endif %}





	{% include 'partials/_community.html' %}



{% endblock %}