{{define "title"}}People{{end}}
{{define "content"}}
<div class="container">
    {{$Root := .}}
    <section class="hero is-link is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    {{if eq .Sort "distance"}}
                        <i class="fa fa-location-dot mr-2"></i>
                        Who's Nearby
                    {{else}}
                        <i class="fa fa-people-group mr-2"></i>
                        People
                    {{end}}
                </h1>
                <h2 class="subtitle">Member Directory</h2>
            </div>
        </div>
    </section>

    <form action="/members" method="GET">
    <div class="p-4">

        <div class="columns">
            <div class="column">
                Found {{.Pager.Total}} user{{Pluralize64 .Pager.Total}}
                (page {{.Pager.Page}} of {{.Pager.Pages}}).
            </div>
        </div>

        {{if not (eq .Sort "distance")}}
        <div class="notification is-success is-light">
            <strong>New feature:</strong> you can now see <strong>Who's Nearby!</strong>
            {{if not .MyLocation.Source}}
                You will need to <a href="/settings#location">set your location</a> first.
            {{else}}
                <a href="{{.Request.URL.Path}}?sort=distance">See who's nearby now!</a>
            {{end}}
        </div>
        {{else}}
        <div class="notification is-success is-light">
            Showing you <strong>Who's Nearby.</strong>

            <!-- Show options to refresh their location -->
            {{if eq .MyLocation.Source "geoip"}}
                You set your location automatically by your IP address <small>(currently {{.GeoIPInsights.Short}}).</small>
                <a href="/settings#location">Update settings?</a>
            {{else if eq .MyLocation.Source "gps"}}
                Your location was set by your GPS location.
                <a href="/settings#location" id="gpsRefresh">Refresh your location now?</a>
            {{else if eq .MyLocation.Source "pin"}}
                You set your location by pin on a map.
                <a href="/settings#location">Update your location?</a>
            {{end}}
        </div>
        {{end}}

        <div class="block">

            <div class="card nonshy-collapsible-mobile">
                <header class="card-header has-background-link-light">
                    <p class="card-header-title">
                        Search Filters
                    </p>
                    <button class="card-header-icon" type="button">
                        <span class="icon">
                            <i class="fa fa-angle-up"></i>
                        </span>
                    </button>
                </header>
                <div class="card-content">
                    <div class="columns is-multiline">

                        <div class="column">
                            <div class="field">
                                <label class="label">Status:</label>
                                <div class="select is-fullwidth">
                                    <select id="certified" name="certified">
                                        <option value="true">Only certified users</option>
                                        {{if .CurrentUser.IsInnerCircle}}
                                            <option value="circle"{{if eq $Root.Certified "circle"}} selected{{end}}>Inner circle only</option>
                                        {{end}}
                                        <option value="false"{{if eq $Root.Certified "false"}} selected{{end}}>Show all users</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="column">
                            <div class="field">
                                <label class="label">Partial username:</label>
                                <input type="text" class="input"
                                    name="username"
                                    autocomplete="off"
                                    value="{{$Root.EmailOrUsername}}">
                            </div>
                        </div>

                        <div class="column">
                            <div class="field">
                                <label class="label">Age:</label>
                                <div class="columns is-mobile">
                                    <div class="column">
                                        <div class="select">
                                            <select name="age_min">
                                                <option value="">Min</option>
                                                {{range IterRange 18 120}}
                                                <option value="{{.}}"{{if eq $Root.AgeMin .}} selected{{end}}>{{.}}</option>
                                                {{end}}
                                            </select>
                                        </div>
                                        <div class="select">
                                            <select name="age_max">
                                                <option value="">Max</option>
                                                {{range IterRange 18 120}}
                                                <option value="{{.}}"{{if eq $Root.AgeMax .}} selected{{end}}>{{.}}</option>
                                                {{end}}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="column">
                            <div class="field">
                                <label class="label" for="gender">Gender:</label>
                                <div class="select is-fullwidth">
                                    <select id="gender" name="gender">
                                        <option value=""></option>
                                        {{range .Enum.Gender}}
                                        <option value="{{.}}"{{if eq $Root.Gender .}} selected{{end}}>{{.}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="column">
                            <div class="field">
                                <label class="label" for="orientation">Orientation:</label>
                                <div class="select is-fullwidth">
                                    <select id="orientation" name="orientation">
                                        <option value=""></option>
                                        {{range .Enum.Orientation}}
                                        <option value="{{.}}"{{if eq $Root.Orientation .}} selected{{end}}>{{.}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="column">
                            <div class="field">
                                <label class="label" for="marital_status">Relationship:</label>
                                <div class="select is-fullwidth">
                                    <select id="marital_status" name="marital_status">
                                        <option value=""></option>
                                        {{range .Enum.MaritalStatus}}
                                        <option value="{{.}}"{{if eq $Root.MaritalStatus .}} selected{{end}}>{{.}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="columns is-centered">
                        <div class="column is-narrow pr-1">
                            <strong>Sort by:</strong>
                        </div>
                        <div class="column is-narrow pl-1">
                            <div class="select is-full-width">
                                <select id="sort" name="sort">
                                    <option value="last_login_at desc"{{if eq .Sort "last_login_at desc"}} selected{{end}}>Last login</option>
                                    <option value="created_at desc"{{if eq .Sort "created_at desc"}} selected{{end}}>Signup date</option>
                                    <option value="username"{{if eq .Sort "username"}} selected{{end}}>Username (a-z)</option>
                                    <option value="lower(name)"{{if eq .Sort "lower(name)"}} selected{{end}}>Name (a-z)</option>
                                    <option value="distance"{{if eq .Sort "distance"}} selected{{end}}>Distance to me</option>
                                </select>
                            </div>
                        </div>
                        <div class="column is-narrow">
                            <a href="/members" class="button">Reset</a>
                            <button type="submit" class="button is-success">
                                <span>Search</span>
                                <span class="icon"><i class="fa fa-search"></i></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{SimplePager .Pager}}

        <div class="columns is-multiline">

            {{range .Users}}
            <div class="column is-half-tablet is-one-third-desktop">

                <div class="card">
                    <div class="card-content">
                        <div class="media block">
                            <div class="media-left">
                                {{template "avatar-64x64" .}}
                            </div>
                            <div class="media-content">
                                <p class="title is-4">
                                    <a href="/u/{{.Username}}" class="has-text-dark">
                                        {{if ne .Status "active"}}
                                            <del>{{.NameOrUsername}}</del>
                                        {{else}}
                                            {{.NameOrUsername}}
                                        {{end}}
                                        {{if and $Root.CurrentUser.IsInnerCircle .InnerCircle}}
                                            <img src="/static/img/circle-16.png">
                                        {{end}}
                                    </a>
                                    {{if eq .Visibility "private"}}
                                        <sup class="fa fa-mask is-size-7" title="Private Profile"></sup>
                                    {{end}}
                                </p>
                                <p class="subtitle is-6 mb-2">
                                    <span class="icon"><i class="fa fa-user"></i></span>
                                    <a href="/u/{{.Username}}">{{.Username}}</a>
                                    {{if not .Certified}}
                                    <span class="has-text-danger is-size-7">
                                        <i class="fa fa-certificate"></i>
                                        <span>Not Certified!</span>
                                    </span>
                                    {{end}}

                                    <!-- "(banned)" label -->
                                    {{if ne .Status "active"}}<small>({{.Status}})</small>{{end}}

                                    {{if .IsAdmin}}
                                    <span class="tag is-danger is-light p-1" style="font-size: x-small">
                                        <i class="fa fa-gavel mr-1"></i>
                                        <span>Admin</span>
                                    </span>
                                    {{end}}

                                    <!-- Photo count pulled to the right -->
                                    <a href="/photo/u/{{.Username}}" class="tag is-info is-light is-pulled-right">
                                        <i class="fa fa-camera mr-2"></i>
                                        {{$Root.PhotoCountMap.Get .ID}}
                                    </a>
                                </p>
                                {{if .GetProfileField "city"}}
                                <p class="subtitle is-6 mb-2">
                                    {{.GetProfileField "city"}}
                                </p>
                                {{end}}
                                <p class="subtitle is-7 mb-2">
                                    {{if or (ne .GetDisplayAge "n/a")}}
                                    <span class="mr-2">{{.GetDisplayAge}}</span>
                                    {{end}}

                                    {{if .GetProfileField "gender"}}
                                    <span class="mr-2">{{.GetProfileField "gender"}}</span>
                                    {{end}}

                                    {{if .GetProfileField "pronouns"}}
                                    <span class="mr-2">{{.GetProfileField "pronouns"}}</span>
                                    {{end}}

                                    {{if .GetProfileField "orientation"}}
                                    <span class="mr-2">{{.GetProfileField "orientation"}}</span>
                                    {{end}}

                                    <!-- Show a subfooter based on ordered by -->
                                    {{if eq $Root.Sort "last_login_at desc"}}
                                    <div>
                                        <small>
                                            Last logged in:
                                            <span title="On {{.LastLoginAt.Format "Jan _2 2006 15:04:05 MST"}}">
                                                {{SincePrettyCoarse .LastLoginAt}} ago
                                            </span>
                                        </small>
                                    </div>
                                    {{end}}

                                    {{if eq $Root.Sort "created_at desc"}}
                                    <div>
                                        <small>
                                            Member since:
                                            <span title="On {{.CreatedAt.Format "Jan _2 2006 15:04:05 MST"}}">
                                                {{SincePrettyCoarse .CreatedAt}} ago
                                            </span>
                                        </small>
                                    </div>
                                    {{end}}

                                    <!-- Ordered by distance? -->
                                    {{if eq $Root.Sort "distance"}}
                                    <div>
                                        {{$Root.DistanceMap.Get .ID}} away
                                    </div>
                                    {{end}}
                                </p>
                            </div>
                        </div><!-- media-block -->
                    </div>
                </div>

            </div>
            {{end}}<!-- range .Friends -->
        </div>

        {{SimplePager .Pager}}

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