{{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">People</h1>
                <h2 class="subtitle">Explore</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 class="column is-narrow">
                <button type="submit"
                    class="button ml-6"
                    name="page"
                    value="{{.Pager.Previous}}"
                    {{if not .Pager.HasPrevious}}disabled{{end}}>Previous</button>
                <button type="submit"
                    class="button button-primary"
                    name="page"
                    value="{{.Pager.Next}}"
                    {{if not .Pager.HasNext}}disabled{{end}}>Next page</button>
            </div>
        </div>

        <div class="block">

            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        Search Filters
                    </p>
                </header>
                <div class="card-content">
                    <div class="columns is-multiline">

                        <div class="column">
                            <div class="field">
                                <label class="label">Certified:</label>
                                <div class="select is-fullwidth">
                                    <select id="certified" name="certified">
                                        <option value="true">Only certified users</option>
                                        <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">Email or 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>
                                </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>

        <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">
                                <figure class="image is-64x64">
                                    <a href="/u/{{.Username}}" class="has-text-dark">
                                        {{if .ProfilePhoto.ID}}
                                        <img src="{{PhotoURL .ProfilePhoto.CroppedFilename}}">
                                        {{else}}
                                        <img src="/static/img/shy.png">
                                        {{end}}
                                    </a>
                                </figure>
                            </div>
                            <div class="media-content">
                                <p class="title is-4">
                                    <a href="/u/{{.Username}}" class="has-text-dark">
                                        {{.NameOrUsername}}
                                    </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">
                                        <span class="icon"><i class="fa fa-certificate"></i></span>
                                        <span>Not Certified!</span>
                                    </span>
                                    {{end}}

                                    {{if .IsAdmin}}
                                    <span class="has-text-danger">
                                        <span class="icon"><i class="fa fa-gavel"></i></span>
                                        <span>Admin</span>
                                    </span>
                                    {{end}}
                                </p>
                                {{if .GetProfileField "city"}}
                                <p class="subtitle is-6 mb-2">
                                    {{.GetProfileField "city"}}
                                </p>
                                {{end}}
                                <p class="subtitle is-7 mb-2">
                                    {{if not .Birthdate.IsZero }}
                                    <span class="mr-2">{{ComputeAge .Birthdate}}yo</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}}
                                </p>
                            </div>
                        </div><!-- media-block -->
                    </div>
                </div>

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

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