<div class="messages"></div>

<form class="form-wrapper account-settings">
	<% if (canChangeAvatarStyle) { %>
		<div class="form-row">
			<label class="form-label">User picture:</label>
			<div class="form-input">
				<%
					var avatarStyles = {
						gravatar: 'Gravatar',
						manual: 'Custom',
						blank: 'Blank',
					};
				%>
				<% _.each(avatarStyles, function(v, k) { %>
					<input <% print(user.avatarStyle == k ? 'checked="checked"' : '') %> type="radio" name="avatar-style" id="account-settings-avatar-<%= k %>" value="<%= k %>"/>
					<label for="account-settings-avatar-<%= k %>">
						<%= v %>
					</label>
				<% }) %>
			</div>
		</div>

		<div class="form-row avatar-content">
			<label class="form-label"></label>
			<div class="form-input">
				<input type="file" name="avatar-content" id="account-settings-avatar-content"/>
			</div>
		</div>
	<% } %>

	<% if (canChangeName) { %>
		<div class="form-row">
			<label class="form-label" for="account-settings-name">Name:</label>
				<div class="form-input">
				<input type="text" name="userName" id="account-settings-name" placeholder="New name&hellip;" value="<%= user.name %>"/>
			</div>
		</div>
	<% } %>

	<% if (canChangeEmailAddress) { %>
		<div class="form-row">
			<label class="form-label" for="account-settings-email">E-mail:</label>
			<div class="form-input">
				<input type="text" name="email" id="account-settings-email" placeholder="New e-mail&hellip;" value="<%= user.email %>"/>
				<% if (user.emailUnconfirmed) { %>
					<br/>
					<span class="account-settings-email-unconfirmed">(unconfirmed) <%= user.emailUnconfirmed %></span>
				<% } %>
			</div>
		</div>
	<% } %>

	<% if (canChangePassword) { %>
		<div class="form-row">
			<label class="form-label" for="account-settings-password">New password:</label>
			<div class="form-input">
				<input type="password" name="password" id="account-settings-password" placeholder="New password&hellip;" value=""/>
			</div>
		</div>

		<div class="form-row">
			<label class="form-label" for="account-settings-password-confirmation"></label>
			<div class="form-input">
				<input type="password" name="passwordConfirmation" id="account-settings-password-confirmation" placeholder="New password&hellip; (repeat)" value=""/>
			</div>
		</div>
	<% } %>

	<% if (canChangeAccessRank) { %>
		<div class="form-row">
			<label class="form-label" for="account-settings-access-rank">Access rank:</label>
			<div class="form-input">
				<%
					var accessRanks = {
						anonymous: 'Anonymous',
						regularUser: 'Regular user',
						powerUser: 'Power user',
						moderator: 'Moderator',
						administrator: 'Administrator'
					};
				%>
				<% _.each(accessRanks, function(v, k) { %>
					<input name="access-rank" type="radio" value="<%= k %>" id="access-rank-<%= k %>" <% print(user.accessRank == k ? 'checked="checked"' : '') %>>
					<label for="access-rank-<%= k %>">
						<% print(user.accessRank == k ? v + ' (current)' : v) %>
					</label>
					<br/>
				<% }) %>
			</div>
		</div>
	<% } %>

	<div class="form-row">
		<label class="form-label"></label>
		<div class="form-input">
			<button type="submit">Update settings</button>
		</div>
	</div>
</form>