gitea/templates/user/notification/notification_div.tmpl

<div role="main" aria-label="{{.Title}}" class="page-content user notification" id="notification_div" data-sequence-number="{{.SequenceNumber}}">
	<div class="ui container">
		{{$statusUnread := 1}}{{$statusRead := 2}}{{$statusPinned := 3}}
		{{$notificationUnreadCount := call .PageGlobalData.GetNotificationUnreadCount}}
		{{$pageTypeIsRead := eq $.PageType "read"}}
		<div class="flex-text-block tw-justify-between tw-mb-[--page-spacing]">
			<div class="small-menu-items ui compact tiny menu">
				<a class="{{if not $pageTypeIsRead}}active{{end}} item" href="{{AppSubUrl}}/notifications?type=unread">
					{{ctx.Locale.Tr "notification.unread"}}
					<div class="notifications-unread-count ui label {{if not $notificationUnreadCount}}tw-hidden{{end}}">{{$notificationUnreadCount}}</div>
				</a>
				<a class="{{if $pageTypeIsRead}}active{{end}} item" href="{{AppSubUrl}}/notifications?type=read">
					{{ctx.Locale.Tr "notification.read"}}
				</a>
			</div>
			{{if and (not $pageTypeIsRead) $notificationUnreadCount}}
				<form action="{{AppSubUrl}}/notifications/purge" method="post">
					{{$.CsrfTokenHtml}}
					<button class="ui mini button primary tw-mr-0" title="{{ctx.Locale.Tr "notification.mark_all_as_read"}}">
						{{svg "octicon-checklist"}}
					</button>
				</form>
			{{end}}
		</div>
		<div id="notification_table">
			{{range $one := .Notifications}}
				<div class="notifications-item" id="notification_{{$one.ID}}" data-status="{{$one.Status}}">
					<div class="tw-self-start tw-mt-[2px]">
						{{if $one.Issue}}
							{{template "shared/issueicon" $one.Issue}}
						{{else}}
							{{svg "octicon-repo" 16 "text grey"}}
						{{end}}
					</div>
					<a class="notifications-link silenced tw-flex-1" href="{{$one.Link ctx}}">
						<div class="flex-text-block tw-text-[0.95em]">
							{{$one.Repository.FullName}} {{if $one.Issue}}<span class="text light-3">#{{$one.Issue.Index}}</span>{{end}}
							{{if eq $one.Status $statusPinned}}
								{{svg "octicon-pin" 13 "text blue"}}
							{{end}}
						</div>
						<div class="tw-text-16 tw-py-0.5">
							{{if $one.Issue}}
								{{$one.Issue.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}
							{{else}}
								{{$one.Repository.FullName}}
							{{end}}
						</div>
					</a>
					<div class="notifications-updated flex-text-inline">
						{{if $one.Issue}}
							{{DateUtils.TimeSince $one.Issue.UpdatedUnix}}
						{{else}}
							{{DateUtils.TimeSince $one.UpdatedUnix}}
						{{end}}
					</div>
					<form class="notifications-buttons" action="{{AppSubUrl}}/notifications/status?type={{$.PageType}}&page={{$.Page.Paginater.Current}}&perPage={{$.Page.Paginater.PagingNum}}" method="post"
								hx-boost="true" hx-target="#notification_div" hx-swap="outerHTML"
					>
						{{$.CsrfTokenHtml}}
						<input type="hidden" name="notification_id" value="{{$one.ID}}">
						{{if ne $one.Status $statusPinned}}
							<button class="btn interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "notification.pin"}}"
											name="notification_action" value="pin"
							>
								{{svg "octicon-pin"}}
							</button>
						{{end}}
						{{if or (eq $one.Status $statusUnread) (eq $one.Status $statusPinned)}}
							<button class="btn interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "notification.mark_as_read"}}"
											name="notification_action" value="mark_as_read"
							>
								{{svg "octicon-check"}}
							</button>
						{{else if eq $one.Status $statusRead}}
							<button class="btn interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "notification.mark_as_unread"}}"
											name="notification_action" value="mark_as_unread"
							>
								{{svg "octicon-bell"}}
							</button>
						{{end}}
					</form>
				</div>
			{{else}}
				<div class="empty-placeholder">
					{{svg "octicon-inbox" 56 "tw-mb-4"}}
					{{if $pageTypeIsRead}}
						{{ctx.Locale.Tr "notification.no_read"}}
					{{else}}
						{{ctx.Locale.Tr "notification.no_unread"}}
					{{end}}
				</div>
			{{end}}
		</div>
		{{template "base/paginate" .}}
	</div>
</div>