{{define "appearance"}}<!DOCTYPE html>
<html lang="en">
	<head>
		{{template "meta_tags" "Appearance settings"}}
		{{template "user_style" .}}
	</head>

	<body>
		{{template "page_top" .}}
		<h1>Change website appearance</h1>
		<div class="page_content"><div class="limit_width">
			<p>
				You can change how pixeldrain looks! Your theme choice will
				be saved in a cookie.
			</p>
			<div class="indent">
				<input type="radio" id="style_default"        name="style"><label for="style_default">Pixeldrain Style</label><br/>
				<input type="radio" id="style_classic"        name="style"><label for="style_classic">Pixeldrain classic (gray)</label><br/>
				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
				<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label><br/>
				<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label><br/>
				<input type="radio" id="style_canta"          name="style"><label for="style_canta">Canta Style</label>
				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
				<input type="radio" id="style_arc"            name="style"><label for="style_arc">Arc Style</label>
				(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
				<input type="radio" id="style_deepsea"        name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
				<!--<input type="radio" id="style_sunny"          name="style"><label for="style_sunny">Sunny Style</label>-->
			</div>
		</div></div>

		<script>
		// Style selector
		document.getElementsByName("style").forEach(function(elem) {
			elem.addEventListener("change", function(evt){
				var date = new Date();
				date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
				document.cookie = "style=" + evt.target.id.substring(6) + "; expires=" + date.toUTCString() + "; path=/";

				location.reload();
			})
		});
		</script>
		{{template "page_bottom" .}}
		{{template "analytics"}}
	</body>
</html>
{{end}}
