{{define "title"}}User Settings{{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="image is-128x128">
                            <img class="is-rounded" src="/static/img/shy.png">
                        </figure>
                    </div>

                    <div class="column">
                        <h1 class="title">
                            {{if .User.Name}}
                                {{.User.Name}}
                            {{else}}
                                {{.User.Username}}
                            {{end}}
                        </h1>
                    </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">
                                    <span class="icon">
                                        <i class="fa-solid fa-certificate has-text-success"></i>
                                    </span>
                                    <strong class="has-text-success">Verified!</strong>
                                </div>
                            </div>
                            {{else}}
                            <div class="pt-1">
                                <div class="icon-text">
                                    <span class="icon">
                                        <i class="fa-solid fa-certificate has-text-danger"></i>
                                    </span>
                                    <strong class="has-text-danger">Not verified!</strong>
                                </div>
                            </div>
                            {{end}}
                        </div>
                    </div>
                </div>

                <div class="level">
                    <div class="level-item">
                        <div class="field has-addons">
                            <p class="control">
                                <button type="button" class="button">
                                    <span class="icon-text">
                                        <span class="icon">
                                            <i class="fa fa-plus"></i>
                                        </span>
                                        <span>Friend</span>
                                    </span>
                                </button>
                            </p>

                            <p class="control">
                                <button type="button" class="button">
                                    <span class="icon-text">
                                        <span class="icon">
                                            <i class="fa fa-message"></i>
                                        </span>
                                        <span>Message</span>
                                    </span>
                                </button>
                            </p>

                            <p class="control">
                                <button type="button" class="button">
                                    <span class="icon-text">
                                        <span class="icon">
                                            <i class="fa fa-thumbs-up"></i>
                                        </span>
                                        <span>Like</span>
                                    </span>
                                </button>
                            </p>

                            <!-- <p class="control">
                                <button type="button" class="button">
                                    <span class="icon-text">
                                        <span class="icon">
                                            <i class="fa fa-flag"></i>
                                        </span>
                                        <span>Flag</span>
                                    </span>
                                </button>
                            </p>

                            <p class="control">
                                <button type="button" class="button">
                                    <span class="icon-text">
                                        <span class="icon">
                                            <i class="fa fa-hand"></i>
                                        </span>
                                        <span>Block</span>
                                    </span>
                                </button>
                            </p> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="block p-4">
        <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>
            </div>
        </div>
    </div>
</div>
{{end}}