{{define "settings"}}
{{template "header" .}}

<style type="text/css">
.option { margin: 2em 0em; }
h2 {
	margin-top: 2.5em;
}
h3 { font-weight: normal; }
.section p, .section label {
	font-size: 0.86em;
}
.oauth-provider img {
	max-height: 2.75em;
	vertical-align: middle;
}
.modal {
	position: fixed;
}
</style>
<div class="content-container snug">
	<div id="overlay"></div>

	{{if .Silenced}}
		{{template "user-silenced"}}
	{{end}}
	<h1>{{if .IsLogOut}}Before you go...{{else}}Account Settings{{end}}</h1>
	{{if .Flashes}}<ul class="errors">
		{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
	</ul>{{end}}

	{{ if .IsLogOut }}
	<div class="alert info">
		<p class="introduction">Please add an <strong>email address</strong> and/or <strong>passphrase</strong> so you can log in again later.</p>
	</div>
	{{ else }}
	<div>
		<p>Change your account settings here.</p>
	</div>

	<form method="post" action="/api/me/self" autocomplete="false">
		<div class="option">
			<h3>Username</h3>
			<div class="section">
				<input type="text" name="username" value="{{.Username}}" tabindex="1" />
				<input type="submit" value="Update" style="margin-left: 1em;" />
			</div>
		</div>
	</form>
	{{ end }}

	{{if not .DisablePasswordAuth}}
	<form method="post" action="/api/me/self" autocomplete="false">
		<input type="hidden" name="logout" value="{{.IsLogOut}}" />
		<div class="option">
			<h3>Passphrase</h3>
			<div class="section">
				{{if and (not .HasPass) (not .IsLogOut)}}<div class="alert info"><p>Add a passphrase to easily log in to your account.</p></div>{{end}}
				{{if .HasPass}}<p>Current passphrase</p>
				<input type="password" name="current-pass" placeholder="Current passphrase" tabindex="1" /> <input class="show" type="checkbox" id="show-cur-pass" /><label for="show-cur-pass"> Show</label>
				<p>New passphrase</p>
				{{end}}
				{{if .IsLogOut}}<input type="text" value="{{.Username}}" style="display:none" />{{end}}
				<input type="password" name="new-pass" autocomplete="new-password" placeholder="New passphrase" tabindex="{{if .IsLogOut}}1{{else}}2{{end}}" /> <input class="show" type="checkbox" id="show-new-pass" /><label for="show-new-pass"> Show</label>
			</div>
		</div>

		<div class="option">
			<h3>Email</h3>
			<div class="section">
				{{if and (not .Email) (not .IsLogOut)}}<div class="alert info"><p>Add your email to get:</p>
				<ul>
					<li>No-passphrase login</li>
					<li>Account recovery if you forget your passphrase</li>
				</ul></div>{{end}}
				<input type="email" name="email" style="letter-spacing: 1px" placeholder="Email address" value="{{.Email}}" size="40" tabindex="{{if .IsLogOut}}2{{else}}3{{end}}" />
			</div>
		</div>

		<div class="option" style="text-align: center;">
			<input type="submit" value="Save changes" tabindex="4" />
		</div>
	</form>
	{{end}}

	{{ if .OauthSection }}
		{{ if .OauthAccounts }}
		<div class="option">
			<h2>Linked Accounts</h2>
			<p>These are your linked external accounts.</p>
			{{ range $oauth_account := .OauthAccounts }}
				<form method="post" action="/api/me/oauth/remove" autocomplete="false">
					<input type="hidden" name="provider" value="{{ $oauth_account.Provider }}" />
					<input type="hidden" name="client_id" value="{{ $oauth_account.ClientID }}" />
					<input type="hidden" name="remote_user_id" value="{{ $oauth_account.RemoteUserID }}" />
					<div class="section oauth-provider">
						{{ if $oauth_account.DisplayName}}
							{{ if $oauth_account.AllowDisconnect}}
							<input type="submit" value="Remove {{.DisplayName}}" />
							{{else}}
							<a class="btn cta"><strong>{{.DisplayName}}</strong></a>
							{{end}}
						{{else}}
							<img src="/img/mark/{{$oauth_account.Provider}}.png" alt="{{ $oauth_account.Provider | title }}" />
							<input type="submit" value="Remove {{ $oauth_account.Provider | title }}" />
						{{end}}
					</div>
				</form>
			{{ end }}
		</div>
		{{ end }}
		{{ if or .OauthSlack .OauthWriteAs .OauthGitLab .OauthGeneric .OauthGitea }}
		<div class="option">
			<h2>Link External Accounts</h2>
			<p>Connect additional accounts to enable logging in with those providers, instead of using your username and password.</p>
			<div class="row signinbtns">
			{{ if .OauthWriteAs }}
				<div class="section oauth-provider">
					<a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as?attach=t">
						<img src="/img/mark/writeas-white.png" alt="Write.as" />
						Link <strong>Write.as</strong>
					</a>
				</div>
			{{ end }}
			{{ if .OauthSlack }}
				<div class="section oauth-provider">
					<a class="btn cta loginbtn" id="slack-login" href="/oauth/slack?attach=t">
						<img src="/img/mark/slack.png" alt="Slack" />
						Link <strong>Slack</strong>
					</a>
				</div>
			{{ end }}
			{{ if .OauthGitLab }}
				<div class="section oauth-provider">
					<a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab?attach=t">
						<img src="/img/mark/gitlab.png" alt="GitLab" />
						Link <strong>{{.GitLabDisplayName}}</strong>
					</a>
				</div>
			{{ end }}
			{{ if .OauthGitea }}
				<div class="section oauth-provider">
					<a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea?attach=t">
						<img src="/img/mark/gitea.png" alt="Gitea" />
						Link <strong>{{.GiteaDisplayName}}</strong>
					</a>
				</div>
			{{ end }}
			{{ if .OauthGeneric }}
				<div class="section oauth-provider">
					<a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic?attach=t">
						Link <strong>{{ .OauthGenericDisplayName }}</strong>
					</a>
				</div>
			{{ end }}
			</div>
		</div>
		{{ end }}
	{{ end }}

	{{ if and .OpenDeletion (not .IsAdmin) }}
		<h2>Incinerator</h2>
		<div class="alert danger">
			<div class="row">
				<div>
					<h3>Delete your account</h3>
					<p>Permanently erase all your data, with no way to recover it.</p>
				</div>
				<button class="cta danger" onclick="prepareDeleteUser()">Delete your account...</button>
			</div>
		</div>
	{{end}}
</div>

<div id="modal-delete-user" class="modal">
	<h2>Are you sure?</h2>
	<div class="body">
		<p style="text-align:left">This action <strong>cannot</strong> be undone. It will immediately and permanently erase your account, including your blogs and posts. Before continuing, you might want to <a href="/me/export">export your data</a>.</p>
		<p>If you're sure, please type <strong>{{.Username}}</strong> to confirm.</p>

		<ul id="delete-errors" class="errors"></ul>

		<form action="/me/delete" method="post" onsubmit="confirmDeletion()">
			{{ .CSRFField }}
			<input id="confirm-text" placeholder="{{.Username}}" type="text" class="confirm boxy" name="confirm-username" style="margin-top: 0.5em;" />
			<div style="text-align:right; margin-top: 1em;">
				<a id="cancel-delete" style="margin-right:2em" href="#">Cancel</a>
				<input class="danger" type="submit" id="confirm-delete" value="Delete your account" disabled />
			</div>
	</div>
</div>

<script src="/js/h.js"></script>
<script src="/js/modals.js"></script>
<script>
var showChecks = document.querySelectorAll('input.show');
for (var i=0; i<showChecks.length; i++) {
	showChecks[i].addEventListener('click', function() {
		var prevEl = this.previousElementSibling;
		if (prevEl.type == "password") {
			prevEl.type = "text";
		} else {
			prevEl.type = "password";
		}
	});
}

{{ if and .OpenDeletion (not .IsAdmin) }}
	H.getEl('cancel-delete').on('click', closeModals);

	let $confirmDelBtn = document.getElementById('confirm-delete');
	let $confirmText = document.getElementById('confirm-text')
	$confirmText.addEventListener('input', function() {
		$confirmDelBtn.disabled = this.value !== '{{.Username}}'
	});

	function prepareDeleteUser() {
		$confirmText.value = ''
		showModal('delete-user')
		$confirmText.focus()
	}

	function confirmDeletion() {
		$confirmDelBtn.disabled = true
		$confirmDelBtn.value = 'Deleting...'
	}
{{ end }}
</script>

{{template "footer" .}}
{{end}}