{% load i18n %}
{% load cookie_consent_tags %}
<!doctype html>
<html lang="en">
	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		{% comment %} Bootstrap CSS {% endcomment %}
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
			integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
			crossorigin="anonymous"
		>

		{% load static %} 

		
		{% comment %}
		TODO: Figure out a better way to do this.
		{% endcomment %}
		{% if theme == 'base' %}
			<link rel="stylesheet" href="{% static 'css/base.css' %}">
		{% elif theme == 'frankfurt' %}
			<link rel="stylesheet" href="{% static 'css/frankfurt.css' %}">
		{% elif theme == 'wiesbaden' %}
			<link rel="stylesheet" href="{% static 'css/wiesbaden.css' %}">
		{% elif theme == 'munich' %}
			<link rel="stylesheet" href="{% static 'css/munich.css' %}">
		{% endif %}

		<title>{% block title %}{{site_title}}{% endblock %}</title>
	</head>
	<body class="bg-light">
		{% block banner %}
		<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top shadow">
			{% if logo_url != "" %}
				<a href="{% url 'home' %}" class="navbar-brand">
					<img
						src="{{ logo_url }}"
						class="d-inline-block align-top"
						height=75
					>
					{% comment %}
					TODO: Figure out a better way to do this.
					{% endcomment %}
					{% if theme == 'munich' %}
						<h1 class="d-inline-block align-top site-title">{{ site_title }}</h1>
					{% else %}
						<h1 class="color-elem-1 d-inline-block align-top site-title">{{ site_title }}</h1>
					{% endif %}
				</a>
			{% else %}
				<a href="{% url 'home' %}" class="navbar-brand">
					{% comment %}
					TODO: Figure out a better way to do this.
					{% endcomment %}
					{% if theme == 'munich' %}
						<h1 class="d-inline-block align-top">{{ site_title }}</h1>
					{% else %}
						<h1 class="color-elem-1 d-inline-block align-top">{{ site_title }}</h1>
					{% endif %}
				</a>
			{% endif %}
			<button
				class="navbar-toggler"
				type="button"
				data-toggle="collapse"
				data-target="#navbarSupportedContent"
				aria-controls="navbarSupportedContent"
				aria-expanded="false"
				aria-label="Toggle navigation"
			>
			<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item dropdown 
						{% if request.path == '/rental-listings/' or request.path == '/for-sale-listings/' %} active {% endif %}">
						<a
							href="#"
							class="nav-link dropdown-toggle"
							data-toggle="dropdown"
							role="button"
							aria-haspopup="true"
							aria-expanded="false">{% translate "Listings" %}</a>
						<div class="dropdown-menu">
							<a
								href="{% url 'rental_listings' %}"
								class="dropdown-item">{% translate "Rental Listings" %}</a>
							<a
								href="{% url 'for_sale_listings' %}"
								class="dropdown-item">{% translate "For Sale Listings" %}</a>
						</div>
					</li>
					{% if all_pages %}
						{% for page in all_pages %}
							<li class="nav-item

								{% comment %}
								TODO: This does not work.
								{% endcomment %}
								{% if request.path == '/pages/{{ page.name }}' %} active {% endif %}">

								<a href="{% url 'pages:single_page' page.name %}" class="nav-link">{{ page.nav_name }}</a>
							</li>
						{% endfor %}
					{% endif %}
				</ul>
				{% for language in languages %}
					{% if language.0 != current_language %}
						<img src="{% static 'assets/language-flags/' %}{{ language.0 }}.png" class="language-flag"
							id="language-flag-{{ language.0 }}">
					{% endif %}
				{% endfor %}
				
				<form class="form-inline" action="{% url 'listings:search_results' %}" method="get">
					<input
						class="form-control mr-sm-2"
						type="search"
						name="search"
						placeholder="{% translate "Search" %}"
						aria-label="{% translate "Search" %}">
					<button
						class="btn btn-outline-success my-2 my-sm-0"
						type="submit">
						{% translate "Search" %}
					</button>
				</form>
				<a class="mx-2 my-sm-1" id="toggle-day-night">
					<img 
						id="toggle-day-night-icon"
						src="{% static 'images/night.png' %}"
						height="20"
						width="20"
					>
				</a>
			</div>
		</nav>
		{% if user.is_authenticated %}
		<span style="position: fixed;" class="sticky-top">
		{% translate "Logged in" %} - <a href="{% url 'broker:start' %}">{% translate "Use Brokerage" %}</a> - <a href="/admin">{% translate "Use Admin" %}</a>
		</span>
		{% endif %}
		{% endblock %}

		{% block filter_search_form %}
		{% endblock %}
		{% comment %}
		detail-text added for dark-mode support
		{% endcomment %}
		<div class="container detail-text">
			{% block content %}
			{% endblock %}
		</div>

		{% comment %} Required jQuery, Popper.js, Bootstrap JS {% endcomment %}
		<script
			src="https://code.jquery.com/jquery-3.6.0.js"
			integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
			crossorigin="anonymous">
		</script>
		<script
			src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
			integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
			crossorigin="anonymous">
		</script>
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
			integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
			crossorigin="anonymous">
		</script>
		<script type="text/javascript" src="{% static 'js/cookiebar.js' %}"></script>
		<style>
			.cookie-bar {
				position: fixed;
				width: 100%;
				bottom:0;
				text-align:center;
				background: #eee;
			}
		</style>

		{% if request|cookie_consent_enabled %}
			{% not_accepted_or_declined_cookie_groups request as cookie_groups %}
			{% if cookie_groups %}
				{% url "cookie_consent_cookie_group_list" as url_cookies %}
				{% cookie_consent_accept_url cookie_groups as url_accept %}
				{% cookie_consent_decline_url cookie_groups as url_decline %}
				<script type="text/javascript">
				var cookie_groups = [];
				{% for cookie_group in cookie_groups %}
					cookie_groups.push("{{ cookie_group.varname }}");
				{% endfor %}
				function ready(fn) {
					if (document.readyState != 'loading') {
						fn();
					} else if (document.addEventListener) {
						document.addEventListener('DOMContentLoaded', fn);
					} else {
						document.attachEvent('onreadystatechange', function() {
							if (document.readyState != 'loading')
								fn();
							});
					}
				}

				ready(function() {
					showCookieBar({
						content: "{% filter escapejs %}{% with cookie_groups=cookie_groups|join:", " %}<div class="cookie-bar">This site uses {{ cookie_groups }} cookies for better performance and user experience. Do you agree to use cookies? <a href="{{ url_accept }}" class="cc-cookie-accept">Accept</a> <a href="{{ url_decline }}" class="cc-cookie-decline">Decline</a> <a href="{{ url_cookies }}">Cookies info</a></div>{% endwith %}{% endfilter %}",
						cookie_groups: cookie_groups,
						cookie_decline: "{% get_decline_cookie_groups_cookie_string request cookie_groups %}",
						beforeDeclined: function() {
							document.cookie =
								"{% get_decline_cookie_groups_cookie_string request cookie_groups %}";
						}
					});
				});
				</script>
			{% endif %}
		{% endif %}

    <br>
    <div>{{ COPYRIGHT_TEXT |safe }}</div>
		{% comment %}
		See Bug #329, cannot import modules, for now, have to copy-paste the code
		directly, which is kind of ugly.
		<script type="module" src="{% static 'js/js.cookie.mjs' %}"></script>
		<script nomodule defer src="{% static 'js/js.cookie.js' %}"></script>
		{% endcomment %}
		<script type="module" src="{% static 'js/main.js' %}"></script>
		<script nomodule defer src="{% static 'js/main.js' %}"></script>
	</body>
</html>
