{{define "title"}}Delete Photo{{end}}
{{define "content"}}
<div class="container">
    <section class="hero is-link is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    {{if eq .Intent "delete"}}
                        <i class="fa fa-trash mr-2"></i>
                        Delete {{len .Photos}} Photo{{Pluralize (len .Photos)}}
                    {{else if eq .Intent "visibility"}}
                        <i class="fa fa-eye mr-2"></i>
                        Edit Visibility
                    {{else}}
                        Batch Edit Photos
                    {{end}}
                </h1>
            </div>
        </div>
    </section>

    <div class="block p-4">
        <div class="level">
            <div class="level-item">
                <div class="card" style="max-width: 800px">
                    <header class="card-header {{if eq .Intent "delete"}}has-background-danger{{else}}has-background-link{{end}}">
                        <p class="card-header-title has-text-light">
                            {{if eq .Intent "delete"}}
                                <span class="icon"><i class="fa fa-trash"></i></span>
                                Delete {{len .Photos}} Photo{{Pluralize (len .Photos)}}
                            {{else if eq .Intent "visibility"}}
                                <span class="icon"><i class="fa fa-eye mr-2"></i></span>
                                Edit Visibility
                            {{else}}
                                Batch Edit Photos
                            {{end}}
                        </p>
                    </header>
                    <div class="card-content">
                        <form method="POST" action="/photo/batch-edit">
                            {{InputCSRF}}
                            <input type="hidden" name="intent" value="{{.Intent}}">
                            <input type="hidden" name="confirm" value="true">

                            <!-- Bulk Visibility Settings -->
                            {{if eq .Intent "visibility"}}
                                <p>
                                    You may use this page to set <strong>all ({{len .Photos}}) photo{{if ge (len .Photos) 2}}s'{{end}}</strong>
                                    visibility setting.
                                </p>
                                <!-- TODO: copy/pasted block from the Upload page -->
                                <div class="field">
                                    <label class="label">Photo Visibility</label>
                                    <div>
                                        <label class="radio">
                                            <input type="radio"
                                                name="visibility"
                                                value="public"
                                                {{if or (not .EditPhoto) (eq .EditPhoto.Visibility "public")}}checked{{end}}>
                                            <strong class="has-text-link ml-1">
                                                <span>Public <small>(members only)</small></span>
                                                <span class="icon"><i class="fa fa-eye"></i></span>
                                            </strong>
                                        </label>
                                        <p class="help">
                                            This photo will appear on your profile page and can be seen by any
                                            logged-in user account. It may also appear on the site-wide Photo
                                            Gallery if that option is enabled, below.
                                        </p>
                                    </div>
                                    <div>
                                        <label class="radio">
                                            <input type="radio"
                                                name="visibility"
                                                value="friends"
                                                {{if eq .EditPhoto.Visibility "friends"}}checked{{end}}>
                                            <strong class="has-text-warning ml-1">
                                                <span>Friends only</span>
                                                <span class="icon"><i class="fa fa-user-group"></i></span>
                                            </strong>
                                        </label>
                                        <p class="help">
                                            Only users you have accepted as a friend can see this photo on your
                                            profile page and on the site-wide Photo Gallery if that option is
                                            enabled, below.
                                        </p>
                                    </div>
                                    <div>
                                        <label class="radio">
                                            <input type="radio"
                                                name="visibility"
                                                value="private"
                                                {{if eq .EditPhoto.Visibility "private"}}checked{{end}}>
                                            <strong class="has-text-private ml-1">
                                                <span>Private</span>
                                                <span class="icon"><i class="fa fa-lock"></i></span>
                                            </strong>
                                        </label>
                                        <p class="help">
                                            This photo is visible only to you and to users for whom you have
                                            granted access
                                            (<a href="/photo/private" target="_blank" class="has-text-private">manage grants <i class="fa fa-external-link"></i></a>).
                                        </p>
                                    </div>

                                    <div class="has-text-warning is-size-7 mt-4">
                                        <i class="fa fa-info-circle mr-1"></i>
                                        <strong class="has-text-warning">Reminder:</strong> There are risks inherent with sharing
                                        pictures on the Internet, and {{PrettyTitle}} can't guarantee that another member of the site
                                        won't download and possibly redistribute your photos. You may mark your picture as "Friends only"
                                        or "Private" to limit who on the website will see it, but anybody who <em>can</em> see it could potentially
                                        save it to their computer. <a href="/faq#downloading" target="_blank">Learn more <i class="fa fa-external-link"></i></a>
                                    </div>

                                </div>
                            {{end}}

                            <!-- Show range of photos on all updates -->
                            <div class="columns is-mobile is-multiline">
                                {{range .Photos}}
                                <div class="column is-half">
                                    <input type="hidden" name="id" value="{{.ID}}">
                                    <div class="image block">
                                        <!-- GIF video? -->
                                        {{if HasSuffix .Filename ".mp4"}}
                                        <video autoplay loop controls controlsList="nodownload" playsinline>
                                            <source src="{{PhotoURL .Filename}}" type="video/mp4">
                                        </video>
                                        {{else}}
                                        <img src="{{PhotoURL .Filename}}">
                                        {{end}}
                                    </div>
                                </div>
                                {{end}}
                            </div>

                            <div class="block">
                                Are you sure you want to
                                {{if eq .Intent "delete"}}
                                    <strong class="has-text-danger">delete</strong>
                                {{else if eq .Intent "visibility"}}
                                    <strong>update the visibility</strong> of
                                {{else}}
                                    update
                                {{end}}
                                
                                {{if ge (len .Photos) 2 -}}
                                    these <strong>{{len .Photos}} photos?</strong>  
                                {{- else -}}
                                    this photo?
                                {{- end}}
                            </div>

                            <!-- Deleting last photos warning about certification loss -->
                            {{if .WarningDeletingAllPhotos}}
                            <div class="block">
                                <div class="notification is-danger is-light content">
                                    <p>
                                        <i class="fa fa-exclamation-triangle mr-1"></i>
                                        <strong>Certification Photo Warning</strong>
                                    </p>
                                    <p>
                                        You are about to delete ALL remaining photos on your gallery. If you continue with
                                        this action, <strong>your Certification Photo will be automatically revoked</strong>
                                        and your account will lose its Certified status. You would then need to submit a new
                                        Certification Photo for approval (after uploading pictures back onto your gallery) to
                                        continue using {{PrettyTitle}}.
                                    </p>
                                </div>
                            </div>
                            {{end}}

                            <div class="block has-text-center">
                                {{if eq .Intent "delete"}}
                                    <button type="submit" class="button is-danger nonshy-confirm-submit"
                                        {{if .WarningDeletingAllPhotos}}data-confirm="You are about to delete your final {{len .Photos}} photo{{Pluralize (len .Photos)}} from your gallery, which will cause your Certification Photo to be automatically revoked.\n\nConfirm that you want to delete your final pictures. By continuing, your account will lose its Certified status and, if you wish to continue using {{.Title}}, you will need to submit a new Certification Photo for review after uploading some pictures to your gallery again."{{end}}
                                        >
                                        Delete Photo{{Pluralize (len .Photos)}}
                                    </button>
                                {{else}}
                                    <button type="submit" class="button is-primary">Update Photo{{Pluralize (len .Photos)}}</button>
                                {{end}}
                                <button type="button" class="button" onclick="history.back()">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{{end}}