{#
/**
 * @file
 * Template for Google Map with View.
 *
 * Available variables:
 * - google_map: The Google Map render array.
 * - view_content: The View render array.
 * - pc_position: Position of map on PC (top/bottom/left/right).
 * - sp_position: Position of map on SP (top/bottom).
 */
#}
<div class="google-map-with-view-container" data-pc-position="{{ pc_position }}" data-sp-position="{{ sp_position }}">
	<div class="responsive-layout pc-{{ pc_position }} sp-{{ sp_position }}{% if show_autocomplete %}} has-autocomplete autocomplete-{{ autocomplete_position }}{% endif %}">
		<div class="google-map-wrapper">
		{% if show_autocomplete and autocomplete_position == 'map' %}
			<div class="autocomplete-wrapper form-container form-item">
				<label for="autocomplete">{{ autocomplete_label }}</label>
				<gmp-place-autocomplete
						id="autocomplete"
						placeholder="{{ autocomplete_placeholder }}"
						type="establishment,geocode">
				</gmp-place-autocomplete>
			</div>
		{% endif %}
			{{ google_map }}
		</div>
		<div class="view-content-wrapper">
			{% if show_autocomplete and autocomplete_position == 'top' %}
				<div class="autocomplete-wrapper form-container">
				<label for="autocomplete">{{ autocomplete_label }}</label>
					<gmp-place-autocomplete
						id="autocomplete"
						placeholder="{{ autocomplete_placeholder }}"
						type="establishment,geocode">
				</gmp-place-autocomplete>
				</div>
			{% endif %}
		  <div id="location-view" class="view-content">
				{{ view_content }}
			</div>
		</div>
	</div>
</div>
