{{define "title"}}User Settings{{end}}
{{define "content"}}
<div class="container">
    <section class="hero is-info is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">User Settings</h1>
            </div>
        </div>
    </section>

    {{ $User := .CurrentUser }}

    <div class="block p-4">
        <div class="columns">

            <div class="column is-hidden-tablet p-4">
                <label class="label">Jump to section:</label>
                <ul class="menu-list">
                    <li><a href="#profile">My Profile</a></li>
                    <li><a href="#verification">Verification Photo</a></li>
                    <li><a href="#prefs">Website Preferences</a></li>
                    <li><a href="#account">Account Settings <small class="has-text-grey ml-2">Email &amp; password</small></a></li>
                </ul>
            </div>

            <div class="column">
                <div class="card" id="profile">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-user pr-2"></i>
                            My Profile
                        </p>
                    </header>

                    <form method="POST" action="/settings">
                        <input type="hidden" name="intent" value="profile">
                        {{InputCSRF}}

                        <div class="card-content">
                            <p class="block">
                                The fields here are shown on your <a href="/u/{{.CurrentUser.Username}}">profile page</a>
                                and are all optional. Fields with a <i class="fa fa-lock"></i> icon are not shown on
                                your page but may drive some data that is (e.g., your current age derived from your birthdate).
                            </p>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="display_name">Display Name</label>
                                    <input type="text" class="input"
                                        id="display_name"
                                        name="display_name"
                                        placeholder="John Doe"
                                        value="{{$User.Name}}">
                                </div>

                                <div class="column field is-half">
                                    <label class="label" for="dob">Birthdate <i class="fa fa-lock"></i></label>
                                    <input type="date" class="input"
                                        id="dob"
                                        name="dob"
                                        value="{{if not $User.Birthdate.IsZero}}{{$User.Birthdate.Format "2006-01-02"}}{{end}}">
                                    <p class="help">
                                        Used to show your age on your profile.
                                    </p>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="gender">Gender</label>
                                    <div class="select is-fullwidth">
                                        <select id="gender" name="gender">
                                            <option value="">No answer</option>
                                            {{range .Enum.Gender}}
                                            <option value="{{.}}"{{if eq ($User.GetProfileField "gender") .}} selected{{end}}>{{.}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>

                                <div class="column field is-half">
                                    <label class="label" for="pronouns">Pronouns</label>
                                    <input type="text" class="input"
                                        id="pronouns"
                                        name="pronouns"
                                        maxlength="30"
                                        value="{{$User.GetProfileField "pronouns"}}">
                                    <p class="help">e.g. he/him; she/her</p>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="city">City/Location</label>
                                    <input type="text" class="input"
                                        id="city"
                                        name="city"
                                        value="{{$User.GetProfileField "city"}}">
                                </div>


                                <div class="column field is-half">
                                    <label class="label" for="job">Job/Occupation</label>
                                    <input type="text" class="input"
                                        id="job"
                                        name="job"
                                        value="{{$User.GetProfileField "job"}}">
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="marital_status">Marital Status</label>
                                    <div class="select is-fullwidth">
                                        <select id="marital_status" name="marital_status">
                                            <option value="">No answer</option>
                                            {{range .Enum.MaritalStatus}}
                                            <option value="{{.}}"{{if eq ($User.GetProfileField "marital_status") .}} selected{{end}}>{{.}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>

                                <div class="column field is-half">
                                    <label class="label" for="relationship_type">Relationship Type</label>
                                    <div class="select is-fullwidth">
                                        <select id="relationship_type" name="relationship_type">
                                            <option value="">No answer</option>
                                            {{range .Enum.RelationshipType}}
                                            <option value="{{.}}"{{if eq ($User.GetProfileField "relationship_type") .}} selected{{end}}>{{.}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="orientation">Orientation</label>
                                    <div class="select is-fullwidth">
                                        <select id="orientation" name="orientation">
                                            <option value="">No answer</option>
                                            {{range .Enum.Orientation}}
                                            <option value="{{.}}"{{if eq ($User.GetProfileField "orientation") .}} selected{{end}}>{{.}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="field">
                                <label class="label">Here For</label>
                                <div class="columns is-multiline pb-5">
                                    {{range .Enum.HereFor}}
                                    <div class="column is-one-third pb-0">
                                        <label class="checkbox">
                                            <input type="checkbox"
                                                name="here_for"
                                                value="{{.}}"
                                                {{if $User.ProfileFieldIn "here_for" .}}checked{{end}}>
                                            {{.}}
                                        </label>
                                    </div>
                                    {{end}}
                                </div>
                            </div>

                            <div class="field">
                                <label class="label" for="about_me">About Me</label>
                                <textarea class="textarea" cols="60" rows="4"
                                    id="about_me"
                                    name="about_me"
                                    placeholder="A little blurb about myself">{{$User.GetProfileField "about_me"}}</textarea>
                                <p class="help">
                                    Write a bit about yourself. Markdown formatting is supported here.
                                </p>
                            </div>

                            <div class="field">
                                <label class="label" for="interests">My Interests</label>
                                <textarea class="textarea" cols="60" rows="4"
                                    id="interests"
                                    name="interests"
                                    placeholder="What kinds of things make you curious?">{{$User.GetProfileField "interests"}}</textarea>
                            </div>

                            <div class="field">
                                <label class="label" for="music_movies">Music/Bands/Movies</label>
                                <textarea class="textarea" cols="60" rows="4"
                                    id="music_movies"
                                    name="music_movies"
                                    placeholder="What is your style of music or movie?">{{$User.GetProfileField "music_movies"}}</textarea>
                            </div>

                            <div class="field">
                                <button type="submit" class="button is-primary">
                                    Save Profile Settings
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="column">
                <div class="card block" id="verification">
                    <header class="card-header has-background-info">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-camera pr-2"></i>
                            Verification Photo
                        </p>
                    </header>

                    <div class="card-content">
                        xxx
                    </div>
                </div>

                <!-- Website Preferences -->
                <form method="POST" action="/settings">
                    <input type="hidden" name="intent" value="preferences">
                    {{InputCSRF}}

                    <div class="card block" id="prefs">
                        <header class="card-header has-background-success">
                            <p class="card-header-title">
                                <i class="fa fa-square-check pr-2"></i>
                                Website Preferences
                            </p>
                        </header>

                        <div class="card-content">
                            <div class="field">
                                <label class="label">Explicit Content Filter</label>
                                <label class="checkbox">
                                    <input type="checkbox"
                                        name="explicit"
                                        value="true"
                                        {{if .CurrentUser.Explicit}}checked{{end}}>
                                    Show explicit content
                                </label>
                                <p class="help">
                                    Check this box if you are OK seeing explicit content on this site, which may
                                    include erections or sexually charged content.
                                </p>
                            </div>

                            <div class="field">
                                <button type="submit" class="button is-primary">
                                    Save Website Preferences
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- Account Settings -->
                <form method="POST" action="/settings">
                    <input type="hidden" name="intent" value="settings">
                    {{InputCSRF}}

                    <div class="card block" id="account">
                        <header class="card-header has-background-danger">
                            <p class="card-header-title has-text-light">
                                <i class="fa fa-gear pr-2"></i>
                                Account Settings
                            </p>
                        </header>


                        <div class="card-content">
                            <div class="field">
                                <label class="label" for="change_email">Change Email</label>
                                <input type="email" class="input"
                                    id="change_email"
                                    name="change_email"
                                    placeholder="name@domain.com">
                            </div>

                            <div class="field">
                                <label class="label">Change Password</label>
                                <input type="password" class="input mb-2"
                                    name="old_password"
                                    placeholder="Current password">
                                <input type="password" class="input mb-2"
                                    name="new_password"
                                    placeholder="New password">
                                <input type="password" class="input mb-2"
                                    name="new_password2"
                                    placeholder="Confirm new password">
                            </div>

                            <div class="field">
                                <button type="submit" class="button is-primary">
                                    Save Account Settings
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

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