</div>
                                </div>

<div class="rowBtns">
                                    <div class="qBtns btn-group vAlignTop">
                                        <button type="button" class="btn btn-default btn-xs" v-if="data.modal.interactiveOptions.model.imgs.length>1"
                                                v-on:click="data.modal.interactiveOptions.replace(data.modal.interactiveOptions.model.imgs,index,index-1)">
                                            <span class="fa fa-caret-up" aria-hidden="true"></span>
                                        </button>
                                        <button type="button" class="btn btn-default btn-xs" v-if="data.modal.interactiveOptions.model.imgs.length>1"
                                                v-on:click="data.modal.interactiveOptions.replace(data.modal.interactiveOptions.model.imgs,index,index+1)">
                                            <span class="fa fa-caret-down" aria-hidden="true"></span>
                                        </button>
                                        <button type="button" class="btn btn-danger btn-xs" v-if="data.modal.interactiveOptions.model.imgs.length>1"
                                                v-on:click="data.modal.interactiveOptions.model.imgs.splice(index,1)">
                                            <span class="fa fa-times" aria-hidden="true"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="data.modal.interactiveOptions.currentTab == 'settings'" class="settings">
                    <div class="form">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="vSpace10"></div>
                                <div>
                                    <div class="catColumns">
                                        <a href v-on:click.prevent="data.modal.interactiveOptions.showCategory('size')" :class="{selected:data.modal.interactiveOptions.currentCat=='size'}" class="btn btn-clear xbtn-sm">{{'size'|t(data.lc)}}</a>
                                        <a href v-on:click.prevent="data.modal.interactiveOptions.showCategory('appearance')" :class="{selected:data.modal.interactiveOptions.currentCat=='appearance'}" class="btn btn-clear xbtn-sm">{{'appearance'|t(data.lc)}}</a>
                                        <a href v-on:click.prevent="data.modal.interactiveOptions.showCategory('caption')" :class="{selected:data.modal.interactiveOptions.currentCat=='caption'}" class="btn btn-clear xbtn-sm">{{'caption'|t(data.lc)}}</a>
                                        <a href v-on:click.prevent="data.modal.interactiveOptions.showCategory('thumbnails')" :class="{selected:data.modal.interactiveOptions.currentCat=='thumbnails'}" class="btn btn-clear xbtn-sm">{{'thumbnails'|t(data.lc)}}</a>
                                        <a href v-on:click.prevent="data.modal.interactiveOptions.showCategory('footer')" :class="{selected:data.modal.interactiveOptions.currentCat=='footer'}" class="btn btn-clear xbtn-sm">{{'footer'|t(data.lc)}}</a>
                                    </div>
                                    <div class="contentColumn">

