<!doctype html>
<html lang="{{ metadata.language }}" {% block htmltag %}{% endblock %}>
	<head>
		<meta charset="utf-8">
		<title>{{ title or metadata.title }}</title>

		<link rel="preload" href="{{ '/assets/css/base.css' | url }}" as="style">
		{# We only bother with preloading the variable font here because chances are
			that if a browser doesn't support variable fonts it won't support
			preloading either:
			https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#browser_compatibility
		#}
		<link rel="preload" href="{{ '/assets/fonts/Comfortaa-VariableFont_wght.ttf' | url }}" as="font" crossorigin="anonymous">
		{% for name in (extraStylesheets or []) %}
			<link rel="preload" href="{{ '/assets/css/' + name + '.css' | url }}" as="style">
		{% endfor %}
		{% block headStart %}{% endblock %}

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="manifest" href="/site.webmanifest">
		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

		<meta name="description" content="{{ description or metadata.description }}">
		<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
		<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">

		<link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
		{% for name in (extraStylesheets or []) %}
			<link rel="stylesheet" href="{{ '/assets/css/' + name + '.css' | url }}">
		{% endfor %}

		{% block headEnd %}{% endblock %}
	</head>
	<body>
		<header class="site-header">
			<a class="site-logo" href="{{ '/' | url }}">
				{% block sitelogo %}{{ metadata.title }}{% endblock %}
			</a>

			<details class="site-mobile-navigation">
				<summary>Menü</summary>
				<nav class="site-navigation">
					<ul>
						{% for entry in collections.topNavigation | eleventyNavigation %}
							<li{% if entry.url == page.url %} class="active"{% endif %}>
								<a href="{{ entry.url }}">
									{{ entry.title }}
								</a>
							</li>
						{% endfor %}
					</ul>
				</nav>
			</details>

			<nav class="site-navigation horizontal">
				<ul>
					{% for entry in collections.topNavigation | eleventyNavigation %}
						<li{% if entry.url == page.url %} class="active"{% endif %}>
							<a href="{{ entry.url }}">
								{{ entry.title }}
							</a>
						</li>
					{% endfor %}
				</ul>
			</nav>
		</header>

		{% if callout %}
			<div class='page-callout'>
				{{ callout }}
			</div>
		{% endif %}

		<main id="content" {% if contentClass %} class="{{ contentClass }}"{% endif %}>
			{% block content %}
				{{ content | safe }}
			{% endblock %}
		</main>

		<footer class="page-section footer">
			<div class="page-content site-footer">
				<div>
					<p>
						{{ metadata.author.name }}
						{% for line in (metadata.author.address or []) %}
							<br />
							{{ line }}
						{% endfor %}
					</p>
					<p>
						{{ metadata.author.email }}
					</p>
				</div>

				<div>
					<nav class="site-navigation">
						<ul>
							{% for entry in collections.bottomNavigation | eleventyNavigation %}
								<li{% if entry.url == page.url %} class="active"{% endif %}>
									<a href="{{ entry.url }}">
										{{ entry.title }}
									</a>
								</li>
							{% endfor %}
						</ul>
					</nav>
				</div>
			</div>
		</footer>

		<script src="/assets/main.js" lang="text/javascript"></script>
	</body>
</html>
