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

<div class="block p-2">
    <div class="columns">
        <div class="column">To Do</div>
        {{if .CurrentUser.IsAdmin}}
        <div class="column is-narrow">
            <a href="/forum/admin" class="button is-small has-text-danger">
                <span class="icon"><i class="fa fa-gavel"></i></span>
                <span>Manage Forums</span>
            </a>
        </div>
        {{end}}
    </div>
</div>

{{$Root := .}}
{{range .Categories}}
    <div class="block p-2">
        <h1 class="title">{{.Category}}</h1>

        {{if eq (len .Forums) 0}}
            <em>There are no forums under this category.</em>
        {{else}}
            {{range .Forums}}
            {{$Stats := $Root.ForumMap.Get .ID}}
            <div class="card block has-background-primary-light">
                <!-- <header class="card-header has-background-success">
                    <p class="card-header-title has-text-light">
                        {{.Title}}
                    </p>
                </header> -->
                <div class="card-content">
                    <div class="columns">
                        <div class="column">

                            <h1 class="title">
                                <a href="/f/{{.Fragment}}">{{.Title}}</a>
                            </h1>

                            <div class="content">
                                {{if .Description}}
                                    {{ToMarkdown .Description}}
                                {{else}}
                                    <em>No description</em>
                                {{end}}
                            </div>

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

                        </div>
                        <div class="column">
                            <div class="box has-background-success-light">
                                <h2 class="subtitle">Latest Post</h2>
                                Hello world!
                            </div>
                        </div>
                        <div class="column is-3">
                            <div class="columns is-mobile">
                                <div class="column has-text-centered">
                                    <div class="box has-background-warning-light">
                                        <p class="is-size-7">Topics</p>
                                        {{if $Stats}}
                                            {{$Stats.Threads}}
                                        {{else}}
                                            err
                                        {{end}}
                                    </div>
                                </div>
                                <div class="column has-text-centered">
                                    <div class="box has-background-warning-light">
                                        <p class="is-size-7">Posts</p>
                                        {{if $Stats}}
                                            {{$Stats.Posts}}
                                        {{else}}
                                            err
                                        {{end}}
                                    </div>
                                </div>
                                <!-- <div class="column has-text-centered">
                                    <div class="box has-background-warning-light">
                                        <p class="is-size-7">Users</p>
                                        {{if $Stats}}
                                            {{$Stats.Users}}
                                        {{else}}
                                            err
                                        {{end}}
                                    </div>
                                </div> -->
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            {{end}}
        {{end}}
    </div>
{{end}}<!-- range .Categories -->

{{end}}