{{define "title"}}A peek inside the {{.Title}} website{{end}}
{{define "content"}}
<div class="block">
    <section class="hero is-light is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">A peek inside the {{PrettyTitle}} website</h1>
                <h2 class="subtitle">Some statistics &amp; demographics of our members &amp; content</h2>
            </div>
        </div>
    </section>
</div>

<div class="block p-4">
    <div class="content">
        <p>
            This page provides some insights into the distribution of content and member demographics
            in the {{PrettyTitle}} community.
        </p>

        <p>
            If you are a prospective new member and are curious about whether this isn't actually "just another porn site,"
            hopefully this page will help answer some of those questions for you.
        </p>

        <p>
            We have found that {{PrettyTitle}} actually fills a much needed niche <em>in between</em> the two
            opposite poles of the "strict naturist website" and the "hyper sexual porn sites" that exist elsewhere
            online. Many of our members have come here from other major nudist websites, and we have so far maintained a
            nice balance in content: <strong>most</strong> of what people share here are "normal nudes" that
            don't contain any sexual undertones at all!
        </p>
        
        <p>
            On our <a href="/features#webcam-chat-room">webcam chat room</a>, though we permit people to be sexual
            on camera when they want to be, we typically maintain a balance where <em>most</em> of the webcams are
            "blue" (or non-sexual in nature). Members are asked to mark their webcams as 'explicit' (red) when they are
            being horny, so you may have informed consent as to whether you want to open their red cam and watch.
        </p>

        <p>
            The insights on this page should hopefully back up this story with some hard numbers so you may get a preview
            of what you may expect to find on this website should you decide to join us here.
        </p>

        <p>
            {{PrettyTitle}} is open to <strong>all</strong> nudists &amp; exhibitionists and we'd love to have you join our community!
        </p>

        <p>
            <strong><em>Last Updated:</em></strong> these website statistics were last collected
            on {{.Demographic.LastUpdated.Format "Jan _2, 2006 @ 15:04:05 MST"}}

            <!-- Admin: force refresh -->
            {{if and .LoggedIn .CurrentUser.IsAdmin}}
            <a href="{{.Request.URL.Path}}?refresh=true" class="has-text-danger ml-2">
                <i class="fa fa-peace"></i> Refresh now
            </a>
            {{end}}
        </p>
    </div>

    <!--
        Photo Gallery Statistics
    -->

    <hr>

    <div class="content">
        <h2>
            <i class="fa fa-image mr-2"></i>
            Photo Gallery
        </h2>

        <p>
            Our members have shared <strong>{{FormatNumberCommas .Demographic.Photo.Total}}</strong> photos on
            "public" for the whole {{PrettyTitle}} community to see. The majority of these photos tend to be "normal nudes"
            and are non-sexual in nature (for example, not featuring so much as an erection or sexually enticing pose).
        </p>
    </div>

    <div class="columns">
        <div class="column is-2">
            <strong>Non-Explicit</strong>
            <small class="has-text-grey">({{FormatNumberCommas .Demographic.Photo.NonExplicit}})</small>
        </div>
        <div class="column pt-4">
            <progress class="progress is-link"
                value="{{.Demographic.Photo.PercentNonExplicit}}"
                max="100"
                title="{{.Demographic.Photo.PercentNonExplicit}}%">
                {{.Demographic.Photo.PercentNonExplicit}}%
            </progress>
        </div>
        <div class="column is-narrow nonshy-percent-alignment">
            {{.Demographic.Photo.PercentNonExplicit}}%
        </div>
    </div>
    <div class="columns">
        <div class="column is-2">
            <strong>Explicit</strong>
            <small class="has-text-grey">({{FormatNumberCommas .Demographic.Photo.Explicit}})</small>
        </div>
        <div class="column pt-4">
            <progress class="progress is-danger"
                value="{{.Demographic.Photo.PercentExplicit}}"
                max="100"
                title="{{.Demographic.Photo.PercentExplicit}}%">
                {{.Demographic.Photo.PercentExplicit}}%
            </progress>
        </div>
        <div class="column is-narrow nonshy-percent-alignment">
            {{.Demographic.Photo.PercentExplicit}}%
        </div>
    </div>

    <div class="content">
        <p>
            Remember: this website is "nudist friendly" by default, and you must <strong>opt-in</strong> if you want to
            see the 'explicit' content on this website.
        </p>

        <p>
            So far: <strong>{{FormatNumberCommas .Demographic.People.ExplicitOptIn}}</strong> of our members
            ({{.Demographic.People.PercentExplicit}}%) opt-in to see explicit content, and
            <strong>{{FormatNumberCommas .Demographic.People.ExplicitPhoto}}</strong>
            ({{.Demographic.People.PercentExplicitPhoto}}%) of them have actually shared at least one 'explicit'
            photo on their public gallery.
        </p>
    </div>

    <!--
        People statistics
    -->
    
    <hr>

    <div class="content">
        <h2>
            <i class="fa fa-people-group mr-2"></i>
            People
        </h2>

        <p>
            We currently have <strong>{{FormatNumberCommas .Demographic.People.Total}}</strong> members who have
            verified their <a href="/faq#certification-faqs">certification photo</a> with the site admin.
        </p>

        <p>
            Below are some high-level demographics of who you may expect to find on this website. As a note on
            genders: the majority of our members tend to be men, but we do have a handful of women here too.
            {{PrettyTitle}} grows <em>exclusively</em> by word of mouth: if you know any women who might like
            the vibe of this place, please do recommend that they check it out!
        </p>
    </div>

    <div class="columns">
        <div class="column">
            <h4 class="is-size-5 mb-4">By Age Range</h4>

            {{range .Demographic.People.IterAgeRanges}}
            <div class="columns">
                <div class="column is-3">
                    <strong>{{or .Label "(No answer)"}}</strong>
                    <small class="has-text-grey">({{FormatNumberCommas .Count}})</small>
                </div>
                <div class="column pt-4">
                    <progress class="progress is-success"
                        value="{{.Percent}}"
                        max="100"
                        title="{{.Percent}}%">
                        {{.Percent}}%
                    </progress>
                </div>
                <div class="column is-narrow nonshy-percent-alignment">
                    {{.Percent}}%
                </div>
            </div>
            {{end}}
        </div>

        <div class="column">
            <h4 class="is-size-5 mb-4">By Gender</h4>

            {{range .Demographic.People.IterGenders}}
            <div class="columns">
                <div class="column is-3">
                    <strong>{{or .Label "No answer"}}</strong>
                    <small class="has-text-grey">({{FormatNumberCommas .Count}})</small>
                </div>
                <div class="column pt-4">
                    <progress class="progress is-link"
                        value="{{.Percent}}"
                        max="100"
                        title="{{.Percent}}%">
                        {{.Percent}}%
                    </progress>
                </div>
                <div class="column is-narrow nonshy-percent-alignment">
                    {{.Percent}}%
                </div>
            </div>
            {{end}}
        </div>
    </div>
    <div class="columns">
        <div class="column is-half">
            <h4 class="is-size-5 mb-4">By Orientation</h4>

            {{range .Demographic.People.IterOrientations}}
            <div class="columns">
                <div class="column is-3">
                    <strong>{{or .Label "No answer"}}</strong>
                    <small class="has-text-grey">({{FormatNumberCommas .Count}})</small>
                </div>
                <div class="column pt-4">
                    <progress class="progress is-danger"
                        value="{{.Percent}}"
                        max="100"
                        title="{{.Percent}}%">
                        {{.Percent}}%
                    </progress>
                </div>
                <div class="column is-narrow nonshy-percent-alignment">
                    {{.Percent}}%
                </div>
            </div>
            {{end}}
        </div>
    </div>
    
</div>

<!-- Mobile CSS tweaks for this page -->
<style type="text/css">
.nonshy-percent-alignment {
    min-width: 4.5rem;
}
@media screen and (min-width: 769px) {
    .nonshy-percent-alignment {
        text-align: right;
    }
}
</style>
{{end}}