@include 'partial/header.html'

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

<h1>inbox</h1>

<div>
	@if notifications.len == 0
	<p>your inbox is empty!</p>
	@else
	<form action="/api/user/notification/clear_all" method="post" beep-redirect="/inbox">
		<button>clear all</button>
	</form>
	<hr>
	@for notification in notifications.reverse()
	<div class="notification">
		<div style="display: flex; flex-direction: row; align-items: center; gap: 12px;">
			<p><strong>@notification.summary</strong></p>
			<form action="/api/user/notification/clear" method="post" beep-redirect="/inbox" class="form-inline" style="display: inline;">
				<input type="number" value="@{notification.id}" name="id" required aria-required hidden aria-hidden readonly aria-readonly />
				<button style="display: inline;">clear</button>
			</form>
		</div>
		<pre id="notif-@{notification.id}">@notification.body</pre>
		<script>
			render_body('notif-@{notification.id}')
		</script>
	</div>
	@end
	@end
</div>
@else
<p>uh oh, you need to be logged in to view this page</p>
@end

@include 'partial/footer.html'