extends layout

block css
	link(rel="stylesheet", href="/stylesheets/settings.css")

block content
	.mui-container-fluid
		.mui-row
			.mui-col-xs-12.mui-col-sm-10.mui-col-sm-offset-1.mui-col-md-8.mui-col-md-offset-2.mui-col-lg-6.mui-col-lg-offset-3.mui--z1.white.pad-updown.pad-sides
				form#settingsForm(@submit.prevent="submit")
					.mui-textfield.mui-textfield--float-label
						input#email(type="email" ref="userEmail" v-model="user.email")
						label#labEmail.active(for="email") Email
					.mui-textfield.mui-textfield--float-label
						input#name(type="text" v-model="user.name")
						label#labName.active(for="name") Name
					p
						span Theme     
						button(v-for="theme in themes" class="theme-btn mui-btn grey"
								:class="themeClass(theme)" @click.prevent="toggleTheme(theme)")
							| {{ theme }}
					.mui-radio
						input#notify(type="checkbox" v-model="user.notify")
						label(for="notify") Notify new moves & games
					button#submit.mui-btn.mui-btn--primary(@click.prevent="submit")
						span Apply
						i.material-icons.right send
					#dialog.mui--hide.space-top

block javascripts
	script(src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js")
	script(src="/javascripts/utils/dialog.js")
	script(src="/javascripts/utils/validation.js")
	script.
		var user = !{JSON.stringify(user)};
	script(src="/javascripts/settings.js")