{{define "title"}}Change Log{{end}}
{{define "content"}}
<div class="container">
    {{$Root := .}}
    <section class="hero is-danger is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    Change Logs
                </h1>
            </div>
        </div>
    </section>

    <form action="{{.Request.URL.Path}}" method="GET">
    <div class="p-4">

        <div class="columns">
            <div class="column">
                Found {{FormatNumberCommas .Pager.Total}} user{{Pluralize64 .Pager.Total}}
                (page {{.Pager.Page}} of {{.Pager.Pages}}).
            </div>
        </div>

        <div class="block">

            <div class="card nonshy-collapsible-mobile">
                <header class="card-header has-background-link-light">
                    <p class="card-header-title">
                        Search Filters
                    </p>
                    <button class="card-header-icon" type="button">
                        <span class="icon">
                            <i class="fa fa-angle-up"></i>
                        </span>
                    </button>
                </header>
                <div class="card-content">
                    <div class="columns">

                        <div class="column pr-1">
                            <div class="field">
                                <label class="label">Table Name:</label>
                                <div class="select is-fullwidth">
                                    <select id="table_name" name="table_name">
                                        <option value="">(Any)</option>
                                        {{range .TableNames}}
                                        <option value="{{.}}"{{if eq $Root.TableName .}} selected{{end}}>{{.}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="column px-1">
                            <div class="field">
                                <label class="label">Table ID:</label>
                                <input type="number" class="input"
                                    name="table_id"
                                    autocomplete="off"
                                    value="{{.TableID}}">
                            </div>
                        </div>

                        <div class="column px-1">
                            <div class="field">
                                <label class="label">About User:</label>
                                <input type="text" class="input"
                                    name="about_user_id"
                                    autocomplete="off"
                                    value="{{.AboutUserID}}">
                                <p class="help">
                                    ID number <em>or</em> username or email address.
                                </p>
                            </div>
                        </div>

                        <div class="column px-1">
                            <div class="field">
                                <label class="label">Admin User:</label>
                                <input type="text" class="input"
                                    name="admin_user_id"
                                    autocomplete="off"
                                    value="{{.AdminUserID}}">
                                <p class="help">
                                    ID number <em>or</em> username or email address.
                                </p>
                            </div>
                        </div>

                        <div class="column px-1">
                            <div class="field">
                                <label class="label">Event Type:</label>
                                <div class="select is-fullwidth">
                                    <select id="event" name="event">
                                        <option value="">(Any)</option>
                                        {{range .EventTypes}}
                                        <option value="{{.}}"{{if eq $Root.Event .}} selected{{end}}>{{.}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="column px-1">
                            <div class="field">
                                <label class="label">Sort:</label>
                                <div class="select is-fullwidth">
                                    <select id="sort" name="sort">
                                        <option value="created_at desc"{{if eq $Root.Sort "created_at desc"}} selected{{end}}>Newest first</option>
                                        <option value="created_at asc"{{if eq $Root.Sort "created_at asc"}} selected{{end}}>Oldest first</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    
                    </div>

                    <div class="has-text-centered">
                        <a href="{{.Request.URL.Path}}" class="button">Reset</a>
                        <button type="submit" class="button is-success">
                            <span>Search</span>
                            <span class="icon"><i class="fa fa-search"></i></span>
                        </button>
                    </div>
                </div>
            </div>

        </div>

        {{SimplePager .Pager}}

        <table class="table is-fullwidth is-striped">
            <thead>
                <tr>
                    <th>Event</th>
                    <th>About&nbsp;User</th>
                    <th>Admin&nbsp;User</th>
                    <th>Table</th>
                    <th>ID</th>
                    <th>Message</th>
                    <th>Timestamp</th>
                </tr>
            </thead>
            <tbody class="is-size-7">
                {{range .ChangeLog}}
                <tr>
                    <td>
                        <a href="{{$Root.Request.URL.Path}}?{{QueryPlus "event" .Event}}">{{.Event}}</a>
                    </td>
                    <td>
                        {{if $Root.UserMap.Has .AboutUserID}}
                            {{$User := $Root.UserMap.Get .AboutUserID}}
                            <a href="/u/{{$User.Username}}">{{$User.Username}}</a>
                            <small>(ID: {{$User.ID}})</small>
                            
                            <!-- Filter by this user -->
                            <a href="{{$Root.Request.URL.Path}}?{{QueryPlus "about_user_id" .AboutUserID}}">
                                <i class="fa fa-search" title="Filter by this user ID"></i>
                            </a>
                        {{else}}
                            {{.AboutUserID}}
                            <i class="fa fa-exclamation-triangle has-text-danger" title="User Not Found" onclick="alert('User Not Found')"></i>
                        {{end}}
                    </td>
                    <td>
                        {{if $Root.UserMap.Has .AdminUserID}}
                            {{$User := $Root.UserMap.Get .AdminUserID}}
                            <a href="/u/{{$User.Username}}">{{$User.Username}}</a>
                            <small>(ID: {{$User.ID}})</small>

                            <!-- Filter by this user -->
                            <a href="{{$Root.Request.URL.Path}}?{{QueryPlus "admin_user_id" .AdminUserID}}">
                                <i class="fa fa-search" title="Filter by this user ID"></i>
                            </a>
                        {{else if .AdminUserID}}
                            {{.AdminUserID}}
                            <i class="fa fa-exclamation-triangle has-text-danger" title="User Not Found" onclick="alert('User Not Found')"></i>
                        {{end}}
                    </td>
                    <td>
                        <a href="{{$Root.Request.URL.Path}}?{{QueryPlus "table_name" .TableName}}">{{.TableName}}</a>
                    </td>
                    <td>
                        <a href="{{$Root.Request.URL.Path}}?{{QueryPlus "table_name" .TableName "table_id" .TableID}}">{{.TableID}}</a>
                    </td>
                    <td>
                        <div class="content">
                            {{ToMarkdown .Message}}
                        </div>
                    </td>
                    <td>
                        {{.CreatedAt.Format "2006-01-02 15:04:05"}}
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>

        {{SimplePager .Pager}}

    </div>
    </form>
</div>

<!-- Style override, allow a horizontal scrollbar if needed, e.g. mobile -->
<style>
    body {
        overflow-x: auto;
    }
</style>
{{end}}