{% extends 'internal/base.html' %}

{% set title = _("Home") %}
{% set sticky_banners = g.is_kiosk %}
{% set localized = true %}

{# the minus sign in super() call is for whitespace control #}
{% block scripts %}
	{{- super() }}

	<script>
		$(function () {
			$('.menu-card').clickableBox();
		});
	</script>
{% endblock scripts %}

{% block content %}
	<div class="row mb-4">
		<div class="col-md-5 offset-md-1 mb-4 mb-md-0">
			<div class="card menu-card bg-foli text-center box-shadow">
				<img class="card-img-top" src="{{ util.static_url('img/map_placeholder.png') }}" alt="{{ _("Card Image") }}">
				<div class="card-body">
					<a role="button" href="{{ util.view_url('map') }}" class="btn btn-lg btn-primary">{{ _("Live Map") }}</a>
				</div>
			</div>
		</div>
		<div class="col-md-5">
			<div class="card menu-card bg-foli text-center box-shadow">
				<img class="card-img-top" src="{{ util.static_url('img/timetables_placeholder.png') }}" alt="{{ _("Card Image") }}">
				<div class="card-body">
					<a role="button" href="{{ util.view_url('timetables') }}" class="btn btn-lg btn-primary">{{ _("Timetables") }}</a>
				</div>
			</div>
		</div>
	</div>
	<div class="row mb-4">
		<div class="col-md-5 offset-md-1 mb-4 mb-md-0">
			<!-- this particular button variation has some responsiveness issues -->
			<div class="card menu-card text-center bg-white border-foli text-foli box-shadow">
				<img class="card-img" src="{{ util.static_url('img/news_placeholder.png') }}" alt="{{ _("Card Image") }}">
				<div class="card-img-overlay">
					<h4 class="card-title">{{ _("Info") }}</h4>
					<p class="card-text">{{ _("Wheather, Social Media, Events") }}</p>
					<a role="button" href="{{ util.view_url('info') }}" class="btn btn-lg btn-primary">{{ _("View") }}</a>
				</div>
			</div>
		</div>
		<div class="col-md-5">
			<div class="card menu-card text-center bg-white border-foli text-foli box-shadow">
				<img class="card-img" src="{{ util.static_url('img/foli_placeholder.png') }}" alt="{{ _("Card Image") }}">
				<div class="card-img-overlay">
					<h4 class="card-title js-hide">{{ _("Föli") }}</h4>
					<p class="card-text js-hide">{{ _("Information about Föli services") }}</p>
					<a role="button" href="{{ util.view_url('foli') }}" class="btn btn-lg btn-primary js-hide">{{ _("View") }}</a>
				</div>
			</div>
		</div>
	</div>
	<div class="row mb-4">
		<div class="col-md-5 offset-md-1 mb-4 mb-md-0">
			<div class="card menu-card bg-foli text-center box-shadow">
				<img class="card-img-top" src="{{ util.static_url('img/application_placeholder.png') }}" alt="{{ _("Card Image") }}">
				<div class="card-body">
					<a role="button" href="{{ util.view_url('foli/app') }}" class="btn btn-lg btn-primary">{{ _("Föli application") }}</a>
				</div>
			</div>
		</div>
		<div class="col-md-5">
			<!--Empty spot for next menu card-->
		</div>
	</div>
{% endblock content %}