<div class="c-notebook-snapshot">
    <!-- parent container sets up this for flex column layout -->
    <div class="c-notebook-snapshot__header l-browse-bar">
        <div class="l-browse-bar__start">
            <div class="l-browse-bar__object-name--w">
                <span class="l-browse-bar__object-name"
                    v-bind:class="embed.cssClass"
                >
                    {{embed.name}}
                </span>
            </div>
        </div>

        <div class="l-browse-bar__end">
            <div class="l-browse-bar__snapshot-datetime">
                SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
            </div>
            <a class="l-browse-bar__annotate-button c-button icon-pencil" title="Annotate" @click="annotateSnapshot">
                <span class="title-label">Annotate</span>
            </a>
        </div>
    </div>

    <div class="c-notebook-snapshot__image">
        <div class="image-main s-image-main"
            :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
        ></div>
    </div>
</div>
