{{define "title"}}Certification Photo{{end}}
{{define "content"}}
<div class="container">
    <section class="hero is-info 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 "rejected"}}
                                <span class="tag is-danger">Rejected</span>
                            {{else}}
                                <span class="tag is-danger">{{.CertificationPhoto.Status}}</span>
                            {{end}}
                        </div>

                        {{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">
                                        <span class="icon"><i class="fa fa-trash"></i></span>
                                        <span>Delete This 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>

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