<!-- weather -->
		<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
		{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
		<div class="fallingObjects" id="weather" aria-hidden="true">
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
		</div>

		<script>
			const weather = document.getElementById("weather");
			const weatherToggle = document.getElementById("weatherToggle");
			const weatherPreference = localStorage.getItem("weather");

			// Initial weather preference check on page load
			if ({% if metadata.weatherOnByDefault == false %}!weatherPreference || {% endif %}weatherPreference == 0) {
				weather.classList.add("hidden");
				weatherToggle.checked = false;
			} else {
				weather.classList.remove("hidden");
				weatherToggle.checked = true;
			};

			// Handle weather setting toggle
			weatherToggle.addEventListener('change', function() {
				if (this.checked) {
					localStorage.setItem("weather", 1);
					weather.classList.remove("hidden");
				} else {
					localStorage.setItem("weather", 0);
					weather.classList.add("hidden");
				};
			});
		</script>
<!-- /weather -->