<div v-if="data.modal.interactiveOptions.currentCat=='size'">
                                            <div class="form-group form-group-sm">
                                                <div class="row">
                                                    <div class="col-xs-5 zeroPaddingR">
                                                        <label for="imgWidth">{{'galleryWidth'|t(data.lc)}}</label>
                                                        <button class="btn btn-link btn-xs i" type="button" v-popover
                                                                data-placement="bottom"
                                                                v-bind:data-content="'imgWidthAutoDesc'|t(data.lc)">
                                                            <span class="fa fa-info-circle"></span>
                                                        </button>
                                                        <div v-if="data.modal.interactiveOptions.model.dim">
                                                            <input v-input type="text" v-number class="form-control input-sm perc65 inlineBlock"
                                                                    autofocus
                                                                    v-model="data.modal.interactiveOptions.model.dim.width"
                                                                    v-on:keyup.enter.prevent="data.modal.interactiveOptions.create(data.modal.interactiveOptions.model)">
                                                            <dimunit v-bind:dim="data.modal.interactiveOptions.model.dim"></dimunit>
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-5 zeroPaddingR">
                                                        <label for="imgHeight">{{'galleryHeight'|t(data.lc)}}</label>
                                                        <button class="btn btn-link btn-xs i" type="button" v-popover
                                                                data-placement="bottom"
                                                                v-bind:data-content="'imgHeightAutoDesc'|t(data.lc)">
                                                            <span class="fa fa-info-circle"></span>
                                                        </button>
                                                        <div v-if="data.modal.interactiveOptions.model.dim">
                                                            <input v-input type="text" v-number class="form-control input-sm perc65 inlineBlock"
                                                                    v-model="data.modal.interactiveOptions.model.dim.height"
                                                                    v-on:keyup.enter.prevent="data.modal.interactiveOptions.create(data.modal.interactiveOptions.model)">
                                                            <label>px</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="row">
                                                    <div class="col-xs-4 zeroPaddingR">
                                                        <label>{{'scaleMode'|t(data.lc)}}</label>
                                                        <button class="btn btn-link btn-xs i" type="button" v-popover
                                                                data-placement="bottom"
                                                                v-bind:data-content="'galleryScaleDesc'|t(data.lc)">
                                                            <span class="fa fa-info-circle"></span>
                                                        </button>
                                                        <div>
                                                            <div class="btn-group" style="min-width: 90px;width:100%">
                                                                <button class="btn btn-default btn-sm btn-block dropdown-toggle"
                                                                        type="button"
                                                                        data-toggle="dropdown">
                                                                    {{('d_scale'+data.modal.interactiveOptions.model.scale)|t(data.lc)}}
                                                                    <span class="caret"></span>
                                                                </button>
                                                                <ul class="dropdown-menu small" role="menu" style="min-width: inherit;">
                                                                    <li v-for="scale in data.modal.interactiveOptions.defs.scale">
                                                                        <a role="menuitem" tabindex="-1" href="#"
                                                                            v-on:click="data.modal.interactiveOptions.model.scale=scale">{{('d_scale'+scale)|t(data.lc)}}</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-4 zeroPaddingR">
                                                        <label>{{'float'|t(data.lc)}}</label>
                                                        <button class="btn btn-link btn-xs i" type="button" v-popover
                                                                data-placement="bottom"
                                                                v-bind:data-content="'floatDesc'|t(data.lc)">
                                                            <span class="fa fa-info-circle"></span>
                                                        </button>
                                                        <div>
                                                            <div class="btn-group" style="min-width: 90px;width:100%">
                                                                <button class="btn btn-default btn-sm btn-block dropdown-toggle"
                                                                        type="button"
                                                                        data-toggle="dropdown">
                                                                    {{('d_float'+data.modal.interactiveOptions.model.float)|t(data.lc)}}
                                                                    <span class="caret"></span>
                                                                </button>
                                                                <ul class="dropdown-menu small" role="menu" style="min-width: inherit;">
                                                                    <li v-for="float in data.modal.interactiveOptions.defs.float">
                                                                        <a role="menuitem" tabindex="-1" href="#"
                                                                            v-on:click="data.modal.interactiveOptions.model.float=float">{{('d_float'+float)|t(data.lc)}}</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-4">
                                                        <label>{{'margin'|t(data.lc)}}</label>
                                                        <button class="btn btn-link btn-xs i" type="button" v-popover
                                                                data-placement="bottom"
                                                                v-bind:data-content="'marginDesc'|t(data.lc)">
                                                            <span class="fa fa-info-circle"></span>
                                                        </button>
                                                        <div>
                                                            <input v-input type="text" v-number class="form-control input-sm inlineBlock perc75"
                                                                    placeholder="0"
                                                                    v-model="data.modal.interactiveOptions.model.margin"
                                                                    v-on:keyup.enter.prevent="data.modal.interactiveOptions.create(data.modal.interactiveOptions.model)">
                                                            <label>px</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group form-group-sm" v-if="data.modal.interactiveOptions.model.float!='none'">
                                                <div class="checkbox">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.disableWrapForMobile">
                                                        {{'disableTextWrappingForMobile'|t(data.lc)}}
                                                    </label>
                                                    <button class="btn btn-link btn-xs i" type="button" v-popover data-placement="top"
                                                            v-bind:data-content="'disableTextWrappingForMobileDesc'|t(data.lc)">
                                                        <span class="fa fa-info-circle"></span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

<div class="form-group form-group-sm">
                                                <label class="control-label">{{'bg'|t(data.lc)}}</label>
                                                <div style="width:150px;">
                                                    <div class="form-group color">
                                                        <color-picker v-model="data.modal.interactiveOptions.model.bgColor"></color-picker>
                                                    </div>
                                                </div>
                                                <p class="desc">{{'galleryBgColorDesc'|t(data.lc)}}</p>
                                            </div>

