@include 'partial/header.html'

@if ctx.is_logged_in()
<script src="/static/js/text_area_counter.js"></script>
<script src="/static/js/password.js"></script>

<h1>user settings:</h1>

<form action="/api/user/set_bio" method="post">
	<label for="bio">bio: (<span id="bio_chars">0/@{app.config.user.bio_max_len}</span>)</label>
	<br>
	<textarea
		name="bio"
		id="bio"
		cols="30"
		rows="10"
		minlength="@app.config.user.bio_min_len"
		maxlength="@app.config.user.bio_max_len"
	>@user.bio</textarea>
	<br>
	<input type="submit" value="save">
</form>

<hr>

<form action="/api/user/set_pronouns" method="post">
	<label for="pronouns">pronouns: (<span id="pronouns_chars">0/@{app.config.user.pronouns_max_len}</span>)</label>
	<input
		type="text"
		name="pronouns"
		id="pronouns"
		minlength="@app.config.user.pronouns_min_len"
		maxlength="@app.config.user.pronouns_max_len"
		pattern="@app.config.user.pronouns_pattern"
		value="@user.pronouns"
	>
	<input type="submit" value="save">
</form>

<hr>

<form action="/api/user/set_nickname" method="post">
	<label for="nickname">nickname: (<span id="nickname_chars">0/@{app.config.user.nickname_max_len}</span>)</label>
	<input
		type="text"
		name="nickname"
		id="nickname"
		pattern="@app.config.user.nickname_pattern"
		minlength="@app.config.user.nickname_min_len"
		maxlength="@app.config.user.nickname_max_len"
		value="@{user.nickname or { '' }}"
	>
	<input type="submit" value="save">
</form>

<form action="/api/user/set_nickname" method="post">
	<input type="submit" value="reset nickname">
</form>

<script>
	add_character_counter('bio', 'bio_chars', @{app.config.user.bio_max_len})
	add_character_counter('pronouns', 'pronouns_chars', @{app.config.user.pronouns_max_len})
	add_character_counter('nickname', 'nickname_chars', @{app.config.user.nickname_max_len})
</script>

@if app.config.instance.allow_changing_theme
<hr>

<form action="/api/user/set_theme" method="post">
	<label for="url">theme:</label>
	<input type="text" name="url" id="url" value="@user.theme">
	<input type="submit" value="save">
</form>

<hr>

<form action="/api/user/set_css" method="post">
	<label for="css">custom css:</label>
	<br>
	<textarea type="text" name="css" id="css" style="font: monospace;">@user.css</textarea>
	<input type="submit" value="save">
</form>
@end

<hr>

<form action="/api/user/set_username" method="post">
	<label for="new_username">username:</label>
	<input
		type="text"
		name="new_username"
		id="new_username"
		pattern="@app.config.user.username_pattern"
		minlength="@app.config.user.username_min_len"
		maxlength="@app.config.user.username_max_len"
		value="@{user.username}"
		required aria-required
	>
	<input type="submit" value="save">
</form>

<hr>

<form action="/api/user/set_automated" method="post">
	<div>
		<label for="is_automated">is automated:</label>
		<input
			type="checkbox"
			name="is_automated"
			id="is_automated"
			value="true"
			@if user.automated
			checked aria-checked
			@end
		>
	</div>
	<input type="submit" value="save">
	<p>automated accounts are primarily intended to tell users that this account makes posts automatically.</p>
	<p>it will also hide most front-end interactions since the user of this account likely will not be using those very often.</p>
</form>

<hr>

<details>
	<summary>dangerous settings (click to reveal)</summary>

	<br>

	<details>
		<summary>change password (click to reveal)</summary>
		<form action="/api/user/set_password" method="post" beep-redirect="/login">
			<p>changing your password will log you out of all devices, so you will need to log in again after changing it.</p>
			<label for="current_password">current password:</label>
			<input
				type="password"
				name="current_password"
				id="current_password"
				pattern="@app.config.user.password_pattern"
				minlength="@app.config.user.password_min_len"
				maxlength="@app.config.user.password_max_len"
				required aria-required
				autocomplete="off" aria-autocomplete="off"
			>
			<br>
			<label for="new_password">new password: <input type="button" id="view-new_password" style="display: inline;" value="view"></input></label>
			<input
				type="password"
				name="new_password"
				id="new_password"
				pattern="@app.config.user.password_pattern"
				minlength="@app.config.user.password_min_len"
				maxlength="@app.config.user.password_max_len"
				required aria-required
				autocomplete="off" aria-autocomplete="off"
			>
			<label for="confirm_password">confirm password: <input type="button" id="view-confirm_password" style="display: inline;" value="view"></input></label>
			<input
				type="password"
				name="confirm_password"
				id="confirm_password"
				pattern="@app.config.user.password_pattern"
				minlength="@app.config.user.password_min_len"
				maxlength="@app.config.user.password_max_len"
				required aria-required
				autocomplete="off" aria-autocomplete="off"
			>
			<br>
			<p>passwords match: <span id="passwords-match">yes</span></p>
			<br>
			<input type="submit" value="save">
		</form>
	</details>

	<br>

	<details>
		<summary>account deletion (click to reveal)</summary>
		<form action="/api/user/delete" autocomplete="off" beep-redirect="/">
			<input
				type="number"
				name="id"
				id="id"
				value="@user.id"
				required aria-required
				readonly aria-readonly
				hidden aria-hidden
			>
			<p><strong>there is NO GOING BACK after deleting your account.</strong></p>
			<p><strong>EVERY ONE of your posts, notifications, likes, dislikes, and ALL OTHER USER DATA WILL BE PERMANENTLY DELETED</strong></p>
			<div>
				<input type="checkbox" name="are-you-sure" id="are-you-sure" required aria-required>
				<label for="are-you-sure">click to confirm</label>
			</div>
			<br>
			<div>
				<input type="checkbox" name="are-you-really-sure" id="are-you-really-sure" required aria-required>
				<label for="are-you-really-sure">click to doubly confirm</label>
			</div>
			<br>
			<div>
				<input type="checkbox" name="are-you-absolutely-sure" id="are-you-absolutely-sure" required aria-required>
				<label for="are-you-absolutely-sure">click to triply confirm</label>
			</div>
			<br>
			<details>
				<summary>(click to reveal deletion button)</summary>
				<input type="submit" value="delete your account">
			</details>
		</form>
	</details>
</details>

<script>
	add_password_checkers('new_password', 'confirm_password', 'passwords-match');
</script>

@else
<p>uh oh, you need to be logged in to view this page!</p>
@end

@include 'partial/footer.html'