BookStack/resources/views/pages/image-manager.blade.php

<div id="image-manager">
    <div class="overlay" v-el="overlay" v-on="click: overlayClick" >
        <div class="image-manager-body">
            <div class="image-manager-content">
                <div class="image-manager-list">
                    <div v-repeat="image: images">
                        <img class="anim fadeIn"
                             v-class="selected: (image==selectedImage)"
                             v-attr="src: image.thumbnail, alt: image.name, title: image.name"
                             v-on="click: imageClick(image)"
                             v-style="animation-delay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'">
                    </div>
                    <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
                </div>
            </div>
            <button class="neg button image-manager-close" v-on="click: hide()">x</button>
            <div class="image-manager-sidebar">
                <h2 v-el="imageTitle">Images</h2>
                <hr class="even">
                <div class="dropzone-container" v-el="dropZone">
                    <div class="dz-message">Drop files or click here to upload</div>
                </div>
                <div class="image-manager-details anim fadeIn" v-show="selectedImage">
                    <hr class="even">
                    <form v-on="submit: saveImageDetails" v-el="imageForm">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label for="name">Image Name</label>
                            <input type="text" id="name" name="name" v-model="selectedImage.name">
                        </div>
                    </form>
                    <hr class="even">
                    <div v-show="dependantPages">
                        <p class="text-neg text-small">
                            This image is used in the pages below, Click delete again to confirm you want to delete this image.
                        </p>
                        <ul class="text-neg">
                            <li v-repeat="page: dependantPages">
                                <a v-attr="href: page.url" target="_blank" class="text-neg">@{{ page.name }}</a>
                            </li>
                        </ul>
                    </div>

                    <form v-on="submit: deleteImage" v-el="imageDeleteForm">
                        <input type="hidden" v-model="deleteForm._token" value="{{ csrf_token() }}">
                        <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
                    </form>
                </div>
                <div class="image-manager-bottom">
                    <button class="button pos anim fadeIn" v-show="selectedImage" v-on="click:selectButtonClick"><i class="zmdi zmdi-square-right"></i>Select Image</button>
                </div>
            </div>
        </div>
    </div>
</div>