{% assign id = include.map-id %}
{% assign data = site.data.maps-vector[id] %}
{% assign color = include.color | default: data.color | default: 'green' %}

{% if data %}
	{% if jekyll.environment == 'development' %}
		<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
			{% include ui/svg.html width="590" height="252" ratio=true border=true %}
		</div>
	{% else %}
		<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
			<div>
				<div id="map-{{ id }}" class="w-100 h-100"></div>
			</div>
		</div>

		{% capture script %}
		<script>
			// @formatter:on
			{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}

			document.addEventListener("DOMContentLoaded", function() {
				const map = {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
					selector: '#map-{{ id }}',
					map: '{{ data.map }}',
					backgroundColor: 'transparent',
					regionStyle: {
						initial: {
							{% unless data.filled %}
							fill: tabler.getColor('body-bg'),
							stroke: tabler.getColor('border-color'),
							strokeWidth: 2,
							{% else %}
							fill: tabler.getColor('body-bg'),
							stroke: '#fff',
							strokeWidth: 1,
							{% endunless %}
						}
					},
					zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
					zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
					{% if data.values %}
					// -------- Series --------
					visualizeData: {
						scale: [tabler.getColor('bg-surface'), tabler.getColor('{{ data.color }}')],
						values: {{ data.values }},
					},
					{% endif %}
					{% if data.markers %}
					markers: [
						{% for marker in data.markers %}
						{
							coords: [{{ marker.coords }}],
							name: "{{ marker.name }}",
						},
						{% endfor %}
					],
					markerStyle: {
						initial: {
							r: 4,
							stroke: '#fff',
							opacity: 1,
							strokeWidth: 3,
							stokeOpacity: .5,
							fill: tabler.getColor('{{ color }}')
						},
						hover: {
							fill: tabler.getColor('{{ color }}'),
							stroke: tabler.getColor('{{ color }}')
						}
					},
					markerLabelStyle: {
						initial: {
							fontSize: 10
						},
					},
					labels: {
						markers: {
							render: function(marker) {
								return marker.name
							},
						},
					},
					{% endif %}
					{% if data.lines %}
					lines: [
						{% for line in data.lines %}
						{
							from: "{{ line.from }}",
							to: "{{ line.to }}"
						},
						{% endfor %}
					],
					lineStyle: {
						strokeDasharray:"4 4",
						animation: true,
						stroke: "rgba(98, 105, 118, .75)",
						strokeWidth: .5,
					},
					{% endif %}
				});

				window.addEventListener("resize", () => {
					map.updateSize();
				});
			});
			// @formatter:off
		</script>
		{% endcapture %}

		{% if include.show-scripts %}
			{{ script }}
		{% else %}
			{% capture_global scripts %}
				{{ script }}
			{% endcapture_global %}
		{% endif %}
	{% endif %}
{% endif %}