{{define "title"}}{{.User.Username}}{{end}}
{{define "content"}}
<div class="container">
    <section class="hero is-info is-bold">
        <div class="hero-body">
            <div class="container">
                <div class="columns">
                    <div class="column is-narrow">
                        <figure class="profile-photo">
                            {{if .User.ProfilePhoto.ID}}
                            <img src="/static/photos/{{.User.ProfilePhoto.CroppedFilename}}" data-photo-id="{{.User.ProfilePhoto.ID}}">
                            {{else}}
                            <img class="is-rounded" src="/static/img/shy.png">
                            {{end}}

                            <!-- CurrentUser can upload a new profile pic -->
                            {{if eq .CurrentUser.ID .User.ID}}
                            <span class="corner">
                                <button class="button is-small p-1 is-success">
                                    <a href="/photo/upload?intent=profile_pic"
                                        class="fa fa-camera has-text-link"
                                        title="Upload a new Profile Picture"></a>
                                </button>
                            </span>
                            {{end}}
                        </figure>
                    </div>

                    <div class="column">
                        <h1 class="title">
                            {{.User.NameOrUsername}}
                            {{if eq .User.Visibility "private"}}<sup class="fa fa-mask ml-2 is-size-6" title="Private Profile"></sup>{{end}}
                        </h1>
                        {{if ne .User.Status "active"}}
                            <h2 class="subtitle">
                                ({{.User.Status}})
                            </h2>
                        {{end}}
                    </div>

                    <div class="column is-narrow">
                        <div class="box">
                            <div>
                                Member since:
                                <span title="Since {{.User.CreatedAt.Format "Jan _2 2006"}}">
                                    {{SincePrettyCoarse .User.CreatedAt}} ago
                                </span>
                            </div>
                            <div>
                                Last logged in:
                                <span title="On {{.User.LastLoginAt.Format "Jan _2 2006 15:04:05 MST"}}">
                                    {{SincePrettyCoarse .User.LastLoginAt}} ago
                                </span>
                            </div>
                            {{if .User.Certified}}
                            <div class="pt-1">
                                <div class="icon-text" title="This user has been certified via a verification selfie.">
                                    <span class="icon">
                                        <i class="fa-solid fa-certificate has-text-success"></i>
                                    </span>
                                    <strong class="has-text-success">Certified!</strong>
                                </div>
                            </div>
                            {{else}}
                            <div class="pt-1">
                                <div class="icon-text" title="This user has not certified themselves with a verification selfie.">
                                    <span class="icon">
                                        <i class="fa-solid fa-certificate has-text-danger"></i>
                                    </span>
                                    <strong class="has-text-danger">Not certified!</strong>
                                </div>
                            </div>
                            {{end}}

                            {{if .User.IsAdmin}}
                            <div class="pt-1">
                                <div class="icon-text has-text-danger">
                                    <span class="icon">
                                        <i class="fa fa-gavel"></i>
                                    </span>
                                    <strong>Admin</strong>
                                </div>
                            </div>
                            {{end}}
                        </div>
                    </div>
                </div>

                <div class="columns is-centered is-gapless">
                    <div class="column is-narrow has-text-centered">
                        <form action="/friends/add" method="POST">
                            {{InputCSRF}}
                            <input type="hidden" name="username" value="{{.User.Username}}">

                            <button type="submit" class="button is-fullwidth"
                                {{if not (eq .IsFriend "none")}}title="Friendship {{.IsFriend}}"{{end}}>
                                <span class="icon-text">
                                    <span class="icon">
                                        {{if eq .IsFriend "approved"}}
                                        <i class="fa fa-check has-text-success"></i>
                                        {{else if eq .IsFriend "pending"}}
                                        <i class="fa fa-spinner fa-spin"></i>
                                        {{else}}
                                        <i class="fa fa-plus"></i>
                                        {{end}}
                                    </span>
                                    <span>Friend{{if eq .IsFriend "approved"}}s{{end}}</span>
                                </span>
                            </button>
                        </form>
                    </div>

                    <div class="column is-narrow has-text-centered">
                        <a href="/messages/compose?to={{.User.Username}}" class="button is-fullwidth">
                            <span class="icon-text">
                                <span class="icon">
                                    <i class="fa fa-message"></i>
                                </span>
                                <span>Message</span>
                            </span>
                        </a>
                    </div>

                    <!-- <div class="column is-narrow has-text-centered">
                        <button type="button" class="button is-fullwidth">
                            <span class="icon-text">
                                <span class="icon">
                                    <i class="fa fa-thumbs-up"></i>
                                </span>
                                <span>Like</span>
                            </span>
                        </button>
                    </div> -->

                    <div class="column is-narrow has-text-centered">
                        <form action="/users/block" method="POST">
                            {{InputCSRF}}
                            <input type="hidden" name="username" value="{{.User.Username}}">

                            <button type="submit" class="button is-fullwidth"
                                {{if not (eq .IsFriend "none")}}title="Friendship {{.IsFriend}}"{{end}}>
                                <span class="icon-text">
                                    <span class="icon">
                                        <i class="fa fa-hand"></i>
                                    </span>
                                    <span>Block</span>
                                </span>
                            </button>
                        </form>
                    </div>

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

                </div><!-- columns -->
            </div>
        </div>
    </section>

    {{if .IsPrivate}}
    <div class="block p-4">
        <div class="notification block is-warning">
            <i class="fa fa-mask"></i> This member's profile page is <strong>private.</strong> You may send them
            a friend request, and only if approved, you may then view their profile page and photo gallery.
        </div>
    </div>
    {{else}}
    <div class="block p-4">
        <div class="tabs is-boxed">
            <ul>
                <li class="is-active">
                    <a>
                        <span class="icon is-small">
                            <i class="fa fa-user"></i>
                        </span>
                        <span>Profile</span>
                    </a>
                </li>
                <li>
                    <a href="/photo/u/{{.User.Username}}">
                        <span class="icon is-small">
                            <i class="fa fa-image"></i>
                        </span>
                        <span>Photos</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="columns">

            <div class="column is-two-thirds">
                <div class="card block">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            About Me
                        </p>
                    </header>

                    <div class="card-content">
                        <div class="content">
                            {{or (ToMarkdown (.User.GetProfileField "about_me")) "n/a"}}
                        </div>
                    </div>
                </div>

                <div class="card block">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            My Interests
                        </p>
                    </header>

                    <div class="card-content">
                        <div class="content">
                            {{or (ToMarkdown (.User.GetProfileField "interests")) "n/a"}}
                        </div>
                    </div>
                </div>

                <div class="card block">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            Music/Bands/Movies
                        </p>
                    </header>

                    <div class="card-content">
                        <div class="content">
                            {{or (ToMarkdown (.User.GetProfileField "music_movies")) "n/a"}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="card block">
                    <header class="card-header has-background-info">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-user pr-2"></i>
                            About {{.User.Username}}
                        </p>
                    </header>

                    <div class="card-content">
                        <table class="table is-fullwidth is-hoverable" style="font-size: small">
                            <tr>
                                <td class="has-text-right">
                                    <strong class="is-size-7">Age:</label>
                                </td>
                                <td>
                                    {{if not .User.Birthdate.IsZero}}
                                        {{ComputeAge .User.Birthdate}}
                                    {{else}}
                                        n/a
                                    {{end}}
                                </td>
                            </tr>
                            <tr>
                                <td class="has-text-right">
                                    <strong class="is-size-7">Gender:</label>
                                </td>
                                <td>
                                    {{or (.User.GetProfileField "gender") "n/a"}}
                                    <small class="ml-3">{{.User.GetProfileField "pronouns"}}</small>
                                </td>
                            </tr>
                            <tr>
                                <td class="has-text-right">
                                    <strong class="is-size-7">City:</label>
                                </td>
                                <td>
                                    {{or (.User.GetProfileField "city") "n/a"}}
                                </td>
                            </tr>
                            <tr>
                                <td class="has-text-right">
                                    <strong class="is-size-7">Job:</label>
                                </td>
                                <td>
                                    {{or (.User.GetProfileField "job") "n/a"}}
                                </td>
                            </tr>
                            <tr>
                                <td class="has-text-right">
                                    <strong class="is-size-7">Marital&nbsp;status:</label>
                                </td>
                                <td>
                                    {{or (.User.GetProfileField "marital_status") "n/a"}}
                                    {{if .User.GetProfileField "relationship_type"}}({{.User.GetProfileField "relationship_type"}}){{end}}
                                </td>
                            </tr>
                            <tr>
                                <td class="has-text-right">
                                    <strong class="is-size-7">Orientation:</small>
                                </td>
                                <td>
                                    {{or (.User.GetProfileField "orientation") "n/a"}}
                                </td>
                            </tr>
                            <tr>
                                <td class="has-text-right">
                                    <strong class="is-size-7">Here for:</label>
                                </td>
                                <td>
                                    {{range Split (.User.GetProfileField "here_for") ","}}
                                    <div class="tag">{{.}}</div>
                                    {{end}}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- Admin Actions-->
                {{if .CurrentUser.IsAdmin}}
                <div class="card block">
                    <header class="card-header has-background-danger">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-gavel pr-2"></i>
                            Admin Actions
                        </p>
                    </header>

                    <div class="card-content">
                        <ul class="menu-list">
                            <li>
                                <a href="/admin/user-action?intent=impersonate&user_id={{.User.ID}}">
                                    <span class="icon"><i class="fa fa-ghost"></i></span>
                                    <span>Impersonate this user</span>
                                </a>
                            </li>
                            <li>
                                <a href="/admin/user-action?intent=ban&user_id={{.User.ID}}">
                                    <span class="icon"><i class="fa fa-ban"></i></span>
                                    <span>Ban/unban this user</span>
                                </a>
                            </li>
                            <li>
                                <a href="/admin/user-action?intent=promote&user_id={{.User.ID}}">
                                    <span class="icon"><i class="fa fa-gavel"></i></span>
                                    <span>Add/Remove admin rights</span>
                                </a>
                            </li>
                            <li>
                                <a href="/admin/user-action?intent=delete&user_id={{.User.ID}}">
                                    <span class="icon"><i class="fa fa-trash"></i></span>
                                    <span>Delete user account</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                {{end}}
            </div>
        </div><!-- /columns-->
    </div>
    {{end}}<!-- not IsPrivate -->
</div>
{{end}}