{{define "title"}}Chat Rooms{{end}}
{{define "content"}}
<div class="block">
    <section class="hero is-light is-bold">
        <div class="hero-body">
            <div class="container">
                <div class="level">
                    <div class="level-left">
                        <h1 class="title">
                            <span class="icon mr-4"><i class="fa fa-image"></i></span>
                            <span>{{template "title" .}}</span>
                        </h1>
                    </div>
                    <div class="level-right">
                        <div>
                            <a href="/chat?intent=join" target="_blank" class="button">
                                <span>Join the Chat Room</span>
                                <span class="icon"><i class="fa fa-external-link"></i></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="block p-4">
    {{if .CurrentUser.IsBirthday}}
    <div class="notification is-success is-light content">
        <h2>🎂 Happy birthday!</h2>

        <p>
            If you would like, you may enter the chat room with a special 🍰 birthday cake emoji next to
            your username instead of the usual country flag. This is totally optional and you may do this
            by clicking the button <em>below</em> to enter the chat room:
        </p>

        <p>
            <a href="/chat?intent=join&birthday=true" class="button" target="_blank">
                🍰 Join the Chat Room
            </a>
            <a href="/chat?intent=join" class="button ml-2" target="_blank">
                No thanks; join the chat normally
            </a>
        </p>
    </div>
    {{end}}

    {{if .IsShyUser}}
    <div class="notification is-danger is-light">
        <i class="fa fa-exclamation-triangle"></i> You have a <strong>Shy Account</strong> and you may not enter
        the chat room at this time, where our {{PrettyTitle}} members may be sharing their cameras. You are
        sharing no public photos with the community, so you get limited access to ours.
        <a href="/faq#shy-faqs">Learn more about how to resolve this issue. <small class="fa fa-external-link"></small></a>
    </div>
    {{end}}

    <!-- Public Avatar Consent notification -->
    {{if Now.Before .PublicAvatarEnforcementDate}}
    <div class="notification is-info is-light">
        <i class="fa fa-info-circle mr-2"></i>
        <strong>Notice of an upcoming website policy change:</strong> beginning on {{.PublicAvatarEnforcementDate.Format "January 2, 2006"}},
        all square cropped default profile pictures will need to be made visible to all {{PrettyTitle}} members. The
        <img src="/static/img/shy-friends.png" width="16" height="16" alt=""> yellow and
        <img src="/static/img/shy-private.png" width="16" height="16" alt=""> purple placeholder avatars
        that you sometimes see in the chat room will be going away after that time.<br><br>
        Please <a href="{{.PublicAvatarForumThread}}">see the announcement post on the forum</a> for more information.
    </div>
    {{end}}

    <div class="content">
        <p>
            {{PrettyTitle}} has a chat room! Come and check it out. It features some public rooms, direct
            messages, and optional webcam support too. You may broadcast your video and other users may click
            to watch yours, and you can open one or multiple videos broadcasted by the other chatters.
        </p>

        <div class="notification is-success is-light" id="chatStatsBanner" style="display: none">
            <span id="usersOnline"></span>
            <a id="whoLink" href="#" style="visibility: hidden">Who?</a>
            <span id="whoList" style="display: none"></span>

            <!-- Friends online? -->
            {{if .FriendsOnline}}
            <div class="mt-2">
                <i class="fa fa-user-group mr-1"></i>
                <strong>{{len .FriendsOnline}} friend{{Pluralize (len .FriendsOnline)}}</strong>
                {{Pluralize (len .FriendsOnline) "is" "are"}} currently online:
                {{$FriendsOnline := .FriendsOnline}}
                {{range $i, $name := .FriendsOnline -}}
                    {{- if $i -}}, {{end}}<a href="/u/{{ $name }}">{{ $name }}</a>
                {{- end}}
            </div>
            {{end}}

            <!-- Camera stats if active -->
            <div id="cameraStats" style="display: none" class="mt-2">
                <i class="fa fa-camera mr-1"></i>
                <span id="cameraCount">0 people are on camera</span>
                <span class="is-size-7">
                    (<i class="fa fa-video has-text-info"></i> <span id="cameraBlue" class="has-text-info">0</span> /
                    <i class="fa fa-video has-text-danger"></i> <span id="cameraRed" class="has-text-danger">0</span>).
                </span>
            </div>
        </div>

        <h3>Chat Room Rules</h3>

        <p>
            Please observe the following rules for the chat room.
        </p>

        <ul>
            <li>
                Be nice and respectful. <a href="/tos">Global website rules</a> apply to the chat room as well!
            </li>
            <li>
                You are permitted to be sexual on camera, but please <strong>mark your video as <span class="has-text-danger">Explicit</span></strong>
                by clicking the <i class="fa fa-fire has-text-danger"></i> button at the top of the screen (or opting in
                via the checkbox when you start your camera). This will allow other chatters to be warned before
                they open your video* in case they don't want to see that stuff. Remember: <strong>consent is sexy!</strong>
            </li>
            <li>
                <i class="fa fa-exclamation-triangle has-text-danger mr-1"></i>
                The following sorts of activities will get you <strong class="has-text-danger">removed from the chat room</strong>:
                <ol>
                    <li class="mb-4">
                        If a moderator marks your camera as <span class="has-text-danger"><i class="fa fa-fire mr-1"></i> Explicit</span>
                        on your behalf, and you fight them and mark your camera blue again. Don't be offended that your cam was marked as
                        Explicit if you're on there jerking off. Remember: it's a courtesy to others -- your red camera lets people know you're
                        probably jerking off in case someone doesn't want to see that.<br><br>
                        If you fight the moderator's decision to flag your camera, you may be kicked or (temporarily) banned from the chat room.
                    </li>
                    <li class="mb-4">
                        If you boot moderators <em>off</em> of watching your camera <em>so that</em> you can violate the previous rule (and
                        jerk off with your camera still on blue), this may result in an immediate (temporary) ban from the chat room. If you
                        make a pattern of this, you may be removed from the {{PrettyTitle}} website completely.
                    </li>
                    <li>
                        Breaking the <a href="/tos">global website rules</a> or doing something illegal on chat will naturally result in a
                        swift ban from the chat room and possibly a ban of your website account altogether depending on the severity of the
                        incident.
                    </li>
                </ol>
            </li>
        </ul>

        <p>
            <small>* Explicit videos will show with a red <i class="fa fa-video has-text-danger"></i> icon instead of
            <i class="fa fa-video has-text-info"></i> blue in the Who List so people can know what they're
            getting into before they open your cam, in case someone prefers <em>not</em> to just see some
            guy jerking off.</small>
        </p>

        <p>
            For a tour of the chat interface &amp; features, see the <a href="https://chat.nonshy.com/about">Chat Help page</a>.
        </p>

        <p>
            Click on the button below to join the chat room:
        </p>

        <p>
            <a href="/chat?intent=join" target="_blank"
                class="button is-large is-link">
                Join the Chat Room Now
                <i class="fa fa-external-link ml-3"></i>
            </a>
        </p>
    </div>

