{{define "title"}}Certification Photo{{end}}
{{define "content"}}
<div class="container">
    <section class="hero is-link is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    Certification Photo
                </h1>
            </div>
        </div>
    </section>

    <div class="block p-4">
        <div class="level">
            <div class="level-item">
                <div class="card" style="width: 100%; max-width: 640px">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            <span class="icon"><i class="fa fa-image-portrait"></i></span>
                            Certification Photo
                        </p>
                    </header>
                    <div class="card-content">

                        <div class="block">
                            <strong>Certification Status:</strong>
                            {{if eq .CertificationPhoto.Status "needed"}}
                                <span class="tag is-warning">Awaiting Upload</span>
                            {{else if eq .CertificationPhoto.Status "pending"}}
                                <span class="tag is-info">Pending Approval</span>
                            {{else if eq .CertificationPhoto.Status "approved"}}
                                <span class="tag is-success">Approved</span>
                            {{else if eq .CertificationPhoto.Status "secondary"}}
                                <span class="tag is-info">Photo ID Requested</span>
                            {{else if eq .CertificationPhoto.Status "rejected"}}
                                <span class="tag is-danger">Rejected</span>
                            {{else}}
                                <span class="tag is-danger">{{.CertificationPhoto.Status}}</span>
                            {{end}}
                        </div>

                        <!-- Secondary form of ID requested? -->
                        {{if eq .CertificationPhoto.Status "secondary"}}
                        <div class="notification is-info is-light content">
                            <p>
                                A {{PrettyTitle}} admin has reviewed your certification photo and has requested
                                that you provide a secondary form of photo ID to verify your age.
                            </p>

                            <p>
                                Please upload a scan or photo of an official, government issued ID which shows
                                a photo of your face and your date of birth. <strong>Please black out any other
                                personal information from your ID.</strong> We do not want your name, address,
                                ID number, or any sensitive information - <em>only</em> your <strong>photo</strong>
                                and your <strong>date of birth</strong>.
                            </p>

                            <p>
                                Please refer to this <strong>example photo ID:</strong>
                            </p>

                            <p>
                                <img src="/static/img/photoid-example.jpg">
                            </p>

                            <p>
                                Acceptable forms of ID may include the following:
                            </p>

                            <ul>
                                <li>A government issued passport</li>
                                <li>A government issued driver's license or photo ID card</li>
                            </ul>

                            <p>
                                Please prepare this scan of your photo ID and upload it below.
                            </p>

                            <p>
                                For your privacy, <strong>we will delete this image</strong> from
                                the {{PrettyTitle}} database after it has been reviewed.
                            </p>

                            <form method="POST" action="/photo/certification" enctype="multipart/form-data">
                                {{InputCSRF}}
                                <input type="hidden" name="secondary" value="true">

                                <div class="field">
                                    <label for="file" class="label">Browse and select your photo ID scan:</label>
                                    <div class="file has-name is-fullwidth">
                                        <label class="file-label">
                                            <input class="file-input" type="file"
                                                name="file"
                                                id="file"
                                                accept=".jpg,.jpeg,.jpe,.png"
                                                required>
                                            <span class="file-cta">
                                                <span class="file-icon">
                                                    <i class="fas fa-upload"></i>
                                                </span>
                                                <span class="file-label">
                                                    Choose a file…
                                                </span>
                                            </span>
                                            <span class="file-name" id="fileName">
                                                Select a file
                                            </span>
                                        </label>
                                    </div>
                                </div>

                                <div class="block has-text-centered">
                                    <button type="submit" class="button is-primary">Upload Photo ID</button>
                                </div>

                            </form>
                        </div>
                        {{else if ne .CertificationPhoto.SecondaryFilename ""}}
                        <div class="notification is-success is-light content">
                            <p>
                                Your <strong>secondary form of photo ID</strong> is pending approval. It will
                                be deleted from the website's database after it has been reviewed.
                            </p>

                            <p>
                                If you wish to delete it immediately, please use the button below to
                                "Delete My Certification Photo." It will remove your original certification
                                photo as well as the secondary photo ID that you had uploaded before.
                            </p>
                        </div>
                        {{else if .CertificationPhoto.SecondaryVerified}}
                        <div class="notification is-success is-light content">
                            <p>
                                Congratulations!
                                Your <i class="fa fa-id-card"></i> <strong>age verification photo</strong> has
                                been reviewed and approved. This photo has now been deleted from our system to
                                protect your privacy and security.
                            </p>

                            <p>
                                Note: please do not delete or change your original Certification Photo, or else
                                you will be required to re-upload your age verification photo ID again.
                            </p>
                        </div>
                        {{end}}

                        <!-- Admin rejection comment -->
                        {{if .CertificationPhoto.AdminComment}}
                        <div class="notification is-warning content">
                            <p>
                                Your certification photo has been rejected. Please review the admin comment
                                below and try taking and uploading a new certification photo.
                            </p>
                            <p>
                                <strong>Admin comment:</strong>
                            </p>
                            <p>
                                {{.CertificationPhoto.AdminComment}}
                            </p>
                        </div>
                        {{end}}

                        {{if .CertificationPhoto.Filename}}
                        <div class="image block">
                            <img src="{{PhotoURL .CertificationPhoto.Filename}}">
                        </div>
                        <div class="block">
                            <form action="/photo/certification" method="POST">
                                {{InputCSRF}}
                                <input type="hidden" name="delete" value="true">

                                <div class="field">
                                    <label class="label has-text-danger">Delete Photo</label>

                                    <p class="help block">
                                        If your Certification Photo has been approved (so that your user
                                        account is "Certified"), removing this picture will revert your
                                        account to "Not Certified" status. You would then need to be
                                        re-approved with a new Certification Photo to be recertified.
                                    </p>

                                    <button type="submit" class="button is-danger"
                                        {{if eq .CertificationPhoto.Status "approved"}}
                                        onclick="return window.confirm('Removing this photo will mark your account as Not Certified.\n\nYou will then need to upload a new certification photo for approval to certify your account again.\n\nAre you sure you want to do this?')"
                                        {{end}}>
                                        <span class="icon"><i class="fa fa-trash"></i></span>
                                        <span>Delete My Certification Photo</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <hr class="block">
                        {{end}}

                        <div class="block content">
                            <p>
                                Uploading a certification photo (or "verification selfie") is required to gain
                                full access to this website. We want to know that only "real" users are here --
                                no anonymous lurkers. To get certified, please take a selfie that shows your
                                face and depicts you holding a sheet of paper with the following information
                                written on it:
                            </p>

                            <ul>
                                <li>The name of this website: {{PrettyTitle}}</li>
                                <li>Your username: <strong>{{.CurrentUser.Username}}</strong></li>
                                <li>Today's date: <strong>{{Now.Format "2006/01/02"}}</strong></li>
                            </ul>

                            <p>
                                Please ensure that your face is visible and your hand is clearly seen
                                holding the sheet of paper. Your certification photo <strong>will not</strong>
                                appear on your photo gallery, and nor should you upload it separately
                                to your gallery page (as it may enable others to photoshop your image
                                and use it to verify a fake profile on another website).
                            </p>
                        </div>

                        <!-- If the user has no profile picture, ask them to upload that first. -->
                        {{if not .CurrentUser.ProfilePhotoID}}
                        <div class="notification is-danger is-light content">
                            <p>
                                <i class="fa fa-hand mr-1"></i>
                                <strong>Hang on a moment!</strong>
                            </p>

                            <p>
                                Before you submit your certification photo, please upload
                                <a href="/photo/upload?intent=profile_pic" class="has-text-link"><strong>a profile photo</strong></a>
                                that shows your face. Your certification photo will be compared to the face
                                picture on your profile page so that we know it's actually the same person.
                            </p>

                            <p>
                                <strong>Note:</strong> you may make your profile picture "Friends-only" or
                                "Private" if you need; but you should have a clear face picture on your
                                profile page for the {{PrettyTitle}} admin to compare your certification
                                picture to!
                            </p>
                        </div>
                        {{else}}

                            <form method="POST" action="/photo/certification" enctype="multipart/form-data">
                                {{InputCSRF}}

                                <div class="has-text-centered block">
                                    <div><strong>Example Picture</strong></div>
                                    <div><small class="has-text-grey">(ink colors not important)</small></div>
                                    <img src="/static/img/certification-example.jpg">
                                </div>

                                <div class="field">
                                    <label for="file" class="label">Browse and select your verification photo:</label>
                                    <div class="file has-name is-fullwidth">
                                        <label class="file-label">
                                            <input class="file-input" type="file"
                                                name="file"
                                                id="file"
                                                accept=".jpg,.jpeg,.jpe,.png"
                                                required>
                                            <span class="file-cta">
                                                <span class="file-icon">
                                                    <i class="fas fa-upload"></i>
                                                </span>
                                                <span class="file-label">
                                                    Choose a file…
                                                </span>
                                            </span>
                                            <span class="file-name" id="fileName">
                                                Select a file
                                            </span>
                                        </label>
                                    </div>
                                </div>

                                <div class="block has-text-centered">
                                    <button type="submit" class="button is-primary">Upload Certification Photo</button>
                                </div>

                            </form>

                        {{end}}
                    </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}}