{{define "title"}}An update about your Default Profile Picture{{end}}
{{define "content"}}
<div class="container">
    <section class="hero is-info is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    An update about your Default Profile Picture
                </h1>
                <h2 class="subtitle">
                    Please review the upcoming website change about our Default Profile Picture policy
                </h2>
            </div>
        </div>
    </section>

    <div class="block p-4">
        <div class="level">
            <div class="level-item">
                <div class="card" style="width: 100%; max-width: 800px">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-image mr-2"></i>
                            We are updating our Default Profile Picture policy
                        </p>
                    </header>
                    <div class="card-content">

                        <div class="content">
                            <p>
                                This page serves as a notification about an upcoming change to the {{PrettyTitle}} site
                                policy around the visibility of your <strong>square cropped Default Profile Picture</strong>
                                (which we will refer to as your <strong>"Avatar"</strong> for the purpose of this page).
                            </p>

                            <p>
                                Beginning on <strong>{{.PublicAvatarEnforcementDate.Format "January 2, 2006"}}</strong>,
                                all {{PrettyTitle}} members will be required to make their Avatar (the square cropped,
                                default profile picture which includes your face) visible to all members of the website.
                                After {{.PublicAvatarEnforcementDate.Format "January 2"}}, you will not be permitted to
                                use the chat room, forums, site gallery or other 'certification required' pages until you
                                have responded to this consent form by answering the prompt at the bottom of this page.
                            </p>

                            <p>
                                If your profile picture is already set to "Public" visibility: no action is needed from
                                you at this time. However, you may be asked to respond to this consent form in the future
                                if you set a non-public photo to be your default profile picture.
                            </p>

                            <ul>
                                <li>
                                    <a href="#summary">Summary of the change</a>
                                </li>
                                <li>
                                    <a href="#what">What is being changed about our Avatars?</a>
                                </li>
                                <li>
                                    <a href="#fullsize">Your full-size profile picture can still remain private</a>
                                </li>
                                <li>
                                    <a href="#consent">Your consent is requested for this change</a>
                                </li>
                                <li>
                                    <a href="#disagree">What if I disagree with this change?</a>
                                </li>
                            </ul>

                            <hr>

                            <h3 id="summary">Summary of the change</h3>

                            <ul>
                                <li>
                                    On the {{PrettyTitle}} website, all <strong>square cropped default profile pictures</strong>
                                    will become visible to everybody on the site, instead of showing as a yellow or purple
                                    placeholder image when your full-size profile picture was set to "Friends-only" or "Private"
                                    visibility.
                                </li>
                                <li>
                                    The <strong>full size profile photo</strong> on your gallery can remain as "Friends-only" or
                                    "Private" if you want; but the square Avatar shown next to your name on most pages of the
                                    website will be visible to all logged-in members.
                                </li>
                                <li>
                                    The website policy that <strong>your Avatar must show your face</strong> will also be more
                                    strictly enforced along with this change. We want to know that <em>everybody</em> on {{PrettyTitle}}
                                    has a face that we can all see.
                                </li>
                                <li>
                                    <strong class="has-text-success">Your consent is required</strong> for this change. If your
                                    profile picture is <em>currently</em> non-public, we <strong>will not</strong> begin showing it
                                    to others on the website until you acknowledge and agree to this change in site policy.
                                </li>
                            </ul>

                            <hr>

                            <h3 id="what">What is being changed about our Avatars?</h3>

                            <p>
                                Previously, it was possible to set your Default Profile Picture on your gallery page as
                                "Private" or "Friends-only" visibility, and it would cause your <strong>square cropped Avatar</strong>
                                icon to show as a placeholder image to people who were not allowed to see the full-size copy
                                on your gallery.
                            </p>

                            <p>
                                For example, if your profile picture was set to "Friends-only" then a
                                <img src="/static/img/shy-friends.png" width="16" height="16" alt=""> yellow placeholder avatar
                                would be shown in its place to people who are not on your Friends list, or a
                                <img src="/static/img/shy-private.png" width="16" height="16" alt=""> purple placeholder avatar
                                would stand in for your "Private" profile picture to people who you did not grant access.
                            </p>

                            <p>
                                Going forward, the square cropped Avatar images will be moved to become
                                <strong>visible to everybody</strong> who is logged-in to the website. Here
                                is an example of how your profile card may look to people before, and after
                                this change:
                            </p>
                        </div>

                        <div class="columns">
                            <div class="column">
                                <em class="is-size-4">
                                    <strong class="has-text-info">Before:</strong>
                                </em>

                                <div class="media block mt-2">
                                    <div class="media-left">
                                        <figure class="image is-48x48 is-inline-block">
                                            {{if eq .CurrentUser.ProfilePhoto.Visibility "friends"}}
                                            <img src="/static/img/shy-friends.png">
                                            {{else if eq .CurrentUser.ProfilePhoto.Visibility "private"}}
                                            <img src="/static/img/shy-private.png">
                                            {{else if .CurrentUser.ProfilePhoto.ID}}
                                            <img src="{{PhotoURL .CurrentUser.ProfilePhoto.CroppedFilename}}">
                                            {{else}}
                                            <img src="/static/img/shy.png">
                                            {{end}}
                                        </figure>
                                    </div>
                                    <div class="media-content">
                                        <p class="title is-5">
                                            {{.CurrentUser.NameOrUsername}}
                                        </p>
                                        <p class="subtitle is-6">
                                            <span class="icon"><i class="fa fa-user"></i></span>
                                            {{.CurrentUser.Username}}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="column">
                                <em class="is-size-4">
                                    <strong class="has-text-success">After:</strong>
                                </em>

                                <div class="media block mt-2">
                                    <div class="media-left">
                                        <figure class="image is-48x48 is-inline-block">
                                            {{if .CurrentUser.ProfilePhoto.ID}}
                                            <img src="{{PhotoURL .CurrentUser.ProfilePhoto.CroppedFilename}}">
                                            {{else}}
                                            <img src="/static/img/shy.png">
                                            {{end}}
                                        </figure>
                                    </div>
                                    <div class="media-content">
                                        <p class="title is-5">
                                            {{.CurrentUser.NameOrUsername}}
                                        </p>
                                        <p class="subtitle is-6">
                                            <span class="icon"><i class="fa fa-user"></i></span>
                                            {{.CurrentUser.Username}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Already a public picture -->
                        {{if and (.CurrentUser.ProfilePhoto.ID) (eq .CurrentUser.ProfilePhoto.Visibility "public")}}
                        <div class="notification is-success is-light p-4">
                            <strong>Notice:</strong> your default profile picture is already set to 'Public' visibility,
                            so this change in site policy will not affect you.
                        </div>
                        {{end}}

                        <div class="content">
                            <hr>

                            <h3 id="fullsize">Your full-size profile picture can still remain private</h3>

                            <p>
                                This change in website policy <strong>only</strong> applies to the
                                <strong>square cropped Avatar image</strong> of your profile picture -- the
                                image shown on the top of your profile page and next to your name on the chat
                                room, forums, and other places around the {{PrettyTitle}} website.
                            </p>

                            <p>
                                Your <strong>full size default profile photo</strong> can still be kept on "Friends-only"
                                or "Private" visibility. So, for example: if your default profile photo is a full-body nude
                                picture that includes your face, you could crop your Avatar to show only your face (visible
                                to everybody) but you can leave the full-size photo on Private if you don't want everybody
                                to see it.
                            </p>

                            <hr>

                            <h3 id="consent" class="has-text-success">Your consent is requested for this change</h3>

                            <p>
                                If your profile picture is currently "Private" or "Friends-only," we <strong>will not</strong>
                                automatically reveal your Avatar to everybody without your consent. We know that for some of
                                you, the ability to hide your face picture from other members on the site is very important.
                            </p>

                            <p>
                                While the new policy will go into effect on {{.PublicAvatarEnforcementDate.Format "January 2, 2006"}},
                                you may accept the updated policy early by clicking on the checkbox below.
                                <strong>After {{.PublicAvatarEnforcementDate.Format "January 2"}}</strong>, if you have not yet
                                accepted the new policy, you will be shown this page any time you access the "Certification Required"
                                areas of the website (such as the chat room, forums, gallery and member directory). All members who
                                have a non-public profile picture will need to accept this change after that date to continue using
                                the website.
                            </p>
                        </div>

                        <form method="POST" action="{{ .Request.URL.Path }}">
                            <input type="hidden" name="next" value="{{.NextURL}}">
                            {{InputCSRF}}

                            <div class="field">
                                <label for="accept" class="label">Acknowledge and accept the new Public Avatar policy</label>
                                <label class="checkbox">
                                    <input type="checkbox"
                                        name="accept" id="accept"
                                        value="true"
                                        {{if eq (.CurrentUser.GetProfileField "public_avatar_consent") "true"}}checked{{end}}>
                                    I accept the {{PrettyTitle}} Public Avatar policy
                                </label>
                                <p class="help">
                                    After accepting this change: if your default profile picture is currently non-public, the
                                    square cropped avatar image will become visible for everybody.
                                </p>
                            </div>

                            <div class="block has-text-centered">
                                <button type="submit" class="button is-primary">Save my Public Avatar Consent setting</button>
                            </div>

                        </form>

                        <div class="content">
                            <hr>

                            <h3 id="disagree" class="has-text-warning">What if I disagree with this change?</h3>

                            <p>
                                After <strong>{{.PublicAvatarEnforcementDate.Format "January 2, 2006"}}</strong>, when this change
                                in website policy goes live, members who have a non-public default profile picture and have
                                <strong>not</strong> consented to the above update will no longer have access to the "Certification
                                Required" areas of the website.
                            </p>

                            <p>
                                That is: the Chat Room, Forums, Site Gallery, and Member Directory will no longer be accessible to
                                you from that time. When visiting any of those areas of the website, you will be redirected to
                                this consent page which you will need to agree to before you can continue using the website.
                            </p>

                            <p>
                                You will still have access to your Friends list, Messages, profile pages and your account settings
                                so that you can make arrangements with your friends to connect on a different platform.
                                If this change in site policy is simply incompatible with you, then we would ask that you
                                <a href="/settings#deactivate">delete your {{PrettyTitle}} account</a>.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    window.addEventListener("DOMContentLoaded", (event) => {
        let $file = document.querySelector("#file"),
            $fileName = document.querySelector("#fileName");

        $file.addEventListener("change", function() {
            let file = this.files[0];
            $fileName.innerHTML = file.name;
        });
    });
</script>
{{end}}