<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
	  xmlns:map="http://typo3.org/ns/WSR/Myttaddressmap/ViewHelpers"
	  xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
	  data-namespace-typo3-fluid="true">


<f:layout name="Default" />

This Template is responsible for displaying a single view for a domain object

If you modify this template, do not forget to change the overwrite settings
in /Configuration/ExtensionBuilder/settings.yaml:
  Resources:
    Private:
      Templates:
        Show.html: keep

Otherwise your changes will be overwritten the next time you save the extension in the extension builder

<f:section name="main">




	<f:flashMessages />


	<f:for each="{location.images}" as="image">
		<f:image src="fileadmin/{image.originalResource.originalFile.identifier}"
			 title="{image.originalResource.title}"
			 alt="{image.originalResource.title}" />
	{image.originalResource.description}
	</f:for>



	<div id="a{location.uid}" class="panel panel-address panel-address--detailed" itemscope="" itemtype="http://schema.org/LocalBusiness">
		<div class="panel-body">
			<div class="address-organisation" itemprop="name">{location.company -> f:format.raw()}</div>
			<div class="address-fullname" itemprop="founder" itemscope="" itemtype="http://schema.org/Person">
				<span class="address-title" itemprop="jobTitle">{location.title}</span>
				<span class="address-name" itemprop="name">{location.name}</span>
			</div>
			<f:if condition="{location.description}">
			<div class="address-fullname" itemprop="founder" itemscope="" itemtype="http://schema.org/Person">
				<span class="address-name" itemprop="name">{location.description}</span>
			</div>
			</f:if>
			<div class="address-outer" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress" data-geolat="{location.latitude}" data-geolng="{location.longitude}">
				<span class="address-street" itemprop="streetAddress">{location.address}</span><br>
				<span class="address-zip" itemprop="postalCode">{f:if(condition: '{location.country} == "AT"', then: 'A-')}{location.zip}</span>
				<span class="address-locality" itemprop="addressLocality">{location.city}</span> <span class="address-country sr-only">{location.country}</span><br>
			</div>
			<a href="tel:{location.phone}" class="address-telephone" itemprop="telephone">{location.phone}</a>
			<f:if condition="{location.email}">
				<a href="" class="address-email" itemprop="email">{location.email}</a>
			</f:if>
			<f:if condition="{location.www}">
				<a href="http://{location.www}" target="_blank" class="address-website" itemprop="url" rel=”noopener noreferrer”>{location.www}</a>
			</f:if>


		</div>
	</div>
		<p>
		<a class="btn btn-primary" onclick="window.history.back();">Zurück zur Ergebnisliste</a>
		</p>



	<!-- get the map javascript -->

	<f:if condition="{settings.googleBrowserApiKey} > ''">
		<f:then>
			<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&libraries=places&key={settings.googleBrowserApiKey}"></script>
		</f:then>
		<f:else>
			<div class="typo3-message message-warning">Please insert a Google maps browser API key with the constant editor first!</div>
			<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&libraries=places"></script>
		</f:else>
	</f:if>


	<f:format.raw>
		<map:mapShowJS location="{location}" city="{location.storename}" settings="{settings}"/>
	</f:format.raw>

	<f:comment>
	<!-- here comes the google map -->
	<div id="mapContainer" style="width: 100%; height: 100%;">
		<div id="map" style="width: 400px; height: 300px;"></div>
	</div>
	</f:comment>
	<script type="text/javascript">
	load();
	</script>

	<!-- Google infoWindow -->

	<script type="text/javascript">

		var address = '<f:format.urlencode>{location.company}, {location.address}, {location.zip} {location.city}</f:format.urlencode>';

		var info = '<div class="infoWindow">';
		info += '<a target="_blank" href="https://www.google.com/maps/dir/?api=1&destination='+address+'">Anfahrt auf Google Maps anzeigen</a>';
		info += '</div>';



		infoWindow[0] = new google.maps.InfoWindow({
		  content: info
		});
		google.maps.event.addListener(marker[0], 'click', function() {
			infoWindow[0].open(map,marker[0]);
		});

	</script>


	<!-- responsive map -->
	<script type="text/javascript">
		function resizeMap() {
			var mapContainerWidth = $('#mapContainer').width();
			var mapContainerHeight = $('#mapContainer').height();
			$('#map').width(mapContainerWidth - 30);
			$('#map').height(mapContainerWidth/4*3);
			google.maps.event.trigger($('#map'), 'resize');
			console.log(mapContainerWidth);

		}
		$(window).resize(resizeMap);

		resizeMap();
	</script>


</f:section>
</html>