<div class="form-group form-group-sm">
                                                <label>Class</label>
                                                <div style="width:150px;">
                                                    <input v-input type="text" class="form-control input-sm xperc65 inlineBlock"
                                                            v-model="data.modal.interactiveOptions.model.classname"
                                                            v-on:keyup.enter.prevent="data.modal.interactiveOptions.create(data.modal.interactiveOptions.model)">
                                                </div>
                                                <p class="desc">{{'classDesc'|t(data.lc)}}</p>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.rtl">
                                                        {{'rtl'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">{{'galleryRtlDesc'|t(data.lc)}}</p>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox inlineBlock">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.fullscreenMode">
                                                        {{'enableFullscreenMode'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">{{'enableFullscreenModeDesc'|t(data.lc)}}</p>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox inlineBlock">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.slideshowMode">
                                                        {{'slideshowMode'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">{{'slideshowModeDesc'|t(data.lc)}}</p>
                                            </div>
                                            <div class="form-group form-group-sm" v-if="data.modal.interactiveOptions.model.slideshowMode">
                                                <label>
                                                    {{'transitionTime'|t(data.lc)}}
                                                </label>
                                                <div>
                                                    <input v-input type="text" v-number step="1" class="form-control input-sm inlineBlock perc75"
                                                        placeholder="5"
                                                        style="width: 80px;"
                                                        v-model="data.modal.interactiveOptions.model.transitionTime"
                                                        v-on:keyup.enter.prevent="data.modal.interactiveOptions.create(data.modal.interactiveOptions.model)">
                                                </div>
                                                <p class="desc">{{'transitionTimeDesc'|t(data.lc)}}</p>
                                            </div>
                                            <div class="form-group form-group-sm" v-if="data.modal.interactiveOptions.model.slideshowMode">
                                                <div class="checkbox inlineBlock">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.slideshowTimer">
                                                        {{'slideshowTimer'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">{{'slideshowTimerDesc'|t(data.lc)}}</p>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox inlineBlock">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.zoomBtns">
                                                        {{'zoomBtns'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">{{'galleryZoomBtnsDesc'|t(data.lc)}}</p>
                                            </div>
                                        </div>
                                        <div v-if="data.modal.interactiveOptions.currentCat=='caption'">
                                            <div class="form-group form-group-sm">
                                                <label>{{'captionFontsize'|t(data.lc)}}</label>
                                                <div>
                                                    <input v-input type="text" v-number step="0.1" class="form-control input-sm inlineBlock perc75"
                                                        placeholder="1"
                                                        style="width: 80px;"
                                                        v-model="data.modal.interactiveOptions.model.captionFontSize"
                                                        v-on:keyup.enter.prevent="data.modal.interactiveOptions.create(data.modal.interactiveOptions.model)">
                                                    <label>em</label>
                                                </div>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <label>{{'captionColor'|t(data.lc)}}</label>
                                                <div class="form-group color">
                                                    <color-picker v-model="data.modal.interactiveOptions.model.captionColor" style="width:120px"></color-picker>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="data.modal.interactiveOptions.currentCat=='footer'">
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.footerOverlap">
                                                        {{'footerOverlap'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">
                                                    {{'footerOverlapDesc'|t(data.lc)}}
                                                </p>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox" v-if="data.modal.interactiveOptions.model.footerOverlap">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.footerShadow">
                                                        {{'galleryFooterShadow'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">
                                                    {{'galleryFooterShadowDesc'|t(data.lc)}}
                                                </p>
                                            </div>
                                        </div>
                                        <div v-if="data.modal.interactiveOptions.currentCat=='thumbnails'">
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.thumbnails">
                                                        {{'displayThumbnails'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">{{'displayThumbnailsDesc'|t(data.lc)}}</p>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="inlineBlock vAlignTop">
                                                    <label>{{'thumbSize'|t(data.lc)}}</label>
                                                    <div class="hSpace5"></div>
                                                    <div class="inlineBlock">
                                                        <div class="btn-group" style="min-width: 90px;width:100%">
                                                            <button class="btn btn-default btn-xs btn-block dropdown-toggle"
                                                                    type="button"
                                                                    data-toggle="dropdown">
                                                                {{(data.modal.interactiveOptions.model.thumbSize?data.modal.interactiveOptions.model.thumbSize:"small")|t(data.lc)}}
                                                                <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu small" role="menu" style="min-width: inherit;">
                                                                <li v-for="size in data.modal.interactiveOptions.defs.thumbSize">
                                                                    <a role="menuitem" tabindex="-1" href="#"
                                                                        v-on:click="data.modal.interactiveOptions.model.thumbSize=size">{{(size)|t(data.lc)}}</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.thumbMap">
                                                        {{'thumbMap'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">{{'thumbMapDesc'|t(data.lc)}}</p>
                                            </div>
                                            <div class="form-group form-group-sm">
                                                <div class="checkbox">
                                                    <label>
                                                        <input v-input type="checkbox" v-model="data.modal.interactiveOptions.model.thumbShowOnHover">
                                                        {{'thumbShowOnHover'|t(data.lc)}}
                                                    </label>
                                                </div>
                                                <p class="desc">{{'thumbShowOnHoverDesc'|t(data.lc)}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal"
                        v-on:click="data.modal.interactiveOptions.create(data.modal.interactiveOptions.model)">
                    {{(data.modal.interactiveOptions.new?'create':'edit')|t(data.lc)}}
                </button>
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">{{'cancel'|t(data.lc)}}
                </button>
            </div>
        </div>
    </div>
</div>

{{'insertEditGallery'|t(data.lc)}}