{% load static %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{% static 'js/htmx.min.js' %}" defer></script>
<script src="{% static 'js/interact.js' %}" defer></script>
<script src="{% static 'js/countdown.js' %}" defer></script>
<link href="{% static '98.css/style.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
<style>
	{% include 'background.css' with background=user.profile.background %}
</style>

<link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">
<link rel="manifest" href="/site.webmanifest">
<title>HD Muzak</title>
<script>
	//Global position object for cross-page window positioning
	position = { 
		set x(val) {
			this._x = val
			localStorage.setItem("position", JSON.stringify({x: val, y: this._y}));
		},
		set y(val) {
			this._y = val
			localStorage.setItem("position", JSON.stringify({x: this._x, y: val}));
		},
		get x() { return this._x },
		get y() { return this._y },
		_x: 0, _y: 0,
		get_pos() {
			stored_position = JSON.parse(localStorage.getItem("position"));
			if (stored_position == null) {
				localStorage.removeItem("position")
				position.x = 0;
				position.y = 0;
			} else {
				position.x = stored_position.x
				position.y = stored_position.y
			}
			document.getElementById("main-window").style.transform =
				`translate(${position.x}px, ${position.y}px)`
			clippy = document.getElementById("clippy")
			if (clippy) {
				clippy.style.transform = 
					`translate(${position.x}px, ${position.y}px)`
				clippy.classList.remove('hide');
			}
		},
		reset() {
			this._x = 0
			this._y = 0
			localStorage.removeItem("position")
		}
	}

	//global spotify IFrameAPI cache
	ifa = null;
</script>