{{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="tabs is-boxed">
            <ul>
                <li class="is-active">
                    <a href="/settings#profile" class="nonshy-tab-button">
                        Profile
                    </a>
                </li>
                <li>
                    <a href="/settings#prefs" class="nonshy-tab-button">
                        Preferences
                    </a>
                </li>
                <li>
                    <a href="/settings#location" class="nonshy-tab-button">
                        Location
                    </a>
                </li>
                <li>
                    <a href="/settings#account" class="nonshy-tab-button">
                        Account
                    </a>
                </li>
            </ul>
        </div>

        <!-- Profile -->
        <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{{if not $User.Birthdate.IsZero}} cursor-not-allowed{{end}}"
                                id="dob"
                                name="dob"
                                value="{{if not $User.Birthdate.IsZero}}{{$User.Birthdate.Format "2006-01-02"}}{{end}}"
                                required
                                {{if not $User.Birthdate.IsZero}}readonly{{end}}>
                            <p class="help">
                                Used to show your age on your profile.
                                {{if not $User.Birthdate.IsZero}}
                                    If you entered a wrong birthdate, <a href="/contact">contact</a> support to change it.
                                {{end}}
                            </p>

                            <!-- Don't show age checkbox -->
                            <label class="checkbox">
                                <input type="checkbox"
                                    name="hide_age"
                                    value="true"
                                    {{if eq ($User.GetProfileField "hide_age") "true"}}checked{{end}}>
                                Don't show my age on my profile
                            </label>
                        </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.
                                <a href="#" onclick="document.querySelector('#pronouns').value='he/him'; return false">he/him</a>;
                                <a href="#" onclick="document.querySelector('#pronouns').value='she/her'; return false">she/her</a>;
                                <a href="#" onclick="document.querySelector('#pronouns').value='they/them'; return false">they/them</a>
                            </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>

        <!-- 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">Explicit Content Filter</label>
                        <label class="checkbox">
                            <input type="checkbox"
                                name="explicit"
                                value="true"
                                {{if .CurrentUser.Explicit}}checked{{end}}>
                            Show explicit content <i class="fa fa-fire has-text-danger ml-1"></i>
                        </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>

                    <hr>

                    <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
                            <i class="fa fa-eye ml-2 has-text-info"></i>
                        </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
                            <i class="fa fa-eye ml-2 has-text-danger"></i>
                        </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"
                            <i class="fa fa-lock ml-2 has-text-private"></i>
                        </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>

                    <hr>

                    <div class="field">
                        <label class="label mb-0">Who can send me the first <i class="fa fa-envelope"></i> Message?</label>

                        <div class="has-text-info ml-4">
                            <small><em>
                            Note: this refers to Direct Messages on the main website
                            (not inside the chat room).
                            </em></small>
                            {{.CurrentUser.GetProfileField "dm_privacy"}}
                        </div>

                        <label class="checkbox">
                            <input type="radio"
                                name="dm_privacy"
                                value=""
                                {{if eq (.CurrentUser.GetProfileField "dm_privacy") ""}}checked{{end}}>
                            Anybody on the site
                        </label>
                        <p class="help">
                            Almost any member of the site may send you a Direct Message from your profile
                            page (except for maybe <a href="/faq#shy-faqs" target="_blank">Shy Accounts</a>).
                        </p>

                        <label class="checkbox">
                            <input type="radio"
                                name="dm_privacy"
                                value="friends"
                                {{if eq (.CurrentUser.GetProfileField "dm_privacy") "friends"}}checked{{end}}>
                            Only people on my Friends list
                        </label>
                        <p class="help">
                            Nobody can slide into your DMs except for friends (and admins if needed). Anybody
                            may <em>reply</em> to messages that you send to them.
                        </p>

                        <label class="checkbox">
                            <input type="radio"
                                name="dm_privacy"
                                value="nobody"
                                {{if eq (.CurrentUser.GetProfileField "dm_privacy") "nobody"}}checked{{end}}>
                            Nobody (close my DMs)
                        </label>
                        <p class="help">
                            Nobody can start a Direct Message conversation with you on the main website
                            (except an admin if necessary). Anybody may <em>reply</em> to messages that you
                            sent to them first.
                        </p>
                    </div>

                    <!-- TODO: manually opt-in dark mode is hairy, look at
                         those media queries in bulma-prefers-dark.js!
                    <div class="field">
                        <label class="label">Website Theme</label>
                        <label class="checkbox">
                            <input type="radio"
                                name="theme"
                                value=""
                                {{if eq ($User.GetProfileField "theme") "" }}checked{{end}}>
                            Automatic
                        </label>
                        <p class="help">
                            Automatically chooses a theme based on your device settings.
                        </p>

                        <label class="checkbox">
                            <input type="radio"
                                name="theme"
                                value="light"
                                {{if eq ($User.GetProfileField "theme") "light" }}checked{{end}}>
                            Light
                        </label>

                        <label class="checkbox">
                            <input type="radio"
                                name="theme"
                                value="dark"
                                {{if eq ($User.GetProfileField "theme") "dark" }}checked{{end}}>
                            Dark
                        </label>
                    </div>
                    -->

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

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

                <div class="card mb-5">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-globe mr-2"></i>
                            Location Settings
                        </p>
                    </header>

                    <div class="card-content">
                        <p class="block">
                            The settings on this page control your location for the <a href="/members?sort=distance"><strong>Who's Nearby</strong></a>
                            feature of {{PrettyTitle}}. Being discoverable by your location is an <strong>opt-in</strong>
                            feature and you have your choice of options how you want your location to be found.
                        </p>

                        <div class="field">
                            <label class="label">How do you want your location to be determined?</label>
                            <label class="checkbox">
                                <input type="radio"
                                    name="source"
                                    value=""
                                    id="location-option-none"
                                    {{if eq .UserLocation.Source ""}}checked{{end}}>
                                    <i class="fa fa-ban ml-2 mr-1 has-text-danger"></i>
                                    Do not share my location with {{PrettyTitle}}.
                            </label>
                            <p class="help mb-4">
                                This option will opt-out of the Who's Nearby feature and your profile will not be
                                discoverable by distance to other members. Any location data already stored by
                                the website will be erased if you choose this option.
                            </p>

                            <label class="checkbox">
                                <input type="radio"
                                    name="source"
                                    value="geoip"
                                    id="location-option-geoip"
                                    {{if eq .UserLocation.Source "geoip"}}checked{{end}}>
                                    <i class="fa fa-network-wired ml-2 mr-1 has-text-info"></i>
                                    Automatically detect my location by my IP address
                            </label>
                            <p class="help mb-4">
                                Course location data based on your IP address. Might be accurate to your
                                city level.

                                <!-- Do we have GeoIP insights? -->
                                {{if not .GeoIPInsights.IsZero}}
                                    <br>
                                    <strong>Currently:</strong>
                                    {{.GeoIPInsights}}
                                {{end}}
                            </p>

                            <label class="checkbox">
                                <input type="radio"
                                    name="source"
                                    value="gps"
                                    id="location-option-gps"
                                    {{if eq .UserLocation.Source "gps"}}checked{{end}}>
                                    <i class="fa fa-location-dot ml-2 mr-1 has-text-success"></i>
                                    Automatically detect my current location by GPS (with your permission)
                            </label>
                            <p class="help mb-4">
                                Your web browser will prompt you to share your current location with {{PrettyTitle}}.
                                <br>
                                <strong>Currently:</strong>
                                <span id="location-status-gps">You have not granted permission.</span>
                                <a href="#" class="fa fa-arrows-rotate" id="gps-refresh" title="Refresh my location"></a>
                            </p>

                            <label class="checkbox">
                                <input type="radio"
                                    name="source"
                                    value="pin"
                                    id="location-option-pin"
                                    {{if eq .UserLocation.Source "pin"}}checked{{end}}>
                                    <i class="fa fa-map-pin ml-2 mr-1 has-text-info"></i>
                                    Drop a pin on the map myself
                            </label>
                            <p class="help mb-4">
                                Use the map below and drop a pin anywhere you like to set your location.
                            </p>
                        </div>

                        <div class="field">
                            <label class="label">
                                Your Current Location (click "Save" when you are satisfied)
                            </label>
                            <p class="block">
                                Your location will be saved as the following in the database:
                            </p>
                            <div class="columns is-mobile" style="max-width: 500px">
                                <div class="column is-half pr-1">
                                    <label class="label mb-0">Latitude:</label>
                                    <input type="text" class="input is-fullwidth"
                                        name="latitude"
                                        id="saveLatitude"
                                        value="{{.UserLocation.Latitude}}"
                                        placeholder="None"
                                        readonly>
                                </div>
                                <div class="column is-half pl-1">
                                    <label class="label mb-0">Longitude:</label>
                                    <input type="text" class="input is-fullwidth"
                                        name="longitude"
                                        id="saveLongitude"
                                        value="{{.UserLocation.Longitude}}"
                                        placeholder="None"
                                        readonly>
                                </div>
                            </div>
                        </div>

                        <div class="field">
                            <button type="submit" class="button is-success"
                                name="intent" value="location">
                                Save My Location Settings
                            </button>
                        </div>

                        <h3 class="is-size-3">Map</h3>

                        <p class="block">
                            This map shows your current location pin. To click and drop a pin manually,
                            select the "Drop a pin on the map myself" option above. Otherwise, the map will
                            center on your GPS location (if available) or your IP address location, depending
                            on your selection above.
                        </p>

                        <div id="map" class="block" style="width: 100%; height: 450px"></div>

                        <p class="block">
                            Map tiles provided by <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap.</a>
                        </p>
                    </div>
                </div>
            </form>
        </div>

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

                <div class="card mb-5">
                    <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">
                <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>
{{end}}
{{define "scripts"}}
<link rel="stylesheet" href="/static/js/openlayers-7.5.1/en/latest/ol/ol.css">
<script src="/static/js/openlayers-7.5.1/en/latest/ol/dist/ol.js"></script>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
    // The tabs
    const $profile = document.querySelector("#profile"),
        $prefs = document.querySelector("#prefs"),
        $location = document.querySelector("#location"),
        $account = document.querySelector("#account"),
        buttons = Array.from(document.getElementsByClassName("nonshy-tab-button"));

    // Hide all by default.
    $profile.style.display = 'none';
    $prefs.style.display = 'none';
    $location.style.display = 'none';
    $account.style.display = 'none';

    // Current tab to select by default.
    let $activeTab = $profile;

    // Global function to toggle the active tab.
    const showTab = (name) => {
        name = name.replace(/\.$/, '');
        if (!name) name = "profile";
        $activeTab.style.display = 'none';
        switch (name) {
            case "prefs":
                $activeTab = $prefs;
                break;
            case "location":
                $activeTab = $location;
                break;
            case "account":
                $activeTab = $account;
                break;
            default:
                $activeTab = $profile;
        }

        // Update the is-active classes on all the tabs.
        buttons.forEach(tab_ => {
            let name_ = tab_.href.split("#").pop(),
                parent = tab_.parentElement;

            if (name !== name_) {
                console.log("button: remove is-active", tab_);
                parent.classList.remove("is-active");
            } else {
                console.log("button %s: ADD is-active", tab_);
                parent.classList.add("is-active");
            }
        });

        $activeTab.style.display = 'block';
        history.replaceState(undefined, undefined, '#'+name);
    };

    // Wire the tab buttons up.
    buttons.forEach(el => {
        let name = el.href.split("#").pop();
        el.addEventListener("click", (e) => {
            showTab(name);

            e.preventDefault();
        });
    })

    // Show the requested tab on first page load.
    showTab(window.location.hash.replace(/^#/, ''));
});

// Location tab scripts.
window.addEventListener("DOMContentLoaded", (event) => {
    // Get useful controls from the tab.
    const $optionGPS = document.querySelector("#location-option-gps"),
        $optionGeoIP = document.querySelector("#location-option-geoip"),
        $optionPin = document.querySelector("#location-option-pin"),
        $optionNone = document.querySelector("#location-option-none"),
        $gpsCurrentStatus = document.querySelector("#location-status-gps"),
        $gpsRefreshButton = document.querySelector("#gps-refresh"),
        $saveLatitude = document.querySelector("#saveLatitude"),
        $saveLongitude = document.querySelector("#saveLongitude");

    // Function to massage coordinates for saving in the DB.
    const saveCoords = (latitude, longitude) => {
        $saveLatitude.value = latitude === null ? "" : latitude.toFixed(2);
        $saveLongitude.value = longitude === null ? "" : longitude.toFixed(2);
    };

    // A lazy-initialized function to handle setting a new pin on the OpenStreetMap widget.
    let setMapPin = null; // function(lonLat)

    // The user's GeoIP coordinates, if available.
    let geoIPInsights = {{ToJSON .GeoIPInsights}},
        savedLocation = {{.UserLocation}};

    // Default GPS coords to select on the map on page load:
    // whatever we get from the backend DB.
    let defaultCoords = [12.5, 41.9];
    if (savedLocation.Latitude != 0 || savedLocation.Longitude != 0) {
        // Prefer the DB saved coords.
        defaultCoords = [
            savedLocation.Longitude,
            savedLocation.Latitude,
        ];
    } else if (geoIPInsights.Latitude != 0 || geoIPInsights.Longitude != 0) {
        // Then fall back on GeoIP coords.
        defaultCoords = [
            geoIPInsights.Longitude,
            geoIPInsights.Latitude,
        ];
    }

    // Is geolocation not supported?
    if (navigator.geolocation == undefined) {
        $gpsCurrentStatus.className = "";
        $gpsCurrentStatus.classList.add("has-text-danger");
        $gpsCurrentStatus.innerHTML = "Geolocation is not supported by your browser.";
    }

    // Geolocation callback funcs.
    const onSuccess = (pos) => {
        const crd = pos.coords;
        $gpsCurrentStatus.className = "";
        $gpsCurrentStatus.classList.add("has-text-success-dark");
        $gpsCurrentStatus.innerHTML = `Lat: ${crd.latitude}; Long: ${crd.longitude}; Accuracy: ${crd.accuracy}`;
        $gpsRefreshButton.style.display = "";

        // Set the form fields.
        saveCoords(crd.latitude, crd.longitude);

        // Can we drop a pin?
        if (setMapPin !== null) {
            setMapPin([crd.longitude, crd.latitude]);
        }
    };
    const onError = (err) => {
        $gpsCurrentStatus.className = "";
        $gpsCurrentStatus.classList.add("has-text-danger");
        $gpsCurrentStatus.innerHTML = `${err.message} (code ${err.code})`;
        $gpsRefreshButton.style.display = "";
    };

    // Get or refresh their location.
    const getLocation = () => {
        if (navigator.geolocation != undefined) {
            $gpsRefreshButton.style.display = "none";
            $gpsCurrentStatus.className = "";
            $gpsCurrentStatus.classList.add("has-text-info");
            $gpsCurrentStatus.innerHTML = "Requesting your current location...";
            navigator.geolocation.getCurrentPosition(onSuccess, onError, {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 0,
            });
        }
    };

    // Set an onClick handler for the GPS location tab, to request
    // permission from the user's browser.
    $optionGPS.addEventListener("click", (e) => {
        getLocation();
    });

    // Wire the refresh button.
    $gpsRefreshButton.addEventListener("click", (e) => {
        e.preventDefault();
        getLocation();
    });

    // If the user goes back to GeoIP coords, reinitialize the defaults.
    $optionGeoIP.addEventListener("click", (e) => {
        // Set the form fields.
        // NOTE: defaultCoords are [lon, lat] we want [lat, lon]
        saveCoords(defaultCoords[1], defaultCoords[0]);

        if (setMapPin !== null) {
            setMapPin(defaultCoords);
        }
    });

    // If the user disables their geolocation.
    $optionNone.addEventListener("click", (e) => {
        saveCoords(null, null);
    });

    /***
     * OpenLayers Map Widget
     ***/

    let vectorSource = new ol.source.Vector(),
        vectorLayer = new ol.layer.Vector({
            source: vectorSource,
        });

    let map = new ol.Map({
        target: 'map',  // the <div id="map"> target
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            vectorLayer
        ],

        // The view allows to specify the center, resolution, and rotation of the map.
        view: new ol.View({
            center: ol.proj.fromLonLat(defaultCoords),
            zoom: 10
        })
    });

    // Define the function to drop a pin.
    let onMapClick = (coordinate, { center=true }) => {
        vectorSource.clear();
        let feature = new ol.Feature(new ol.geom.Point(coordinate));
        vectorSource.addFeatures([feature]);

        let prettyCoord = ol.coordinate.toStringHDMS(
            ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'),
            2,
        );
        console.log("COORDINATE: " + prettyCoord);

        // Center the map on the pin.
        if (center) {
            map.setView(new ol.View({
                center: coordinate,
                zoom: 10
            }));
        }
    };

    setMapPin = (lonLat) => {
        let center = ol.proj.fromLonLat(lonLat);
        onMapClick(ol.proj.fromLonLat(lonLat), {center: true});
    };

    map.on('click', (e) => {
        // Do not drop a pin if the option isn't set.
        if (!$optionPin.checked) return;

        // Save the selected coords to the form.
        let center = ol.proj.toLonLat(e.coordinate);
        saveCoords(center[1], center[0]);

        onMapClick(e.coordinate, {center: false});
    });

    // Drop the initial pin at the default coords.
    setMapPin(defaultCoords);
});
</script>
{{end}}