{{define "title"}}
    Notes about {{.User.Username}}
{{end}}
{{define "content"}}
<style type="text/css">
    {{template "profile-theme-hero-style" .User}}
</style>
<div class="container">
    <section class="hero is-link is-bold">
        <div class="hero-body">
            <div class="container">
                <div class="level">
                    <div class="level-left">
                        <h1 class="title">
                            <span class="icon mr-4"><i class="fa fa-pen-square"></i></span>
                            <span>{{template "title" .}}</span>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ugly hack.. needed by the card-footers later below. -->
    {{$Root := .}}

    <div class="block p-4">
        <!-- Tab bar -->
        <div class="tabs is-boxed">
            <ul>
                <li>
                    <a href="/u/{{.User.Username}}">
                        <span class="icon is-small">
                            <i class="fa fa-user"></i>
                        </span>
                        <span>Profile</span>
                    </a>
                </li>
                <li>
                    <a href="/u/{{.User.Username}}/photos">
                        <span class="icon is-small">
                            <i class="fa fa-image"></i>
                        </span>
                        <span>
                            Photos
                            {{if .PhotoCount}}<span class="tag is-link is-light ml-1">{{.PhotoCount}}</span>{{end}}
                        </span>
                    </a>
                </li>
                <li class="is-active">
                    <a>
                        <span class="icon is-small">
                            <i class="fa fa-pen-to-square"></i>
                        </span>
                        <span>
                            Notes
                            {{if .NoteCount}}<span class="tag is-link is-light ml-1">{{.NoteCount}}</span>{{end}}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="/u/{{.User.Username}}/friends">
                        <span class="icon is-small">
                            <i class="fa fa-user-group"></i>
                        </span>
                        <span>
                            Friends
                            {{if .FriendCount}}<span class="tag is-link is-light ml-1">{{.FriendCount}}</span>{{end}}
                        </span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="notification is-info is-light content">
            <p>
                <i class="fa fa-info-circle mr-1"></i> On this page you may jot down some private notes for yourself
                about <strong>{{.User.Username}}</strong>, for example to remember a topic you discussed on chat or
                to remember what they said their favorite color was -- it's up to you!
            </p>

            <p>
                Your notes will not normally be visible to <strong>{{.User.Username}}</strong> but <em>will</em> be visible
                to website administrators. <strong class="has-text-danger">Please be mindful of what you write</strong> in
                case of the unlikely event that your notes could be legally required to be disclosed to
                <strong>{{.User.Username}}</strong> sometime in the future.
            </p>
        </div>

        <div class="block">
            <a href="/notes/me">
                <i class="fa fa-search mr-1"></i>
                Browse and search <strong>all</strong> my notes</a> <span class="tag is-success ml-2">NEW!</span>
        </div>

        <div class="columns">
            <!-- User column -->
            <div class="column">
                <form action="{{.Request.URL.Path}}" method="POST">
                    {{InputCSRF}}
                    <div class="field mb-0">
                        <label class="label" for="message">My private notes about {{.User.Username}}</label>
                        <textarea class="textarea"
                            style="overflow: auto"
                            cols="80" rows="6"
                            name="message"
                            id="message"
                            placeholder="On one sunny day...">{{.MyNote.Message}}</textarea>
                    </div>

                    <!-- Show last updated on our note -->
                    {{if not .MyNote.UpdatedAt.IsZero}}
                    <div class="mt-1">
                        <em>You last updated your notes <span title="{{.MyNote.UpdatedAt.Format "Jan _2 2006"}}">{{SincePrettyCoarse .MyNote.UpdatedAt}} ago.</span></em>
                    </div>
                    {{end}}

                    <div class="field mt-4">
                        <button type="submit" class="button is-primary">
                            <i class="fa fa-save mr-1"></i> Save my notes
                        </button>
                    </div>
                </form>

                <!-- Admin view: everyone else's notes -->
                {{if .CurrentUser.HasAdminScope "admin.user.notes"}}
                <div class="card mt-6">
                    <div class="card-header has-background-info">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-peace mr-1"></i>
                            Everyone Else's Notes
                        </p>
                    </div>
                    <div class="card-content">
                        {{if .NotePager.Total}}
                        <p class="block">
                            Found <strong>{{.NotePager.Total}}</strong> note{{Pluralize64 .NotePager.Total}} about this user (page {{.NotePager.Page}} of {{.NotePager.Pages}}).
                        </p>
                        {{end}}

                        <p class="block">
                            Note: admin notes are shown first, and the rest are ordered by recently updated.
                        </p>

                        <div class="my-4">
                            {{SimplePager .NotePager}}
                        </div>

                        <hr>

                        {{range .OtherNotes}}
                        <div class="card has-background-link-light mb-4">
                            {{$User := $Root.UserMap.Get .UserID}}
                            <div class="card-content" style="position: relative">
                                <strong>From user:</strong>
                                <a href="/u/{{$User.Username}}">{{$User.Username}}</a>
                                {{if $User.IsAdmin}}
                                    <span class="tag ml-2 is-danger is-light">
                                        <i class="fa fa-peace mr-1"></i> Admin
                                    </span>
                                {{end}}

                                <div class="my-2" style="white-space: pre-wrap; word-break: break-word; overflow: auto">{{.Message}}</div>
                            </div>
                        </div>
                        {{end}}

                        <hr>

                        <div class="my-4">
                            {{SimplePager .NotePager}}
                        </div>
                    </div>
                </div>
                {{end}}
            </div>

            <!-- Admin Feedback & Notes column -->
            {{if .CurrentUser.HasAdminScope "admin.feedback"}}
            <div class="column">
                <div class="card">
                    <div class="card-header has-background-danger">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-peace mr-1"></i> Admin Feedback &amp; Reports
                        </p>
                    </div>

                    <div class="card-content">
                        {{if .FeedbackPager.Total}}
                        <span>
                            Found <strong>{{.FeedbackPager.Total}}</strong> report{{Pluralize64 .FeedbackPager.Total}} about this user (page {{.FeedbackPager.Page}} of {{.FeedbackPager.Pages}}).
                        </span>
                        {{end}}

                        <div class="my-4">
                            {{SimplePager .FeedbackPager}}
                        </div>

                        {{range .Feedback}}
                        {{$User := $Root.UserMap.Get .UserID}}
                        <div class="card">
                            <div class="card-content">

                                <table class="table is-fullwidth">
                                    <tr>
                                        <td class="has-text-right is-narrow">
                                            <strong>Intent:</strong>
                                        </td>
                                        <td>{{.Intent}}</td>
                                    </tr>
                                    <tr>
                                        <td class="has-text-right">
                                            <strong>Subject:</strong>
                                        </td>
                                        <td>{{.Subject}}</td>
                                    </tr>
                                    <tr>
                                        <td class="has-text-right">
                                            <strong>Table:</strong>
                                        </td>
                                        <td>
                                            {{if eq .TableName ""}}
                                                n/a
                                                {{if ne .TableID 0}} - {{.TableID}}{{end}}
                                            {{else if eq .TableName "users"}}
                                                Users: {{.TableID}}
                                                <a href="{{$Root.Request.URL.Path}}?id={{.ID}}&visit=true"
                                                    class="fa fa-external-link ml-2"
                                                    target="_blank"
                                                    title="Visit the reported user's profile"></a>
                                            {{else if eq .TableName "photos"}}
                                                Photos: {{.TableID}}
                                                <a href="{{$Root.Request.URL.Path}}?id={{.ID}}&visit=true"
                                                    class="fa fa-external-link mx-2"
                                                    target="_blank"
                                                    title="Visit the reported photo"></a>
                                                <a href="{{$Root.Request.URL.Path}}?id={{.ID}}&visit=true&profile=true"
                                                    class="fa fa-user"
                                                    target="_blank"
                                                    title="Visit the user profile who owns the reported photo"></a>
                                            {{else if eq .TableName "messages"}}
                                                Messages: {{.TableID}}
                                                <a href="{{$Root.Request.URL.Path}}?id={{.ID}}&visit=true"
                                                    class="fa fa-ghost ml-2"
                                                    target="_blank"
                                                    title="Impersonate the reporter and view this message thread"></a>
                                            {{else}}
                                                {{.TableName}}: {{.TableID}}
                                                <a href="{{$Root.Request.URL.Path}}?id={{.ID}}&visit=true" class="fa fa-external-link ml-2" target="_blank"></a>
                                            {{end}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="has-text-right">
                                            <strong>Reply&nbsp;To:</strong>
                                        </td>
                                        <td>
                                            {{if $User}}
                                                <a href="/u/{{$User.Username}}">{{$User.Username}}</a>
                                            {{else if ne .ReplyTo ""}}
                                                <a href="mailto:{{.ReplyTo}}">{{.ReplyTo}}</a>
                                            {{else}}
                                                n/a
                                            {{end}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="has-text-right">
                                            <strong>Date:</strong>
                                        </td>
                                        <td>
                                            {{.CreatedAt.Format "2006-01-02 15:04:05 MST"}}
                                        </td>
                                    </tr>
                                </table>

                                <div class="content">
                                    {{if eq .Message ""}}
                                        <p><em>No message attached.</em></p>
                                    {{else}}
                                        {{ToMarkdown .Message}}
                                    {{end}}
                                </div>

                            </div>
                        </div>
                        {{end}}

                        <div class="my-4">
                            {{SimplePager .FeedbackPager}}
                        </div>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </div>

</div>
{{end}}