{{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">{{if .IsSentBox}}Sent{{else}}Inbox{{end}}</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>

                                <div class="columns is-mobile">
                                    <div class="column">
                                        <button type="submit" class="button is-success">Send Reply</button>
                                    </div>
                                    <div class="column is-narrow">
                                        <a href="/contact?intent=report&subject=report.message&id={{.MessageID}}"
                                            class="button has-text-danger ml-4">
                                            <span class="icon"><i class="fa fa-flag"></i></span>
                                            <span>Report</span>
                                        </a>
                                    </div>
                                </div>

                            </form>

                            <hr>
                        </div>
                        {{range .ViewThread}}
                        <div class="media block">
                            {{$SourceUser := $UserMap.Get .SourceUserID}}
                            <div class="media-left">
                                {{template "avatar-64x64" $SourceUser}}
                            </div>
                            <div class="media-content">
                                <p class="title is-4">{{$SourceUser.NameOrUsername}}</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>
                            {{if not .Read}}<span class="tag is-success ml-2">UNREAD</span>{{end}}
                        </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}}?{{QueryPlus "page" .ThreadPager.Previous}}" class="button">Previous</a>
                                    {{end}}
                                    {{if .ThreadPager.HasNext}}
                                    <a href="{{$Request.URL.Path}}?{{QueryPlus "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">{{if $IsSentBox}}UNREAD{{else}}NEW{{end}}</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?{{QueryPlus "page" .Pager.Previous}}" class="button">Previous</a>
                            {{end}}
                            {{if .Pager.HasNext}}
                            <a href="/messages?{{QueryPlus "page" .Pager.Next}}" class="button">Next Page</a>
                            {{end}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}