{{define "title"}}{{.Forum.Title}}{{end}}
{{define "content"}}
<div class="block">
    <section class="hero is-light is-success">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    <a href="/f/{{.Forum.Fragment}}" class="has-text-light">
                        <span class="icon mr-4"><i class="fa fa-comments"></i></span>
                        <span>{{.Forum.Title}}</span>
                    </a>
                </h1>
            </div>
        </div>
    </section>
</div>

{{$Root := .}}

<div class="block px-4">
    <div class="columns">
        <div class="column">
            <nav class="breadcrumb" aria-label="breadcrumbs">
                <ul>
                    <li><a href="/forum">Forums</a></li>
                    <li><a href="/f/{{.Forum.Fragment}}">{{.Forum.Title}}</a></Li>
                    <li class="is-active">
                        <a href="{{.Request.URL.Path}}" aria-current="page">{{or .Thread.Title "Untitled Thread"}}</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="column is-narrow">
            {{if not .Thread.NoReply}}
            <a href="/forum/post?to={{.Forum.Fragment}}&thread={{.Thread.ID}}" class="button is-link">
                <span class="icon"><i class="fa fa-reply"></i></span>
                <span>Add Reply</span>
            </a>
            {{end}}
        </div>
    </div>
</div>

<h1 class="title px-4">
    {{if .Thread.Pinned}}<sup class="fa fa-thumbtack has-text-success mr-2 is-size-5" title="Pinned"></sup>{{end}}
    {{or .Thread.Title "Untitled Thread"}}
</h1>

<div class="px-4">
    {{if .Thread.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 .Thread.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 .Thread.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="{{.Thread.UpdatedAt.Format "2006-01-02 15:04:05"}}">Updated {{SincePrettyCoarse .Thread.UpdatedAt}} ago</em>
</div>

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

<div class="block p-2">
    <nav class="pagination" role="navigation" aria-label="pagination">
        <a class="pagination-previous{{if not .Pager.HasPrevious}} is-disabled{{end}}" title="Previous"
            href="{{.Request.URL.Path}}?page={{.Pager.Previous}}">Previous</a>
        <a class="pagination-next{{if not .Pager.HasNext}} is-disabled{{end}}" title="Next"
            href="{{.Request.URL.Path}}?page={{.Pager.Next}}">Next page</a>
        <ul class="pagination-list">
            {{$Root := .}}
            {{range .Pager.Iter}}
            <li>
                <a class="pagination-link{{if .IsCurrent}} is-current{{end}}"
                    aria-label="Page {{.Page}}"
                    href="{{$Root.Request.URL.Path}}?page={{.Page}}">
                    {{.Page}}
                </a>
            </li>
            {{end}}
        </ul>
    </nav>
</div>

{{$Root := .}}
<div class="block p-2">
{{range .Comments}}
    <div class="box has-background-link-light">
        <div class="columns">
            <div class="column is-2 has-text-centered">
                <div>
                    <a href="/u/{{.User.Username}}">
                        <figure class="image is-96x96 is-inline-block">
                            {{if .User.ProfilePhoto.ID}}
                            <img src="{{PhotoURL .User.ProfilePhoto.CroppedFilename}}">
                            {{else}}
                            <img src="/static/img/shy.png">
                            {{end}}
                        </figure>
                    </a>
                </div>
                <a href="/u/{{.User.Username}}">{{.User.Username}}</a>
                {{if .User.IsAdmin}}
                <div class="is-size-7 mt-1">
                    <span class="tag is-danger">
                        <span class="icon"><i class="fa fa-gavel"></i></span>
                        <span>Admin</span>
                    </span>
                </div>
                {{end}}
            </div>
            <div class="column content">
                {{ToMarkdown .Message}}

                {{if .UpdatedAt.After .CreatedAt}}
                <div class="mt-4">
                    <em title="{{.UpdatedAt.Format "2006-01-02 15:04:05"}}">
                        <small>Edited {{SincePrettyCoarse .UpdatedAt}} ago</small>
                    </em>
                </div>
                {{end}}

                <hr class="has-background-grey mb-2">

                <div class="columns is-mobile is-multiline is-size-7 mb-0">
                    <div class="column is-narrow">
                        <span title="{{.CreatedAt.Format "2006-01-02 15:04:05"}}">
                            {{SincePrettyCoarse .CreatedAt}} ago
                        </span>
                    </div>

                    <div class="column is-narrow">
                        <a href="/contact?intent=report&subject=report.comment&id={{.ID}}" class="has-text-dark">
                            <span class="icon"><i class="fa fa-flag"></i></span>
                            <span>Report</span>
                        </a>
                    </div>

                    {{if not $Root.Thread.NoReply}}
                    <div class="column is-narrow">
                        <a href="/forum/post?to={{$Root.Forum.Fragment}}&thread={{$Root.Thread.ID}}&quote={{.ID}}" class="has-text-dark">
                            <span class="icon"><i class="fa fa-quote-right"></i></span>
                            <span>Quote</span>
                        </a>
                    </div>
                    <div class="column is-narrow">
                        <a href="/forum/post?to={{$Root.Forum.Fragment}}&thread={{$Root.Thread.ID}}" class="has-text-dark">
                            <span class="icon"><i class="fa fa-reply"></i></span>
                            <span>Reply</span>
                        </a>
                    </div>
                    {{end}}

                    {{if or $Root.CurrentUser.IsAdmin (eq $Root.CurrentUser.ID .User.ID)}}
                    <div class="column is-narrow">
                        <a href="/forum/post?to={{$Root.Forum.Fragment}}&thread={{$Root.Thread.ID}}&edit={{.ID}}" class="has-text-dark">
                            <span class="icon"><i class="fa fa-edit"></i></span>
                            <span>Edit</span>
                        </a>
                    </div>
                    <div class="column is-narrow">
                        <a href="/forum/post?to={{$Root.Forum.Fragment}}&thread={{$Root.Thread.ID}}&edit={{.ID}}&delete=true" onclick="return confirm('Are you sure you want to delete this comment?')" class="has-text-dark">
                            <span class="icon"><i class="fa fa-trash"></i></span>
                            <span>Delete</span>
                        </a>
                    </div>
                    {{end}}
                </div>

                {{if $Root.CurrentUser.IsAdmin}}
                <div>
                    <span class="tag is-primary is-light">
                        <span class="icon"><i class="fa fa-database"></i></span>
                        <span>ID: {{.ID}}</span>
                    </span>
                </div>
                {{end}}
            </div>
        </div>
    </div>
{{end}}
</div>

{{if .Thread.NoReply}}
    <div class="block notification is-warning is-light">
        <i class="fa fa-ban pr-2"></i>
        This thread is not accepting any new replies.
    </div>
{{else}}
    <div class="block p-2 has-text-right">
        <a href="/forum/post?to={{.Forum.Fragment}}&thread={{.Thread.ID}}" class="button is-link">
            <span class="icon"><i class="fa fa-reply"></i></span>
            <span>Add Reply</span>
        </a>
    </div>
{{end}}

{{end}}