{{define "title"}}{{.Forum.Title}}{{end}}
{{define "content"}}
<div class="block">
    <section class="hero is-light is-success">
        <div class="hero-body">
            <div class="container">
                <div class="level">
                    <div class="level-left mb-4">
                        <h1 class="title">
                            <span class="icon mr-4"><i class="fa fa-comments"></i></span>
                            <span>{{.Forum.Title}}</span>
                        </h1>
                    </div>

                    {{if .FeatureUserForumsEnabled}}
                    <div class="level-right">
                        <!-- Follow/Unfollow This Forum -->
                        <form action="/forum/subscribe" method="POST" class="is-inline">
                            {{InputCSRF}}
                            <input type="hidden" name="fragment" value="{{.Forum.Fragment}}">

                            {{if .IsForumSubscribed}}
                                <button type="submit" class="button"
                                    name="intent" value="unfollow"
                                    onclick="return confirm('Do you want to remove this forum from your list?')">
                                    <span class="icon"><i class="fa fa-bookmark"></i></span>
                                    <span>Followed</span>
                                </button>
                            {{else}}
                                <button type="submit" class="button"
                                    name="intent" value="follow">
                                    <span class="icon"><i class="fa-regular fa-bookmark"></i></span>
                                    <span>Follow</span>
                                </button>
                            {{end}}
                        </form>
                    </div>
                    {{end}}
                </div>
            </div>
        </div>
    </section>
</div>

{{$Root := .}}

<div class="block p-4">
    <div class="columns">
        <div class="column">
            <nav class="breadcrumb" aria-label="breadcrumbs">
                <ul>
                    <li><a href="/forum">Forums</a></li>
                    <li class="is-active">
                        <a href="{{.Request.URL.Path}}" aria-current="page">{{.Forum.Title}}</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="column is-narrow">
            <!-- Edit button for forum's settings -->
            {{if or (eq .Forum.OwnerID .CurrentUser.ID) (.CurrentUser.HasAdminScope "admin.forum.manage")}}
            <a href="/forum/admin/edit?id={{.Forum.ID}}" class="button mr-2">
                <span class="icon"><i class="fa fa-gear"></i></span>
            </a>
            {{end}}

            {{if or .CurrentUser.IsAdmin (not .Forum.Privileged) (eq .Forum.OwnerID .CurrentUser.ID)}}
            <a href="/forum/post?to={{.Forum.Fragment}}" class="button is-info">
                <span class="icon"><i class="fa fa-plus"></i></span>
                <span>New Thread</span>
            </a>
            {{end}}
        </div>
    </div>
</div>

<p class="block p-2">
    Found <strong>{{.Pager.Total}}</strong> post{{Pluralize64 .Pager.Total}} on this forum
    (page {{.Pager.Page}} of {{.Pager.Pages}}).
</p>

{{if .Forum.Privileged}}
<div class="block p-2 notification is-warning is-light">
    <i class="fa fa-peace mr-1"></i>
    Only moderators may create new threads on this forum. You may be able to reply to threads here.
</div>
{{end}}

<div class="block p-2">
    {{SimplePager .Pager}}
</div>

<!-- If no posts at all? -->
{{if not .Threads}}
<div class="block p-2">
    <div class="notification is-info is-light content">
        <p>
            There are no posts yet on this forum.
            {{if not .Forum.Privileged}}
                Why not <a href="/forum/post?to={{.Forum.Fragment}}">start the first thread?</a>
            {{end}}
        </p>
    </div>
</div>
{{end}}

