{#
 # The following variables can be set in the inheriting template files
 #	title = string: the title of the view displayed in header strip
 #	sticky_banners = boolean: should the banners stick to the edges of the screen or flow with content
 #	localized = boolean: is this view localized using gettext (.po files)
 #	content_lang = string: if localized is false this should be the language code for the view 
 #}

{%- import 'internal/macros.html' as util with context -%}

{%- set localized = localized | default(true) -%}
{%- set content_lang = content_lang | default('en') -%}

<!doctype html>
<html lang="{% if localized %}{{ g.lang_code }}{% else %}{{ content_lang }}{% endif %}">
	<head>
		{% block head %}
		<title>{% block title %}Smart Bus Stop{% if title %} - {{ title }}{% endif %}{% endblock title %}</title>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" 
		integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

		<!-- FontAwesome -->
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" 
		integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

		<link rel="stylesheet" href="{{ util.static_url('css/stylesheet.css') }}">
		{% endblock head %}
	</head>
	<body{% if sticky_banners %} class="body-sticky-padding"{% endif %}>
		<div class="d-flex flex-column flex-grow">
			<header class="d-flex flex-column header {% if sticky_banners %}header-sticky{% endif %} border border-foli content-spaced-lg">
				{% block header %}
				<!-- probably just a picture that will be put as the background of this div -->
				<div class="d-none d-md-flex flex-column flex-grow dynamicContentHeader">
					<!-- empty for now, what about alerts etc.? -->
				</div>

				<!-- contains a föli logo, a header text and clock -->
				<div class="d-flex flex-row justify-content-between bg-foli contentHeader">
					<div id="foliLogo"><a href="{{ util.home_url() }}" class="sr-only">{{ _("Logo") }}</a></div>
					<h1 id="headerText">{{ title }}</h1>
					{# the data attribute and the initial value may use marginally different base time value #}
					<h1 id="headerClock" class="d-none d-sm-block" data-server-time="{{ server_time() }}">
						{{ util.time_short(server_time(isoDate = False, tz = stop_info.stop_timezone)) }}
					</h1>
				</div>
				{% endblock header %}
			</header>

			<div class="d-flex align-items-center align-vertical-center">
				<!-- note: using bootstrap primary coloring so that we may redefine it globally in Sass to match Föli color scheme later -->
				<main class="container main" role="main">
					<div class="content-spaced-lg">
						{% if not localized and g.lang_code != content_lang %}
						<div class="alert alert-info alert-dismissible show" role="alert">
							{{ _("The content for this view is not available for your selected language, the contents are displayed below in their original language.") }}
							<!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button> -->
						</div>
						{% endif %}

						{% block content %}{% endblock content %}
					</div>
				</main>
			</div>
		</div>

		<div class="modal hide" id="externalLinkModal" tabindex="-1" role="dialog" aria-labelledby="externalLinkModalLabel" aria-hidden="true">
			<div class="vertical-align-wrapper">
			<div class="modal-dialog modal-lg vertical-align-center" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title text-foli" id="externalLinkModalLabel">{{ _("Opening external content") }}</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<p>{{ _("This content is available on an external site in the following address:") }}</p>
						<code class="d-flex justify-content-center externalLinkURI"></code>
						<p>{{ _("Please scan the below code to access it on your personal device:") }}<p>
						<div class="d-flex justify-content-center externalLinkQRCode"></div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">{{ _("Close") }}</button>
					</div>
				</div>
			</div>
			</div>
		</div>

		<footer class="d-flex flex-column footer {% if sticky_banners %}footer-sticky{% endif %} border border-foli">
			{% block footer %}
			<!-- the actual home button is only kind of centered, try to "fix" it with padding (this is because the two side navs are different widths) -->
			<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between flex-grow pr-5 pr-lg-3">
				<ul class="navbar-nav mr-auto pr-lg-5">
					<li class="nav-item">
						<a class="nav-link" href="#">{{ _("Terms") }}</a>
					</li>
				</ul>
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active">
						<a class="nav-link" id="homeLink" href="{{ util.home_url() }}"><i class="fa fa-home" aria-hidden="true"></i> {{ _("Home") }}</a>
					</li>
				</ul>
				<ul class="navbar-nav d-none d-lg-flex mr-0">
					{# TODO: request.url or request.base_url could be used here, but then we have to deal with duplicate get arguments #}
					<li><a href="{{ util.home_url(lang = 'en') }}"><div class="lang lang-en rounded border border-foli m-1"><span class="sr-only">{{ _("English") }}</span></div></a></li>
					<li><a href="{{ util.home_url(lang = 'fi') }}"><div class="lang lang-fi rounded border border-foli m-1"><span class="sr-only">{{ _("Finnish") }}</span></div></a></li>
					<!-- <li><a href="{{ util.home_url(lang = 'sv') }}"><div class="lang lang-se rounded border border-foli m-1"><span class="sr-only">{{ _("Swedish") }}</span></div></a></li> -->
				</ul>
			</nav>
			{% endblock footer %}
		</footer>

		{% block scripts %}
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
		crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
		crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
		crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" integrity="sha256-9MzwK2kJKBmsJFdccXoIDDtsbWFh8bjYK/C7UjB1Ay0=" 
		crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment-with-locales.min.js" integrity="sha256-XWrGUqSiENmD8bL+BVeLl7iCfhs+pkPyIqrZQcS2Te8=" 
		crossorigin="anonymous"></script>
		{% if stop_info.stop_timezone %}
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data.min.js" integrity="sha256-FJZOELgwnfQRdG8KZUSWCYgucECDf4w5kfQdQSGbVpI=" 
		crossorigin="anonymous"></script>
		{% endif %}

		<script>
			// quick and dirty jquery "plugin" for making block level elements clickable by using a link they contain
			// TODO: this needs some serious refinement once we know how we implement changing of the views so that the whole page doesn't need to reload
			// FIXME: does not chain to previous click handler if it is already set!
			$.fn.clickableBox = function() {
				this.click(function() {
					window.location = $(this).find("a").attr("href");
					return false;
				}).css('cursor', 'pointer');
				return this;
			};

			// another jquery "plugin" for modifying the behaviour of external links
			// TODO: disable when not running on the display
			$.fn.disableExternalLinks = function(force = false) {
				// for some extra security the first condition is resolved when templates are compiled
				if ({{ (not g.is_kiosk)|tojson|safe }} && !force)
					return this;

				this.on('click', 'a[href^="http"]:not([href*="' + location.hostname + '"])', function (e) {
					e.preventDefault();
					$link = $(this);
					$modal = $('#externalLinkModal');

					$modal.on('show.bs.modal', function (e) {
						$modal.find('.externalLinkURI').text($link.attr('href'));
						$modal.find('.externalLinkQRCode').empty().qrcode($link.attr('href'));
					}).on('hidden.bs.modal', function (e) {
						$(this).removeData('bs.modal');
						$modal.find('.externalLinkURI').empty();
					}).modal();
				});
				return this;
			};

			$(function () {
				{% if g.is_kiosk %}
				// same caveats apply as scrollbar stuff in CSS, the sticky headers and footers make other (cross-browser) solutions complicated
				// could be done using chrome user scripts installed to the display unit also
				$('<style> ::-webkit-scrollbar { width: 0; visibility: hidden !important }</style>').appendTo('head');
				{% endif %}

				// disable the right click context menu (the condition is resolved at template compile time)
				$(document).contextmenu(function() { return {{ (not g.is_kiosk)|tojson|safe }}; });

				// make the Föli logo clickable as is customary on websites, to take you back home
				$('#foliLogo').clickableBox();

				// hide these elements only if the user has javascript enabled, retain for accessibility applications (through sr-only)
				// TODO: is there a way to avoid flickering elements on full page load?
				$('.js-hide').removeClass('js-hide').addClass('sr-only');

				moment.locale('{{ g.lang_code }}');

				// clock implementation follows
				$clock = $('#headerClock');
				var clockFormat = 'H:mm';
				var timeOffset = moment(new Date($clock.data('server-time'))).diff(moment());

				var currentTime;
				var timerHandler = function() {
					currentTime = moment().add(timeOffset);
					$clock.html(currentTime{% if stop_info.stop_timezone %}.tz('{{ stop_info.stop_timezone }}'){% endif %}.format(clockFormat));

					// run on next second wrap
					setTimeout(timerHandler, (1000 - (new Date().getTime() % 1000)));
				};

				// start the clock
				timerHandler();
			});
		</script>
		{% endblock scripts %}
	</body>
</html>
