% if ($origin and $destination) {
	<div class="container" style="margin-top: 1ex; margin-bottom: 1ex;">
	Fahrt
	% if (stash('train_no')) {
		<strong><%= stash('train_no') %></strong>
	% }
	von <strong><%= $origin->{name} %></strong>
	nach <strong><%= $destination->{name} %></strong>
	% if (my $next = stash('next_stop')) {
		<br/>
		% if ($next->{type} eq 'present' and $next->{station}{dep} and $next->{station}{arr}) {
			Aufenthalt in <strong><%= $next->{station}{name} %></strong>
			an Gleis <strong><%= $next->{station}{platform} %></strong>
			bis <strong><%= $next->{station}{dep}->strftime('%H:%M') %></strong>
			% if ($next->{station}{dep_delay}) {
				%= sprintf('(%+d)', $next->{station}{dep_delay})
			% }
		% }
		% elsif ($next->{type} eq 'present' and $next->{station}{dep}) {
			Abfahrt in <strong><%= $next->{station}{name} %></strong>
			von Gleis <strong><%= $next->{station}{platform} %></strong>
			um <strong><%= $next->{station}{dep}->strftime('%H:%M') %></strong>
			% if ($next->{station}{dep_delay}) {
				%= sprintf('(%+d)', $next->{station}{dep_delay})
			% }
		% }
		% elsif ($next->{type} eq 'present' and $next->{station}{arr}) {
			Endstation erreicht um
			<strong><%= $next->{station}{arr}->strftime('%H:%M') %></strong>
			auf Gleis <strong><%= $next->{station}{platform} %></strong>
			% if ($next->{station}{arr_delay}) {
				%= sprintf('(%+d)', $next->{station}{arr_delay})
			% }
		% }
		% elsif ($next->{type} eq 'present') {
			Zug steht in
			<strong><%= $next->{station}{arr}->strftime('%H:%M') %></strong>
			auf Gleis <strong><%= $next->{station}{platform} %></strong>
		% }
		% elsif ($next->{type} eq 'next' and $next->{station}{arr}) {
			Nächster Halt:
			<strong><%= $next->{station}{name} %></strong>
			um <strong><%= $next->{station}{arr}->strftime('%H:%M') %></strong>
			% if ($next->{station}{arr_delay}) {
				%= sprintf('(%+d)', $next->{station}{arr_delay})
			% }
			auf Gleis <strong><%= $next->{station}{platform} %></strong>
		% }
		% elsif ($next->{type} eq 'next') {
			Nächster Halt:
			<strong><%= $next->{station}{name} %></strong>
			auf Gleis <strong><%= $next->{station}{platform} %></strong>
		% }
	% }
	</div>
% }

<div class="container">
		<div id="map" style="height: 500px;">
		</div>
	</div>

<script>
var map = L.map('map').setView([51.306, 9.712], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var stations = [
% for my $station ( @{stash('station_coordinates') // [] } ) {
[[<%= $station->[0][0] %>,<%= $station->[0][1] %>],['<%== join("','", map { Mojo::Util::xml_escape($_) } @{$station->[1]}) %>']],
% }
];

var routes = [];
var pl;
% for my $line_group ( @{ stash('polyline_groups') // [] } ) {
	routes = [
		% for my $pair ( @{$line_group->{polylines} // []} ) {
			[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]],
		% }
	];
	pl = L.polyline(routes, {color: '<%= $line_group->{color} %>', opacity: <%= $line_group->{opacity} %>}).addTo(map);
	% if ($line_group->{fit_bounds}) {
		if (routes.length) {
			map.fitBounds(pl.getBounds());
		}
	% }
% }

for (var station_id in stations) {
	L.circle(stations[station_id][0], {
		color: '#f03',
		opacity: 0.7,
		fillColor: '#f03',
		fillOpacity: 0.5,
		radius: 250
	}).bindPopup(stations[station_id][1].join('<br/>')).addTo(map);
}

var greenIcon = new L.Icon({
  iconUrl: '/static/leaflet/images/marker-icon-2x-green.png',
  shadowUrl: '/static/leaflet/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

var goldIcon = new L.Icon({
  iconUrl: '/static/leaflet/images/marker-icon-2x-gold.png',
  shadowUrl: '/static/leaflet/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

var marker;
% for my $marker (@{stash('markers') // [] } ) {
	% if ($marker->{icon}) {
		marker = L.marker([<%= $marker->{lat} %>,<%= $marker->{lon} %>], {icon: <%= $marker->{icon} %>}).addTo(map);
	% }
	% else {
		marker = L.marker([<%= $marker->{lat} %>,<%= $marker->{lon} %>]).addTo(map);
	% }
	% if ($marker->{title}) {
		marker.bindPopup('<%= $marker->{title} %>');
	% }
% }

</script>

<div class="container" style="margin-top: 1ex; margin-bottom: 1ex; color: #555;">
Die Zugposition auf der Karte ist eine Schätzung und kann erheblich von der
tatsächlichen Position des Zugs abweichen.
Live-Tracking mit automatischer Kartenaktualisierung wird noch nicht
unterstützt.
</div>

% if (my $op = stash('operator')) {
<div class="container" style="margin-top: 1ex; margin-bottom: 1ex; color: #555;">
Betrieb: <%= $op %>
</div>
% }