</div>

<script>
function showWhoBanner(chatStatistics) {
    const $banner = document.querySelector("#chatStatsBanner"),
        $whoLink = document.querySelector("#whoLink"),
        $whoList = document.querySelector("#whoList"),
        $usersOnline = document.querySelector("#usersOnline")
        $cameraStats = document.querySelector("#cameraStats")
        $cameraCount = document.querySelector("#cameraCount")
        $cameraRed = document.querySelector("#cameraRed")
        $cameraBlue = document.querySelector("#cameraBlue");

    $banner.style.display = "block";

    let people = chatStatistics.UserCount === 1 ? 'person' : 'people';
    let isAre = chatStatistics.UserCount === 1 ? 'is' : 'are';
    $usersOnline.innerHTML = `There ${isAre} currently <strong>${chatStatistics.UserCount}</strong> ${people}</span> in the chat room`;
    $whoList.innerHTML = chatStatistics.Usernames !== null ? chatStatistics.Usernames.join(", ") : "";

    // Show the "Who?" link if there's anybody.
    if (chatStatistics.UserCount > 0) {
        $usersOnline.innerHTML += ":";
        $whoLink.style.visibility = "visible";
    } else {
        $usersOnline.innerHTML += ".";
    }

    // Camera stats too?
    if (chatStatistics.Cameras.Blue + chatStatistics.Cameras.Red > 0) {
        let count = chatStatistics.Cameras.Blue + chatStatistics.Cameras.Red;
        $cameraStats.style.display = "block";
        $cameraCount.innerHTML = `<strong>${count} webcam${count === 1 ? '</strong> is' : 's</strong> are'} active`;
        $cameraRed.innerHTML = chatStatistics.Cameras.Red;
        $cameraBlue.innerHTML = chatStatistics.Cameras.Blue;
    }

    $whoLink.addEventListener("click", (e) => {
        e.preventDefault();
        $whoLink.style.display = "none";
        $whoList.style.display = "";
    });
}
window.addEventListener("DOMContentLoaded", () => {
    let ChatStatistics = {{.ChatStatistics}},
        $banner = document.querySelector("#chatStatsBanner"),
        $usersOnline = document.querySelector("#usersOnline");

    // If we already know people are online, show the banner immediately while we refresh from live data
    if (ChatStatistics.UserCount > 0) {
        showWhoBanner(ChatStatistics);
    }
});
</script>
{{end}}