{{define "content"}}
<div class="container">
    <section class="hero block is-danger is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">Certification Required</h1>
                {{if and .CurrentUser.Certified (not .CurrentUser.ProfilePhoto.ID)}}
                <h2 class="subtitle">You are just missing a default profile photo!</h2>
                {{end}}
            </div>
        </div>
    </section>

    <!-- Just missing a cert photo? -->
    {{if and .CurrentUser.Certified (not .CurrentUser.ProfilePhoto.ID)}}
    <div class="notification is-success is-light content">
        <p>
            <strong>Notice:</strong> your Certification Photo is OK, you are just missing a profile picture!
        </p>

        <p>
            To maintain your <strong>certified</strong> status on this website, you are required to keep a
            <strong>default profile picture</strong> set on your account at all times.
        </p>

        <p>
            Please <a href="/u/{{.CurrentUser.Username}}/photos">visit your Photo Gallery</a> for instructions
            to set one of your existing photos as your default, or
            <a href="/photo/upload?intent=profile_pic">upload a new profile picture.</a>
        </p>
    </div>
    {{end}}

    <div class="block content p-4 mb-0">
        <h1>Certification Required</h1>
        <p>
            Your profile must be <strong>certified</strong> as being a real person before you
            are allowed to interact with much of this website. Certification helps protect this
            site from spammers, robots, anonymous lurkers and other unsavory characters.
        </p>

        <p>
            To access the Certification Required areas you need to upload a Profile Picture
            that shows your face and submit a "verification selfie" depicting yourself
            holding a hand-written note on paper to prove that you are the person in your
            profile picture.
        </p>

        <h3>Your Certification Checklist</h3>
    </div>

    <ul class="menu-list block">
        <li>
            <a href="/photo/upload?intent=profile_pic">
                <div class="columns is-mobile is-gapless">
                    <div class="column is-narrow mr-2">
                        {{if .CurrentUser.ProfilePhoto.ID}}
                        <span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
                        {{else}}
                        <span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
                        {{end}}
                    </div>
                    <div class="column">
                        Upload a Profile Picture to your account that shows your face

                        <p class="help">
                            Click here to upload a new profile picture
                            <i class="fa fa-external-link ml-1"></i>
                        </p>
                    </div>
                </div>
            </a>
        </li>

        <li>
            <a href="/photo/certification">
                <div class="columns is-mobile is-gapless">
                    <div class="column is-narrow mr-2">
                        {{if .CurrentUser.Certified}}
                        <span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
                        {{else}}
                        <span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
                        {{end}}
                    </div>
                    <div class="column">
                        Get certified by uploading a verification selfie

                        <p class="help">
                            Click here to go to the Certification Photo upload page
                            <i class="fa fa-external-link ml-1"></i>
                        </p>
                    </div>
                </div>
            </a>
        </li>
    </ul>

    <div class="content p-4">
        <h3>While You Wait</h3>

        <p>
            While waiting for your Certification Photo to be approved, you may
            <a href="/u/{{.CurrentUser.Username}}">view your profile</a>,
            <a href="/settings">edit your profile</a> and
            <a href="/u/{{.CurrentUser.Username}}/photos">upload some additional pictures</a>
            to your profile. Your additional photos will not be visible to other members
            until your profile has been certified.
        </p>
    </div>
</div>
{{end}}