<vn>
<vn-group>
	<db-lot id="password-form">
		SELECT length, nAlpha, nUpper, nDigits, nPunct
			FROM account.userPassword
	</db-lot>
	<db-form id="user">
		<db-model property="model" id="user-model" updatable="true">
			SELECT u.id, u.name, u.email, u.recoverPass,
					u.nickname, u.lang, c.mail, c.user_id
				FROM account.userView u
					LEFT JOIN customer_view c
						ON u.id = c.user_id
		</db-model>
	</db-form>
</vn-group>
<h1 id="title">
	_Configuration
</h1>
<div id="actions">
	<htk-bar-button
		icon="place"
		tip="_Addresses"
		on-click="onAddressesClick"/>
	<htk-bar-button
		icon="preferences"
		tip="_Change password"
		on-click="onPassChangeClick"/>
</div>
<div id="main" class="conf">
	<div class="card form">
		<div>
			<label for="user-name">_Username</label>
			<htk-text lot="user" name="name"/>
		</div>
		<div>
			<label for="email">_Email</label>
			<htk-entry lot="user" name="email"></htk-entry>
		</div>
		<div>
			<label for="nickname">_Display name</label>
			<htk-entry lot="user" name="nickname"/>
		</div>
		<div>
			<label for="lang">_Language</label>
			<htk-combo lot="user" name="lang"
				value-field="code">
				<db-model property="model">
					SELECT code, name FROM language WHERE active
				</db-model>
			</htk-combo>
		</div>
		<div>
			<span>
				<htk-check id="mail" lot="user" name="mail"/> 
				<label for="mail">_Receive invoices by email</label>
			</span>
		</div>
	</div>
</div>
<htk-popup
	id="change-password"
	on-open="onChangePassOpen"
	on-closed="onChangePassClose"
	modal="true">
	<div property="child-node" class="htk-dialog pass-change">
		<div>
			<input
				id="old-password"
				type="password"
				placeholder="_Old password"/>
			<input
				id="new-password"
				type="password"
				placeholder="_New password"/>
			<input
				id="repeat-password"
				type="password"
				placeholder="_Repeat password"/>
		</div>
		<div class="button-bar">
			<button class="thin" on-click="onPassModifyClick">
				_Modify
			</button>
			<button class="thin" on-click="onPassInfoClick">
				_Info
			</button>
			<div class="clear"/>
		</div>
	</div>
</htk-popup>
<htk-popup
	id="password-info"
	modal="true">
	<div property="child-node" class="htk-dialog pass-info">
		<h3>
			_Password requirements
		</h3>
		<ul>
			<li>
				{{passwordForm.length}} <span>_characters long</span>
			</li>
			<li>
				{{passwordForm.nAlpha}} <span>_alphabetic characters</span>
			</li>
			<li>
				{{passwordForm.nUpper}} <span>_capital letters</span>
			</li>
			<li>
				{{passwordForm.nDigits}} <span>_digits</span>
			</li>
			<li>
				{{passwordForm.nPunct}} <span>_symbols</span>
			</li>
		</ul>
	</div>
</htk-popup>
</vn>
