{{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="{{or $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. <a href="/markdown" target="_blank">Markdown formatting</a> 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">

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

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

                        <div class="card-content">
                            <div class="field">
                                <label class="label">Profile Visibility</label>
                                <label class="checkbox">
                                    <input type="radio"
                                        name="visibility"
                                        value="public"
                                        {{if eq .CurrentUser.Visibility "public"}}checked{{end}}>
                                    Public + Login Required
                                </label>
                                <p class="help">
                                    The default is that users must be logged-in to even look at your profile
                                    page. If your profile URL (/u/{{.CurrentUser.Username}}) is visited by a
                                    logged-out browser, they are prompted to log in.
                                </p>

                                <label class="checkbox mt-2">
                                    <input type="radio"
                                        name="visibility"
                                        value="external"
                                        {{if eq .CurrentUser.Visibility "external"}}checked{{end}}>
                                    Public + Limited Logged-out View
                                </label>
                                <p class="help">
                                    Your profile is fully visible to logged-in users, but if a logged-out browser
                                    visits your page they will see a very minimal view: only your profile picture
                                    and display name are shown.
                                    <a href="/u/{{.CurrentUser.Username}}?view=external" target="_blank">Preview <i class="fa fa-external-link"></i></a>
                                </p>

                                <label class="checkbox mt-2">
                                    <input type="radio"
                                        name="visibility"
                                        value="private"
                                        {{if eq .CurrentUser.Visibility "private"}}checked{{end}}>
                                    Mark my profile page as "private"
                                </label>
                                <p class="help">
                                    If you check this box then only friends who you have approved are able to
                                    see your profile page and gallery. Your gallery photos also will NOT appear
                                    on the Site Gallery page. If your profile page is visited by a logged-out
                                    viewer, they are prompted to log in.
                                </p>
                            </div>

                            <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. These may appear on the Site
                                    Gallery as well as user profile pages.
                                </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 mb-5" id="account">
                        <header class="card-header has-background-warning">
                            <p class="card-header-title has-text-dark-dark">
                                <i class="fa fa-gear pr-2"></i>
                                Account Settings
                            </p>
                        </header>

                        <div class="card-content">
                            <div class="field">
                                <label class="label" for="old_password">
                                    Current Password
                                </label>
                                <input type="password" class="input"
                                    name="old_password"
                                    id="old_password"
                                    placeholder="Current password"
                                    required>
                                <p class="help">
                                    Enter your current password before making any changes to your
                                    email address or setting a new password.
                                </p>
                            </div>
                            <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"
                                    value="{{.CurrentUser.Email}}">
                            </div>

                            <div class="field">
                                <label class="label">Change Password</label>
                                <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>

                <!-- Delete Account -->
                <div class="card mb-5" 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>
                            Delete Account
                        </p>
                    </header>

                    <div class="card-content">
                        <p class="block">
                            If you would like to delete your account, please click
                            on the button below.
                        </p>

                        <p class="block">
                            <a href="/account/delete" class="button is-danger">
                                Delete My Account
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}