website/web/templates/account/search.html
2023-08-19 21:09:23 -07:00

319 lines
16 KiB
HTML

{{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}}