<div class="abs overlay l-large-view">
    <div class="abs blocker" v-on:click="close"></div> 

    <div class="abs outer-holder">

        <a 
            class="close icon-x-in-circle"
            v-on:click="close">
        </a>

        <div class="abs inner-holder l-flex-col"> 
            <div class="t-contents flex-elem holder grows">

                <div class="t-snapshot abs l-view-header">
                    <div class="abs object-browse-bar l-flex-row">
                        <div class="left flex-elem l-flex-row grows">
                            <div class="object-header flex-elem l-flex-row grows">
                                <div class="type-icon flex-elem embed-icon holder" v-bind:class="embed.cssClass"></div>
                                <div class="title-label flex-elem holder flex-can-shrink">{{embed.name}}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
                    <div class="flex-elem holder flex-can-shrink s-snapshot-datetime">
                        SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
                    </div>
                    <a class="s-button icon-pencil" title="Annotate">
                        <span class="title-label">Annotate</span>
                    </a>
                </div>

                <div class="abs object-holder t-image-holder s-image-holder">
                    <div 
                        class="image-main s-image-main"
                        v-bind:style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }">
                    </div>
                </div>
            </div>

            <div 
                class="bottom-bar flex-elem holder"
                v-on:click="close">
 
                <a class="t-done s-button major">Done</a> 
            </div> 
        </div> 
    </div>
</div>