{{$Root := .}}
<div class="block p-2">
{{range .Threads}}
    {{$Stats := $Root.ThreadMap.Get .ID}}
    <div class="box has-background-success-light has-text-dark">
        <div class="columns">
            <div class="column is-2 has-text-centered pt-0 pb-1">
                <div>
                    <a href="/u/{{.Comment.User.Username}}">
                        {{template "avatar-64x64" .Comment.User}}
                    </a>
                </div>
                <a href="/u/{{.Comment.User.Username}}">{{.Comment.User.NameOrUsername}}</a>
            </div>
            <div class="column content pt-1 pb-0">
                <a href="/forum/thread/{{.ID}}">
                    <h2 class="is-size-4 pt-0 has-text-dark">
                        {{if .Pinned}}<sup class="fa fa-thumbtack has-text-success mr-2 is-size-6" title="Pinned"></sup>{{end}}
                        {{or .Title "Untitled"}}
                    </h2>
                    {{TrimEllipses .Comment.Message 256}}
                </a>

                <hr class="has-background-success my-2">
                <div>
                    {{if .Pinned}}
                        <span class="tag is-success is-light mr-2">
                            <span class="icon"><i class="fa fa-thumbtack"></i></span>
                            <span>Pinned</span>
                        </span>
                    {{end}}

                    {{if .PollID}}
                        <span class="tag is-info is-light mr-2">
                            <span class="icon"><i class="fa fa-poll"></i></span>
                            <span>Poll</span>
                        </span>
                    {{end}}

                    {{if .Explicit}}
                        <span class="tag is-danger is-light mr-2">
                            <span class="icon"><i class="fa fa-fire"></i></span>
                            <span>NSFW</span>
                        </span>
                    {{end}}

                    {{if .NoReply}}
                        <span class="tag is-warning is-light mr-2" title="This thread can not be replied to.">
                            <span class="icon"><i class="fa fa-ban"></i></span>
                            <span>No Reply</span>
                        </span>
                    {{end}}

                    <em title="{{.UpdatedAt.Format "2006-01-02 15:04:05"}}">Updated {{SincePrettyCoarse .UpdatedAt}} ago</em>
                </div>
            </div>
            <div class="column is-narrow pb-1 pt-0 px-1">
                <div class="columns is-mobile">
                    <div class="column has-text-centered pr-1">
                        <div class="box p-2">
                            <p class="is-size-7">Replies</p>
                            {{if $Stats}}
                                {{$Stats.Replies}}
                            {{else}}
                                err
                            {{end}}
                        </div>
                    </div>
                    <div class="column has-text-centered pl-1">
                        <div class="box p-2">
                            <p class="is-size-7">Views</p>
                            {{if $Stats}}
                                {{$Stats.Views}}
                            {{else}}
                                err
                            {{end}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{end}}
</div>

<div class="block p-2">
    {{SimplePager .Pager}}
</div>

<!-- Info box: owner, moderators -->
<div class="block p-2">
    <div class="box">

        <label class="label">Forum Info</label>
        <div class="mb-4">
            Created: <span title="{{.Forum.CreatedAt}}">{{.Forum.CreatedAt.Format "Jan _2 2006"}}</span>
            <div class="mt-2">
                {{if .Forum.Explicit}}
                <span class="tag is-danger is-light">
                    <span class="icon"><i class="fa fa-fire"></i></span>
                    <span>Explicit</span>
                </span>
                {{end}}

                {{if .Forum.Privileged}}
                <span class="tag is-warning is-light">
                    <span class="icon"><i class="fa fa-peace"></i></span>
                    <span>Privileged</span>
                </span>
                {{end}}

                {{if .Forum.PermitPhotos}}
                <span class="tag is-grey">
                    <span class="icon"><i class="fa fa-camera"></i></span>
                    <span>Photos</span>
                </span>
                {{end}}

                {{if .Forum.Private}}
                <span class="tag is-private is-light">
                    <span class="icon"><i class="fa fa-lock"></i></span>
                    <span>Private</span>
                </span>
                {{end}}
            </div>
        </div>

        <label class="label">Forum Moderators</label>

        <!-- The owner first -->
        {{template "avatar-16x16" .Forum.Owner}}
        <a href="/u/{{.Forum.Owner.Username}}">
            {{.Forum.Owner.Username}}
        </a>
        <small class="has-text-grey">(owner)</small>

        <!-- Additional moderators -->
        {{range .ForumModerators}}
            <span class="pl-2">
                {{template "avatar-16x16" .}}
                <a href="/u/{{.Username}}">
                    {{.Username}}
                </a>
            </span>
        {{end}}
    </div>
</div>

{{end}}