website/web/templates/inbox/inbox.html

182 lines
8.7 KiB
HTML
Raw Normal View History

2022-08-14 00:42:42 +00:00
{{define "title"}}Message Inbox{{end}}
{{define "content"}}
<div class="container">
<section class="hero is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">Messages</h1>
<h2 class="subtitle">Inbox</h2>
</div>
</div>
</section>
{{$UserMap := .UserMap}}
{{$Request := .Request}}
<div class="block p-4">
<div class="columns">
<div class="column">
<div class="card">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">
{{if .ViewThread}}Conversation with {{.ReplyTo}}{{else}}Inbox{{end}}
</p>
</header>
{{if .ViewThread}}
<div class="card-content">
<div class="block">
<form action="/messages/compose" method="POST">
{{InputCSRF}}
<input type="hidden" name="to" value="{{.ReplyTo}}">
<input type="hidden" name="from" value="inbox">
<textarea class="textarea block" cols="80" rows="4"
name="message"
placeholder="Write a response"></textarea>
<button type="submit" class="button is-success">Send Reply</button>
</form>
<hr>
</div>
{{range .ViewThread}}
<div class="media block">
{{$SourceUser := $UserMap.Get .SourceUserID}}
<div class="media-left">
<figure class="image is-64x64">
{{if $SourceUser.ProfilePhoto.ID}}
<img src="{{PhotoURL $SourceUser.ProfilePhoto.CroppedFilename}}">
{{else}}
<img src="/static/img/shy.png">
{{end}}
</figure>
</div>
<div class="media-content">
<p class="title is-4">{{or $SourceUser.Name "(no name)"}}</p>
<p class="subtitle is-6">
<span class="icon"><i class="fa fa-user"></i></span>
<a href="/u/{{$SourceUser.Username}}">{{$SourceUser.Username}}</a>
{{if not $SourceUser.Certified}}
<span class="has-text-danger">
<span class="icon"><i class="fa fa-certificate"></i></span>
<span>Not Certified!</span>
</span>
{{end}}
{{if $SourceUser.IsAdmin}}
<span class="has-text-danger">
<span class="icon"><i class="fa fa-gavel"></i></span>
<span>Admin</span>
</span>
{{end}}
</p>
</div>
</div>
<div class="block content">
{{ToMarkdown .Message}}
</div>
<div class="block">
<em>Sent on {{.CreatedAt.Format "2006-01-02 15:04:05"}}</em>
</div>
<hr class="block">
{{end}}
<!-- Pager footer -->
<div class="block">
<div class="level">
<div class="level-left">
<div>
Found <strong>{{.ThreadPager.Total}}</strong> message{{Pluralize64 .ThreadPager.Total}} in this thread
(page {{.ThreadPager.Page}} of {{.ThreadPager.Pages}}).
</div>
</div>
<div class="level-right">
{{if .ThreadPager.HasPrevious}}
<a href="{{$Request.URL.Path}}?page={{.ThreadPager.Previous}}" class="button">Previous</a>
{{end}}
{{if .ThreadPager.HasNext}}
<a href="{{$Request.URL.Path}}?page={{.ThreadPager.Next}}" class="button">Next Page</a>
{{end}}
</div>
</div>
</div>
</div>
{{else}}
<div class="card-content content">
<p>
You have <strong>{{.Unread}}</strong> unread message{{Pluralize64 .Unread}}. Select a message on the
other column to read the conversation here.
</p>
</div>
{{end}}
</div>
</div>
<div class="column is-one-third">
<div class="card block">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">Messages</p>
</header>
<div class="card-content">
<div class="tabs is-toggle">
<ul>
<li{{if not .IsSentBox}} class="is-active"{{end}}>
<a href="/messages">Inbox</a>
</li>
<li{{if .IsSentBox}} class="is-active"{{end}}>
<a href="/messages?box=sent">Sent</a>
</li>
</ul>
</div>
<ul class="menu-list block">
{{$IsSentBox := .IsSentBox}}
{{range .Messages}}
<li>
<a href="/messages/read/{{.ID}}">
<div>
{{if $IsSentBox}}
{{$User := $UserMap.Get .TargetUserID}}
<strong>Sent to {{$User.Username}}</strong>
{{else}}
{{$User := $UserMap.Get .SourceUserID}}
<strong>From {{$User.Username}}</strong>
{{end}}
{{if not .Read}}<span class="tag is-success">NEW</span>{{end}}
</div>
<div class="my-1">
<em>
{{Substring .Message 48}}…
</em>
</div>
<div>
Sent {{.CreatedAt.Format "2006-01-02 15:04:05"}}
</div>
</a>
</li>
{{end}}
</ul>
<!-- Pager footer -->
<div class="block">
<div>
Found <strong>{{.Pager.Total}}</strong> message{{Pluralize64 .Pager.Total}}
(page {{.Pager.Page}} of {{.Pager.Pages}}).
</div>
{{if .Pager.HasPrevious}}
<a href="/messages?{{if .IsSentBox}}box=sent&{{end}}page={{.Pager.Previous}}" class="button">Previous</a>
{{end}}
{{if .Pager.HasNext}}
<a href="/messages?{{if .IsSentBox}}box=sent&{{end}}page={{.Pager.Next}}" class="button">Next Page</a>
{{end}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}