{{template "base/head" .}}

<div class="user notification">
	<div class="ui container">
		<h1 class="ui header">{{.i18n.Tr "notification.notifications"}}</h1>

		<div class="ui top attached tabular menu">
			<a href="{{$.AppSubUrl}}/notifications?q=unread">
				<div class="{{if eq .Status 1}}active{{end}} item">
					{{.i18n.Tr "notification.unread"}}
					{{if eq .Status 1}}
						<div class="ui label">{{len .Notifications}}</div>
					{{end}}
				</div>
			</a>
			<a href="{{$.AppSubUrl}}/notifications?q=read">
				<div class="{{if eq .Status 2}}active{{end}} item">
					{{.i18n.Tr "notification.read"}}
					{{if eq .Status 2}}
						<div class="ui label">{{len .Notifications}}</div>
					{{end}}
				</div>
			</a>
		</div>
		<div class="ui bottom attached active tab segment">
			{{if eq (len .Notifications) 0}}
				{{if eq .Status 1}}
					{{.i18n.Tr "notification.no_unread"}}
				{{else}}
					{{.i18n.Tr "notification.no_read"}}
				{{end}}
			{{else}}
				<div class="ui relaxed divided selection list">
					{{range $notification := .Notifications}}
						{{$issue := $notification.GetIssue}}
						{{$repo := $notification.GetRepo}}
						{{$repoOwner := $repo.MustOwner}}

						<a class="item" href="{{$.AppSubUrl}}/{{$repoOwner.Name}}/{{$repo.Name}}/issues/{{$issue.Index}}">
							<div class="buttons-panel right floated content">
								{{if ne $notification.Status 3}}
									<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
										{{$.CsrfTokenHtml}}
										<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
										<input type="hidden" name="status" value="pinned" />
										<button class="ui button" title="Pin notification">
											<i class="octicon octicon-pin"></i>
										</button>
									</form>
								{{end}}
								{{if or (eq $notification.Status 1) (eq $notification.Status 3)}}
									<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
										{{$.CsrfTokenHtml}}
										<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
										<input type="hidden" name="status" value="read" />
										<button class="ui button" title="Mark as read">
											<i class="octicon octicon-check"></i>
										</button>
									</form>
								{{else if eq $notification.Status 2}}
									<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
										{{$.CsrfTokenHtml}}
										<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
										<input type="hidden" name="status" value="unread" />
										<button class="ui button" title="Mark as unread">
											<i class="octicon octicon-bell"></i>
										</button>
									</form>
								{{end}}
							</div>

							{{if eq $notification.Status 3}}
								<i class="blue octicon octicon-pin"></i>
							{{else if $issue.IsPull}}
								{{if $issue.IsClosed}}
									<i class="octicon octicon-git-merge"></i>
								{{else}}
									<i class="octicon octicon-git-pull-request"></i>
								{{end}}
							{{else}}
								{{if $issue.IsClosed}}
									<i class="octicon octicon-issue-closed"></i>
								{{else}}
									<i class="octicon octicon-issue-opened"></i>
								{{end}}
							{{end}}

							<div class="content">
								<div class="header">{{$repoOwner.Name}}/{{$repo.Name}}</div>
								<div class="description">#{{$issue.Index}} - {{$issue.Title}}</div>
							</div>
						</a>
					{{end}}
				</div>
			{{end}}
		</div>

		{{template "base/paginate" .}}
	</div>
</div>

{{template "base/footer" .}}