{{define "view-user"}}
{{template "header" .}}
<style>
table.classy th {
	text-align: left;
}
h3 {
	font-weight: normal;
}
td.active-silence {
	display: flex;
	align-items: center;
}

td.active-silence > input[type="submit"] {
	margin-left: auto;
	margin-right: 5%;
}

@media only screen and (max-width: 500px) {
	td.active-silence {
		flex-wrap: wrap;
	}
	td.active-silence > input[type="submit"] {
		margin: auto;
	}
}
input.copy-text {
	text-align: center;
	font-size: 1.2em;
	color: #555;
	width: 100%;
	box-sizing: border-box;
}
</style>
<div class="snug content-container">
	{{template "admin-header" .}}

	<h2 id="posts-header">{{.User.Username}}</h2>
	{{if .NewPassword}}<div class="alert success">
		<p>This user's password has been reset to:</p>
		<p><input type="text" class="copy-text" value="{{.NewPassword}}" onfocus="if (this.select) this.select(); else this.setSelectionRange(0, this.value.length);" readonly /></p>
		<p>They can use this new password to log in to their account. <strong>This will only be shown once</strong>, so be sure to copy it and send it to them now.</p>
		{{if .ClearEmail}}<p>Their email address is: <a href="mailto:{{.ClearEmail}}">{{.ClearEmail}}</a></p>{{end}}
		</div>
	{{end}}
	<table class="classy export">
		<tr>
			<th>No.</th>
			<td>{{.User.ID}}</td>
		</tr>
		<tr>
			<th>Type</th>
			<td>{{if .User.IsAdmin}}Admin{{else}}User{{end}}</td>
		</tr>
		<tr>
			<th>Username</th>
			<td>{{.User.Username}}</td>
		</tr>
		<tr>
			<th>Joined</th>
			<td>{{.User.CreatedFriendly}}</td>
		</tr>
		<tr>
			<th>Total Posts</th>
			<td>{{.TotalPosts}}</td>
		</tr>
		<tr>
			<th>Last Post</th>
			<td>{{if .LastPost}}{{.LastPost}}{{else}}Never{{end}}</td>
		</tr>
		<tr>
			<form action="/admin/user/{{.User.Username}}/status" method="POST" {{if not .User.IsSilenced}}onsubmit="return confirmSilence()"{{end}}>
				<a id="status"/>
				<th>Status</th>
				<td class="active-silence">
				{{if .User.IsSilenced}}
					<p>Silenced</p>
					<input type="submit" value="Unsilence"/>
				{{else}}
					<p>Active</p>
					<input class="danger" type="submit" value="Silence" {{if .User.IsAdmin}}disabled{{end}}/>
				{{end}}
				</td>
			</form>
		</tr>
		<tr>
			<th>Password</th>
			<td>
				{{if ne .Username .User.Username}}
				<form id="reset-form" action="/admin/user/{{.User.Username}}/passphrase" method="post" autocomplete="false">
					<input type="hidden" name="user" value="{{.User.ID}}"/>
					<button type="submit">Reset</button>
				</form>
				{{else}}
				<a href="/me/settings" title="Go to reset password page">Change your password</a>
				{{end}}
			</td>
		</tr>
	</table>

	<h2>Blogs</h2>

	{{range .Colls}}
	<h3><a href="/{{.Alias}}/">{{.Title}}</a></h3>
	<table class="classy export">
		<tr>
			<th>Alias</th>
			<td>{{.Alias}}</td>
		</tr>
		<tr>
			<th>Title</th>
			<td>{{.Title}}</td>
		</tr>
		<tr>
			<th>Description</th>
			<td>{{.Description}}</td>
		</tr>
		<tr>
			<th>Visibility</th>
			<td>{{.FriendlyVisibility}}</td>
		</tr>
		<tr>
			<th>Views</th>
			<td>{{.Views}}</td>
		</tr>
		<tr>
			<th>Posts</th>
			<td>{{.TotalPosts}}</td>
		</tr>
		<tr>
			<th>Last Post</th>
			<td>{{if .LastPost}}{{.LastPost}}{{else}}Never{{end}}</td>
		</tr>
		{{if $.Config.Federation}}
		<tr>
			<th>Fediverse Followers</th>
			<td>{{.Followers}}</td>
		</tr>
		{{end}}
	</table>
	{{end}}
</div>

<script type="text/javascript">
function confirmSilence() {
	return confirm("Silence this user? They'll still be able to log in and access their posts, but no one else will be able to see them anymore. You can reverse this decision at any time.");
}

	form = document.getElementById("reset-form");
	form.addEventListener('submit', function(e) {
		e.preventDefault();
		agreed = confirm("Reset this user's password? This will generate a new temporary password that you'll need to share with them, and invalidate their old one.");
		if (agreed === true) {
			form.submit();
		}
	});
</script>
{{template "footer" .}}
{{end}}
