[% META title = 'Site preferences' %]

<form action="[% c.uri_for('changeStylesheet') %]" method="post"><fieldset> <legend>Style</legend>
	Stylesheet: <select name="stylesheet">
[% FOR style IN stylesheets %]
		<option value="[% style %]" [% IF style == user.css %]selected[% END %]>[% style %]</option>
[% END %]
	</select>
	<br>
	<input type="submit" value="Change">
</fieldset></form>
<form action="[% c.uri_for('changeBirthday') %]" method="post"><fieldset> <legend>Birthday</legend>
	YYYY-MM-DD:
	<input type="text" name="birthday" value="[% birthday %]" id="birthday">
	<br><input type="submit" value="Change">
</fieldset></form>
<form action="[% c.uri_for('changePassword') %]" method="post"> <fieldset> <legend>Change password</legend>
	<p>Old password: 
	<input type="password" name="oldpass" value="">
	New password: 
	<input type="password" name="pass" value="">
	<input type="submit" value="Submit">
	</p>
</fieldset>
</form>
<fieldset> <legend>Timezone</legend>
	<select name="category" id="tzcategory">
[% FOR cat IN tzcategories %]
		<option value="[% cat %]" [% IF cat == timezone.0 %]selected[% END %]>[% cat %]</option>
[% END %]
	</select>
	<select name="country" id="tzcountry">
[% FOR country IN tzcountries %]
		<option value="[% country %]" [% IF country == timezone.1 %]selected[% END %]>[% country %]</option>
[% END %]
	</select>
<form action="[% c.uri_for('changeTimezone') %]" method="post">
	<p><input type="text" name="timezone" value="[% timezone.join("/") %]" id="timezone">
	<input type="submit" value="Change"></p>
	<p>Remember that GMT stays the same all year, so if you're in the UK you should pick Europe/London.</p>
</form></fieldset>
[%- site.stylesheets = ['ui/ui.datepicker.css'] %]
<script type="text/javascript" src="/static/ui/ui.core.min.js"></script>
<script type="text/javascript" src="/static/ui/ui.datepicker.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#birthday").datepicker({
		yearRange: "-80:+0",
		dateFormat: $.datepicker.ATOM,
		firstDay: 1,
		showOn: "both"
	});
	$("#tzcategory").change(function(){
		if ($(this).val() == 'GMT'){
			$("#timezone").val($(this).val());
			$("#tzcountry").empty();
		}else{
			$.get("/jsrpc/tzcountries/" + $(this).val(),function(xml){
				$("#tzcountry").empty();
				$("country",xml).each(function(i){
					var opt = $('<option>');
					$("#tzcountry").append(opt);
					opt.attr('value',$(this).text()).text($(this).text());
				});
			});
		}
	});
	$("#tzcountry").change(function(){
		$("#timezone").val($("#tzcategory").val() + '/' + $(this).val());
	});
});
</script>