<script type="text/x-handlebars-template" id="mapsvg-control-panel">
    <form id="mapform" action="" method="post" class="form-horizontal" autocomplete="off">

        <input type="hidden" name="save_mapsvg" value="1"/>
        <input type="hidden" id="default_width" value="{{default.width}}"/>
        <input type="hidden" id="default_height" value="{{default.height}}"/>
        <input type="hidden" id="default_viewbox_width" value="{{default.viewBox.[2]}}"/>
        <input type="hidden" id="default_viewbox_height" value="{{default.viewBox.[3]}}"/>
        <input type="hidden" name="map_id" value="{{map_id}}"/>

        <div class="tab-content" id="mapsvg-tabs">
            <!-- TAB 1 -->
            <div class="tab-pane active" id="tab_settings">
                <!-- MAIN SETTINGS -->
                <div class="form-group">
                    <label class="col-sm-3 control-label">File</label>
                    <div class="col-sm-9">
                        <input type="hidden" name="mapfile" value="{{svgFilename}}"/>
                        <input class="form-control" type="text" autocomplete="off" disabled="true" value="{{svgFilename}}"/>
                    </div>
                </div>



                <div class="form-group">
                    <label class="col-sm-3 control-label">Title</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="text" autocomplete="off" name="title" value="{{title}}" data-live="keyup" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Width</label>
                    <div class="col-sm-9">
                        <input class="form-control" id="mapsvg-controls-width" type="text" autocomplete="off" name="width" value="{{width}}" autocomplete="off" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Height</label>
                    <div class="col-sm-9">
                        <input  class="form-control" id="mapsvg-controls-height" type="text" autocomplete="off" name="height" value="{{height}}"  autocomplete="off" />
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default active">
                                <input name="lockAspectRatio" data-live="change" type="checkbox" id="mapsvg-controls-ratio" autocomplete="off" {{#if lockAspectRatio}}checked{{/if}} /> <i class="fa fa-lock"></i> Lock aspect ratio
                            </label>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">Start position</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input data-live="change" name="initialViewBox" class="form-control" type="text" autocomplete="off" disabled="" id="mapsvg-controls-viewbox" value="{{#each viewBox}}{{this}} {{/each}}"/>
                                <span class="input-group-btn">
                            <button class="btn btn-default" id="mapsvg-controls-set-viewbox">Set current</button>
                            <button class="btn btn-default" id="mapsvg-controls-reset-viewbox">Reset</button>
                                </span>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">Responsive</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-object="options" data-toggle="buttons"  id="mapsvg-controls-responsive">
                            <label class="btn btn-default {{#if responsive}}active{{/if}}">
                                <input type="radio" name="responsive" value="1"  {{#if responsive}}checked{{/if}} data-live="change" />
                                On
                            </label>
                            <label class="btn btn-default {{#unless responsive}}active{{/unless}}">
                                <input type="radio" name="responsive" value="0"  {{#unless responsive}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">Scroll</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-scroll">
                            <label class="btn btn-default {{#if scroll.on}}active{{/if}}">
                                <input type="radio" name="scroll[on]" value="1" {{#if scroll.on}}checked{{/if}} data-live="change"/>
                                On
                            </label>
                            <label class="btn btn-default {{#unless scroll.on}}active{{/unless}}">
                                <input type="radio" name="scroll[on]" value="0" {{#unless scroll.on}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>

                <div id="mapsvg-controls-scroll-options" {{#unless scroll.on}}style="display:none"{{/unless}}>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Limit scroll to boundaries</label>
                        <div class="col-sm-9">
                            <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-scroll">
                                <label class="btn btn-default {{#if scroll.limit}}active{{/if}}">
                                    <input type="radio" name="scroll[limit]" value="1" {{#if scroll.limit}}checked{{/if}} data-live="change"/>
                                    On
                                </label>
                                <label class="btn btn-default {{#unless scroll.limit}}active{{/unless}}">
                                    <input type="radio" name="scroll[limit]" value="0" {{#unless scroll.limit}}checked{{/unless}} data-live="change"/>
                                    Off
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Zoom</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-zoom">
                            <label class="btn btn-default {{#if zoom.on}}active{{/if}}">
                                <input type="radio" name="zoom[on]" value="1" {{#if zoom.on}}checked{{/if}} data-live="change"/>
                                On
                            </label>
                            <label class="btn btn-default {{#unless zoom.on}}active{{/unless}}">
                                <input type="radio" name="zoom[on]" value="0" {{#unless zoom.on}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>

                <div id="mapsvg-controls-zoom-options" {{#unless zoom.on}}style="display:none"{{/unless}}>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Zoom by mousewheel</label>
                        <div class="col-sm-9">
                            <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-zoom-2">
                                <label class="btn btn-default {{#if zoom.mousewheel}}active{{/if}}">
                                    <input type="radio" name="zoom[mousewheel]" value="1" {{#if zoom.mousewheel}}checked{{/if}} data-live="change"/>
                                    On
                                </label>
                                <label class="btn btn-default {{#unless zoom.mousewheel}}active{{/unless}}">
                                    <input type="radio" name="zoom[mousewheel]" value="0" {{#unless zoom.mousewheel}}checked{{/unless}} data-live="change"/>
                                    Off
                                </label>
                            </div>
                        </div>
                    </div>



                    <div class="form-group">
                        <label class="col-sm-3 control-label">Zoom Buttons</label>
                        <div class="col-sm-9">
                            <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-zoom-buttons">
                                <label class="btn btn-default {{#ifeq zoom.buttons.location 'hide'}}active{{/ifeq}}">
                                    <input type="radio" name="zoom[buttons][location]" value="hide" {{#ifeq zoom.buttons.location 'hide'}}checked{{/ifeq}} data-live="change"/>
                                    Hide
                                </label>
                                <label class="btn btn-default {{#ifeq zoom.buttons.location 'left'}}active{{/ifeq}}">
                                    <input type="radio" name="zoom[buttons][location]" value="left" {{#ifeq zoom.buttons.location 'left'}}checked{{/ifeq}} data-live="change"/>
                                    Left
                                </label>
                                <label class="btn btn-default {{#ifeq zoom.buttons.location 'right'}}active{{/ifeq}}">
                                    <input type="radio" name="zoom[buttons][location]" value="right" {{#ifeq zoom.buttons.location 'right'}}checked{{/ifeq}} data-live="change"/>
                                    Right
                                </label>
                            </div>
                        </div>
                    </div>

                    <!--
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Zoom Step</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="mapsvg-controls-zoom-step" type="text" autocomplete="off" name="zoomDelta]" id="zoom-delta" value="{{zoomDelta}}"/>
                            <p class="help-block">From 1  to 5. Small step (1.05, 1.1, 1.2 ...) gives more smooth zooming.<br />
                        </div>
                    </div>
                    -->

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Zoom Limits</label>
                        <div class="col-sm-9">
                            <input id="mapsvg-controls-zoomlimit" type="text" autocomplete="off" autocomplete="off" name="zoom[limit]" value="{{zoom.limit.[0]}};{{zoom.limit.[1]}}" data-live="change"/>
                        </div>
                    </div>
                </div>

                <div class="form-group" id="mapsvg-global-popovers">
                    <label class="col-sm-3 control-label">Global popovers</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons" id="mapsvg-popovers-mode">
                            <label class="btn btn-default {{#ifeq popovers.mode 'off'}}active{{/ifeq}}">
                                <input type="radio" name="popovers[mode]" value="off" {{#ifeq popovers.mode 'off'}}checked{{/ifeq}} data-live="change"/>
                                Off
                            </label>
                            <label class="btn btn-default {{#if_function popovers.mode}}active{{/if_function}}">
                                <input type="radio" class="mapsvg-function-radio" name="popovers[mode]" {{#if_function popovers.mode}}checked{{/if_function}}/>
                                Function
                            </label>
                        </div>
                        <textarea  rows="5" data-live="change" name="popovers[mode]" data-event="popovers" id="mapsvg-global-popover-function" class="mapsvg-function-radio-extra mapsvg-function-textarea form-control" data-validate="function">{{#if_function popovers.mode}}{{{toString popovers.mode}}}{{/if_function}}</textarea>
                    </div>
                </div>

                <!--<div class="form-group" id="mapsvg-global-tooltips">-->
                    <!--<label class="col-sm-3 control-label">Popovers position</label>-->
                    <!--<div class="col-sm-9">-->
                        <!--<select name="popovers[position]" data-live="change" class="mapsvg-select2">-->
                            <!--<option value="left" {{#ifeq popovers.position 'left'}}selected{{/ifeq}}>Left</option>-->
                            <!--<option value="top" {{#ifeq popovers.position 'top'}}selected{{/ifeq}}>Top</option>-->
                            <!--<option value="right" {{#ifeq popovers.position 'right'}}selected{{/ifeq}}>Right</option>-->
                            <!--<option value="bottom" {{#ifeq popovers.position 'bottom'}}selected{{/ifeq}}>Bottom</option>-->
                        <!--</select>-->
                    <!--</div>-->
                <!--</div>-->
                


                <div class="form-group" id="mapsvg-global-tooltips">
                    <label class="col-sm-3 control-label">Global tooltips</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons" id="mapsvg-tooltips-mode">
                            <label class="btn btn-default {{#ifeq tooltips.mode 'off'}}active{{/ifeq}}">
                                <input type="radio" name="tooltips[mode]" value="off"  {{#ifeq tooltips.mode 'off'}}checked{{/ifeq}} data-live="change"/>
                                Off
                            </label>
                            <label class="btn btn-default  {{#ifeq tooltips.mode 'id'}}active{{/ifeq}}">
                                <input type="radio" name="tooltips[mode]" value="id"  {{#ifeq tooltips.mode 'id'}}checked{{/ifeq}} data-live="change"/>
                                SVG id
                            </label>
                            <label class="btn btn-default {{#ifeq tooltips.mode 'title'}}active{{/ifeq}}">
                                <input type="radio" name="tooltips[mode]" value="title"  {{#ifeq tooltips.mode 'title'}}checked{{/ifeq}} data-live="change"/>
                                SVG title
                            </label>
                            <label class="btn btn-default {{#if_function tooltips.mode}}active{{/if_function}}">
                                <input type="radio" class="mapsvg-function-radio" name="tooltips[mode]" {{#if_function tooltips.mode}}checked{{/if_function}} />
                                Function
                            </label>
                        </div>
                        <textarea rows="5" name="tooltips[mode]" data-live="change" data-event="tooltips" id="mapsvg-global-tooltip-function" class="mapsvg-function-radio-extra mapsvg-function-textarea form-control" data-validate="function">{{#if_function tooltips.mode}}{{{toString tooltips.mode}}}{{/if_function}}</textarea>

                    </div>
                </div>

                <div class="form-group" id="mapsvg-global-tooltips">
                    <label class="col-sm-3 control-label">Tooltips position</label>
                    <div class="col-sm-9">
                        <select name="tooltips[position]" data-live="change" class="mapsvg-select2">
                            <option value="left" {{#ifeq tooltips.position 'left'}}selected{{/ifeq}}>Left</option>
                            <option value="top-left" {{#ifeq tooltips.position 'top-left'}}selected{{/ifeq}}>Top-left</option>
                            <option value="top" {{#ifeq tooltips.position 'top'}}selected{{/ifeq}}>Top</option>
                            <option value="top-right" {{#ifeq tooltips.position 'top-right'}}selected{{/ifeq}}>Top-right</option>
                            <option value="right" {{#ifeq tooltips.position 'right'}}selected{{/ifeq}}>Right</option>
                            <option value="bottom-right" {{#ifeq tooltips.position 'bottom-right'}}selected{{/ifeq}}>Bottom-Right</option>
                            <option value="bottom" {{#ifeq tooltips.position 'bottom'}}selected{{/ifeq}}>Bottom</option>
                            <option value="bottom-left" {{#ifeq tooltips.position 'bottom-left'}}selected{{/ifeq}}>Bottom-left</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Cursor</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-cursor">
                            <label class="btn btn-default  {{#ifeq cursor 'default'}}active{{/ifeq}}">
                            <input type="radio" name="cursor" value="default" {{#ifeq cursor 'default'}}checked{{/ifeq}} data-live="change"/>
                            <i class="fa fa-mouse-pointer"></i>
                            </label>
                            <label class="btn btn-default  {{#ifeq cursor 'pointer'}}active{{/ifeq}}">
                            <input type="radio" name="cursor" value="pointer" {{#ifeq cursor 'pointer'}}checked{{/ifeq}} data-live="change"/>
                            <i class="fa fa-hand-pointer-o"></i>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Multi Select</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-multiselect">
                            <label class="btn btn-default {{#if multiSelect}}active{{/if}}">
                                <input type="radio" name="multiSelect" value="1" {{#if multiSelect}}checked{{/if}} data-live="change"/>
                                On
                            </label>
                            <label class="btn btn-default  {{#unless multiSelect}}active{{/unless}}">
                                <input type="radio" name="multiSelect" value="0" {{#unless multiSelect}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Disable all regions</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-disableAll">
                            <label class="btn btn-default {{#if disableAll}}active{{/if}}">
                                <input type="radio" name="disableAll" value="1" {{#if disableAll}}checked{{/if}} data-live="change"/>
                                On
                            </label>
                            <label class="btn btn-default  {{#unless disableAll}}active{{/unless}}">
                                <input type="radio" name="disableAll" value="0" {{#unless disableAll}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">Gauge</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-gauge">
                            <label class="btn btn-default {{#if gauge.on}}active{{/if}}">
                                <input type="radio" name="gauge[on]" value="1"  {{#if gauge.on}}checked{{/if}} data-live="change"/>
                                On
                            </label>
                            <label class="btn btn-default {{#unless gauge.on}}active{{/unless}}">
                                <input type="radio" name="gauge[on]" value="0"  {{#unless gauge.on}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>


                <div id="mapsvg-gauge-options" {{#unless gauge.on}}style="display:none"{{/unless}}>
                    <div class="form-group">
                            <label class="col-sm-3 control-label">Gauge labels</label>
                            <div class="col-sm-9">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="input-group">
                                            <span class="input-group-addon" id="basic-addon1">Low</span>
                                            <input data-key="low" name="gauge[labels][low]" type="text" autocomplete="off" class="form-control" autocomplete="off" value="{{gauge.labels.low}}" data-live="keyup"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="input-group">
                                            <span class="input-group-addon" id="basic-addon2">High</span>
                                            <input data-key="high" name="gauge[labels][high]" type="text" autocomplete="off" class="form-control" autocomplete="off" value="{{gauge.labels.high}}" data-live="keyup"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Menu (Regions)</label>
                    <div class="col-sm-9">
                        <div class="btn-group mapsvg-toggle-visibility" data-toggle="buttons" data-toggle-visibility="#mapsvg-menu-group">
                            <label class="btn btn-default {{#if menu.on}}active{{/if}}">
                                <input type="radio" name="menu[on]" value="1"  {{#if menu.on}}checked{{/if}} data-live="change"/>
                                On
                            </label>
                            <label class="btn btn-default {{#unless menu.on}}active{{/unless}}">
                                <input type="radio" name="menu[on]" value="0"  {{#unless menu.on}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>

                <div id="mapsvg-menu-group"{{#unless menu.on}}style="display:none"{{/unless}}>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Menu (Regions) container</label>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <span class="input-group-addon">#</span>
                                <input type="text" onkeyup="jQuery(this).closest('.form-group').find('#menu-container-id-live').text(this.value)" onpaste="jQuery(this).parent().find('#menu-container-id-live').text(this.value)" class="form-control" autocomplete="off" name="menu[containerId]" value="{{menu.containerId}}" data-live="keyup" />
                            </div>
                            <p class="help-block">Add &lt;ul id="<span id="menu-container-id-live">{{menu.containerId}}</span>"&gt;&lt;/ul&gt; anywhere on a page with your map to show clickable list of regions</p>

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Menu (Regions) item template</label>
                        <div class="col-sm-9">
                            <textarea rows="5" name="menu[template]" data-live="change" id="mapsvg-menu-template" class="mapsvg-function-textarea form-control" data-validate="function">{{#if_function menu.template}}{{{toString menu.template}}}{{/if_function}}</textarea>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Menu (Markers)</label>
                    <div class="col-sm-9">
                        <div class="btn-group mapsvg-toggle-visibility" data-toggle="buttons" data-toggle-visibility="#mapsvg-menu-markers-group">
                            <label class="btn btn-default {{#if menuMarkers.on}}active{{/if}}">
                                <input type="radio" name="menuMarkers[on]" value="1"  {{#if menuMarkers.on}}checked{{/if}} data-live="change"/>
                                On
                            </label>
                            <label class="btn btn-default {{#unless menuMarkers.on}}active{{/unless}}">
                                <input type="radio" name="menuMarkers[on]" value="0"  {{#unless menuMarkers.on}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>

                <div id="mapsvg-menu-markers-group"{{#unless menuMarkers.on}}style="display:none"{{/unless}}>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Menu (Markers) container</label>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <span class="input-group-addon">#</span>
                                <input type="text" onkeyup="jQuery(this).closest('.form-group').find('#menu-container-2-id-live').text(this.value)" onpaste="jQuery(this).parent().find('#menu-container-2-id-live').text(this.value)" class="form-control" autocomplete="off" name="menuMarkers[containerId]" value="{{menuMarkers.containerId}}" data-live="keyup" />
                            </div>
                            <p class="help-block">Add &lt;ul id="<span id="menu-container-2-id-live">{{menuMarkers.containerId}}</span>"&gt;&lt;/ul&gt; anywhere on a page with your map to show clickable list of regions</p>

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Menu (Markers) item template</label>
                        <div class="col-sm-9">
                            <textarea rows="5" name="menuMarkers[template]" data-live="change" id="mapsvg-menu-markers-template" class="mapsvg-function-textarea form-control" data-validate="function">{{#if_function menuMarkers.template}}{{{toString menuMarkers.template}}}{{/if_function}}</textarea>
                        </div>
                    </div>
                </div>
                

                <div class="form-group">
                    <label class="col-sm-3 control-label">Preloader text</label>
                    <div class="col-sm-9">
                        <input type="text" autocomplete="off" class="form-control" id="mapsvg-controls-preloader-text" name="loadingText" value="{{loadingText}}" data-live="keyup"/>
                    </div>
                </div>
            </div>

            <!-- TAB 2 -->
            <!-- COLORS -->

            <div class="tab-pane" id="tab_colors">
                <div class="form-group">
                    <label class="col-sm-3 control-label">Background</label>
                    <div class="col-sm-9">
                        <div class="input-group cpicker" data-color-name="background">
                            <span class="input-group-addon"><i></i></span>
                            <input type="text" autocomplete="off" class=" form-control" name="colors[background]" value="{{colors.background}}"  data-live="change"/>
                        </div>
                        <!--<p class="help-block">Enter "transparent" for transparent background.</p>-->
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Base</label>
                    <div class="col-sm-9">
                        <div class="input-group cpicker" data-color-name="base">
                            <span class="input-group-addon"><i></i></span>
                            <input type="text" autocomplete="off" class=" form-control" name="colors[base]" value="{{colors.base}}"  data-live="change"/>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Disabled</label>
                    <div class="col-sm-9">
                        <div class="input-group cpicker" data-color-name="disabled">
                            <span class="input-group-addon"><i></i></span>
                            <input class=" form-control" type="text" autocomplete="off" name="colors[disabled]" value="{{colors.disabled}}"  data-live="change"/>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">Strokes</label>
                    <div class="col-sm-9">

                        <div class="input-group cpicker" data-color-name="stroke">
                            <span class="input-group-addon"><i></i></span>
                            <input class=" form-control" type="text" autocomplete="off" name="colors[stroke]" value="{{colors.stroke}}"  data-live="change"/>
                        </div>
                    </div>
                </div>


                <div class="form-group" id="mapsvg-colors-hover">
                    <label class="col-sm-3 control-label">Hover</label>
                    <div class="col-sm-9">
                        <div class="btn-group mapsvg-color-brightness" data-object="options" data-toggle="buttons" style="margin-bottom: 15px;">
                            <label class="btn btn-default {{#if_string colors.hover}}active{{/if_string}}">
                                <input type="radio" name="hoverMode" value="color" {{#if_string colors.hover}}checked{{/if_string}}/>
                                Color
                            </label>
                            <label class="btn btn-default {{#if_number colors.hover}}active{{/if_number}}">
                                <input type="radio" name="hoverMode" value="brightness" {{#if_number colors.hover}}checked{{/if_number}}/>
                                Brightness
                            </label>
                        </div>

                        <div class="input-group cpicker" data-color-name="hover" {{#if_number colors.hover}}style="display:none;"{{/if_number}}>
                            <span class="input-group-addon"><i></i></span>
                            <input class="form-control" type="text" autocomplete="off" name="colors[hover]" value="{{#if_string colors.hover}}{{colors.hover}}{{/if_string}}"  data-live="change"/>
                        </div>

                        <input {{#if_string colors.hover}}style="display:none;"{{/if_string}} class="mapsvg-brightness-slider" id="mapsvg-controls-hover-brightness" type="text" autocomplete="off" name="colors[hover]" value="{{#if_number colors.hover}}colors.hover{{/if_number}}"  data-live="change"/>

                    </div>
                </div>

                <div class="form-group" id="mapsvg-colors-selected">
                    <label class="col-sm-3 control-label">Selected</label>
                    <div class="col-sm-9">
                        <div class="btn-group mapsvg-color-brightness" data-object="options" data-toggle="buttons"  id="mapsvg-controls-selected" style="margin-bottom: 15px;">
                            <label class="btn btn-default  {{#if_string colors.selected}}active{{/if_string}}">
                                <input type="radio" name="selectedMode" value="color" {{#if_string colors.selected}}checked{{/if_string}}/>
                                Color
                            </label>
                            <label class="btn btn-default {{#if_number colors.selected}}active{{/if_number}}">
                                <input type="radio" name="selectedMode" value="brightness" {{#if_number colors.selected}}checked{{/if_number}} />
                                Brightness
                            </label>
                        </div>

                        <div class="input-group cpicker" data-color-name="selected" {{#if_number colors.selected}}style="display:none;"{{/if_number}}>
                            <span class="input-group-addon"><i></i></span>
                            <input class="form-control" type="text" autocomplete="off" name="colors[selected]" value="{{#if_string colors.selected}}{{colors.selected}}{{/if_string}}" data-live="change"/>
                        </div>

                        <input {{#if_string colors.selected}}style="display:none;"{{/if_string}} class="mapsvg-brightness-slider" id="mapsvg-controls-selected-brightness" type="text" autocomplete="off" name="colors[selected]" value="{{#if_number colors.selected}}{{colors.selected}}{{/if_number}}" data-live="change"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Gauge low</label>
                    <div class="col-sm-9">
                        <div class="input-group cpicker" data-color-name="gaugeColorLow">
                            <span class="input-group-addon"><i></i></span>
                            <input class=" form-control" type="text" autocomplete="off" name="gauge[colors][low]" value="{{gauge.colors.low}}" data-live="change"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">Gauge high</label>
                    <div class="col-sm-9">
                        <div class="input-group cpicker" data-color-name="gaugeColorHigh">
                            <span class="input-group-addon"><i></i></span>
                            <input class=" form-control" type="text" autocomplete="off" name="gauge[colors][high]" value="{{gauge.colors.high}}" data-live="change"/>
                        </div>
                    </div>
                </div>

                <!--SPACER FOR COLOR PICKER-->
                <div style="height: 100px;"></div>


            </div>

            <!-- TAB 3 -->
            <!-- REGIONS -->
            <div class="tab-pane" id="tab_regions">

                <div id="mapsvg-search-regions-no-matches" class="well well-sm" style="display: none;">No matches</div>
                <table class="table table-striped {{#if gauge.on}}mapsvg-gauge-on{{/if}}" id="table-regions">
                    <tbody>
                    {{#each regions}}
                        <tr id="mapsvg-region-{{id_no_spaces}}" data-region-id="{{id}}" class="mapsvg-region-row">
                            <td>
                                <div class="mapsvg-region-names">
                                    <div class="mapsvg-region-id">{{id}}</div>
                                    <div class="mapsvg-region-title">{{title}}</div>
                                </div>
                            </td>
                        </tr>
                    {{/each}}
                    </tbody>
                </table>
            </div>

            <!-- TAB 4 -->
            <!-- MARKERS -->
            <div class="tab-pane tab-markers" id="tab_markers">

                <!--{{#if isGeo}}-->
                    <!--<p class="help-block bold"><i class="fa fa-map-marker"></i> This map supports geo-coordinates.</p>-->
                <!--{{/if}}-->
                <!--<p class="help-block">Adding a marker: select <span class="label label-default">Edit markers</span> mode and click on the map.-->

                <div id="mapsvg-search-markers-no-matches" class="well well-sm" style="display: none;">No matches</div>
                <table class="table table-striped" id="table-markers">
                    <tbody>
                        {{#each markers}}
{{> markerPartial  isSafari=../isSafari markerImages=../markerImages}}
                        {{/each}}
                    </tbody>
                </table>

            </div>

            <div class="tab-pane" id="tab_events">
                <!-- EVENTS -->
                <div class="form-group">
                    <label class="col-sm-3 control-label">onClick</label>
                    <div class="col-sm-9">
                        <textarea id="mapsvg-event-onclick" class="mapsvg-event-field form-control" data-event="onClick" rows="8" name="onClick" data-live="change" data-delay="1000" data-validate="function">{{toString onClick}}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">mouseOver</label>
                    <div class="col-sm-9">
                        <textarea id="mapsvg-event-mouseover" class="mapsvg-event-field form-control" data-event="mouseOver" rows="8" name="mouseOver" data-live="change" data-delay="1000" data-validate="function">{{toString mouseOver}}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">mouseOut</label>
                    <div class="col-sm-9">
                        <textarea id="mapsvg-event-mouseout" class="mapsvg-event-field form-control" data-event="mouseOut" rows="8" name="mouseOut" data-live="change" data-delay="1000" data-validate="function">{{toString mouseOut}}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">beforeLoad</label>
                    <div class="col-sm-9">
                        <textarea id="mapsvg-event-beforeload" class="mapsvg-event-field form-control" data-event="beforeLoad" rows="8" name="beforeLoad" data-live="change" data-delay="1000" data-validate="function">{{toString beforeLoad}}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">afterLoad</label>
                    <div class="col-sm-9">
                        <textarea id="mapsvg-event-afterload" class="form-control mapsvg-event-field" data-event="afterLoad" placeholder="" rows="8" class="input-xxlarge" name="afterLoad" data-live="change" data-delay="1000" data-validate="function">{{toString afterLoad}}</textarea>
                    </div>
                </div>
            </div>


            <div class="tab-pane" id="tab_posts">

                <legend>Regions with Posts connection</legend>
                <div class="form-group">
                    <label class="col-sm-3 control-label">Connect</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-object="options" data-toggle="buttons"  id="mapsvg-controls-responsive">
                            <label class="btn btn-default {{#if responsive}}active{{/if}}">
                                <input type="radio" name="responsive" value="1"  {{#if responsive}}checked{{/if}} data-live="change" />
                                On
                            </label>
                            <label class="btn btn-default {{#unless responsive}}active{{/unless}}">
                                <input type="radio" name="responsive" value="0"  {{#unless responsive}}checked{{/unless}} data-live="change"/>
                                Off
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Post > Regions</label>
                    <div class="col-sm-9">
                        <select class="form-control select2-cpt" name="wp_posts_to_regions[]" multiple="multiple" style="width: 100%;">
                            {{#each wp_posts}}
                                <option>{{name}}</option>
                            {{/each}}
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Disabled</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-object="options" data-toggle="buttons"  id="mapsvg-controls-responsive">
                            <label class="btn btn-default {{#if responsive}}active{{/if}}">
                                <input type="radio" name="responsive" value="1"  {{#if responsive}}checked{{/if}} data-live="change" />
                                Add field to post
                            </label>
                            <label class="btn btn-default {{#unless responsive}}active{{/unless}}">
                                <input type="radio" name="responsive" value="0"  {{#unless responsive}}checked{{/unless}} data-live="change"/>
                                Use existing field
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Color</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-object="options" data-toggle="buttons"  id="mapsvg-controls-responsive">
                            <label class="btn btn-default {{#if responsive}}active{{/if}}">
                                <input type="radio" name="responsive" value="1"  {{#if responsive}}checked{{/if}} data-live="change" />
                                Add field to post
                            </label>
                            <label class="btn btn-default {{#unless responsive}}active{{/unless}}">
                                <input type="radio" name="responsive" value="0"  {{#unless responsive}}checked{{/unless}} data-live="change"/>
                                Use existing field
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Tooltip</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-object="options" data-toggle="buttons"  id="mapsvg-controls-responsive">
                            <label class="btn btn-default {{#if responsive}}active{{/if}}">
                                <input type="radio" name="responsive" value="1"  {{#if responsive}}checked{{/if}} data-live="change" />
                                Add field to post
                            </label>
                            <label class="btn btn-default {{#unless responsive}}active{{/unless}}">
                                <input type="radio" name="responsive" value="0"  {{#unless responsive}}checked{{/unless}} data-live="change"/>
                                Template
                            </label>
                        </div>
                        <textarea rows="5" name="wp_post[tooltips]" data-live="change" id="mapsvg-post-tooltips-template" class="form-control"></textarea>

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Popover</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-object="options" data-toggle="buttons"  id="mapsvg-controls-responsive">
                            <label class="btn btn-default {{#if responsive}}active{{/if}}">
                                <input type="radio" name="wp_post[popovers][mode]" value="add"  {{#if responsive}}checked{{/if}} data-live="change" />
                                Add field to post
                            </label>
                            <label class="btn btn-default {{#unless responsive}}active{{/unless}}">
                                <input type="radio" name="wp_post[popovers][mode]" value="template"  {{#unless responsive}}checked{{/unless}} data-live="change"/>
                                Template
                            </label>
                        </div>
                        <textarea rows="5" name="wp_post[popovers][template]" data-live="change" id="mapsvg-post-popovers-template" class="form-control"></textarea>

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Link</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-object="options" data-toggle="buttons"  id="mapsvg-controls-responsive">
                            <label class="btn btn-default {{#if responsive}}active{{/if}}">
                                <input type="radio" name="responsive" value="1"  {{#if responsive}}checked{{/if}} data-live="change" />
                                Add field to post
                            </label>
                            <label class="btn btn-default {{#unless responsive}}active{{/unless}}">
                                <input type="radio" name="responsive" value="0"  {{#unless responsive}}checked{{/unless}} data-live="change"/>
                                Use existing field
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">Data</label>
                    <div class="col-sm-9">
                        <div class="btn-group" data-object="options" data-toggle="buttons"  id="mapsvg-controls-responsive">
                            <label class="btn btn-default {{#if responsive}}active{{/if}}">
                                <input type="radio" name="responsive" value="1"  {{#if responsive}}checked{{/if}} data-live="change" />
                                Add field to post
                            </label>
                            <label class="btn btn-default {{#unless responsive}}active{{/unless}}">
                                <input type="radio" name="responsive" value="0"  {{#unless responsive}}checked{{/unless}} data-live="change"/>
                                Use existing field
                            </label>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </form>
</script>

<script type="text/x-handlebars-template" id="mapsvg-handlebars-region-list">
    {{#each regions}}
        {{> regionPartial}}
    {{/each}}
</script>

<script type="text/x-handlebars-template" id="mapsvg-handlebars-region">
    <div class="mapsvg-region-fields">
        <div class="form-group">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-sm {{#if disabled}}active{{/if}}" >
                    <input type="checkbox" class="region_disable  mapsvg-region-disabled" name="regions[{{id}}][disabled]" {{#if disabled}}checked{{/if}} data-live="change"/><i class="fa fa-ban"></i> Disable
                </label>
                <!--<label class="btn btn-default btn-sm {{#if selected}}active{{/if}}">-->
                    <!--<input type="checkbox" value="1" class="region_select  mapsvg-region-selected" name="regions[{{id}}][selected]"  {{#if selected}}checked{{/if}}/><i class="fa fa-mouse-pointer"></i> Selected-->
                <!--</label>-->
            </div>
        </div>

        <div class="form-group">
            <form>
                <label class="control-label">Color</label>
                <div class="cpicker input-group">
                    <span class="input-group-addon"><i></i></span>
                    <input class=" input-small form-control mapsvg-region-color" type="text" autocomplete="off"  class="input-small" name="regions[{{id}}][fill]" value="{{fill}}"/>
                </div>
            </form>
        </div>

        <div class="form-group">
            <label class="control-label">Tooltip</label>
            <textarea class="form-control mapsvg-region-tooltip" placeholder="Text/HTML" name="regions[{{id}}][tooltip]" data-live="keyup">{{tooltip}}</textarea>
        </div>

        <div class="form-group">
            <label class="control-label">Popover</label>
            <textarea class="form-control mapsvg-region-popover" placeholder="Text/HTML"  name="regions[{{id}}][popover]" data-live="keyup">{{popover}}</textarea>
        </div>

        <div class="form-group">
            <form>
            <label class="control-label">Link</label>
            <div class="input-group">
                  <input class="form-control mapsvg-region-link" type="text" autocomplete="off" placeholder="http://" name="regions[{{id}}][href]" value="{{href}}" data-live="keyup"/>
                  <span class="input-group-addon">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="mapsvg-region-link-tab"  name="regions[{{id}}][target]"  value="blank" {{#ifeq target "blank"}}checked{{/ifeq}}  data-live="change" /> New tab
                        </label>
                    </div>
                  </span>
            </div>
            </form>
        </div>

        <form>
        <div class="form-group">
            <div class="mapsvg-region-gauge-container">
                <label class="control-label">Gauge Value</label>
                <input class="form-control mapsvg-region-gauge" type="text" autocomplete="off" name="regions[{{id}}][gaugeValue]" value="{{gaugeValue}}" data-live="keyup" data-validate="number"/>
            </div>
        </div>
        </form>

        <div class="form-group">
            <label class="control-label">Data</label>
            <textarea class="form-control mapsvg-region-data" name="regions[{{id}}][data]" data-live="keyup">{{toString data}}</textarea>
        </div>
      </div>
</script>

<script type="text/x-handlebars-template" id="mapsvg-handlebars-marker">
    <tr id="mapsvg-marker-{{id}}" class="mapsvg-marker-row" data-marker-id="{{id}}">
        <td>
            <div class="mapsvg-region-id">{{id}}</div>
            <button type="button" class="btn btn-xs btn-default mapsvg-marker-delete">Delete</button>
        </td>
        <td>
            <div class="form-group">
                <label class="control-label">ID</label>
                <div class="input-group">
                    <input type="text" autocomplete="off" class="form-control mapsvg-marker-id" value="{{id}}">
                    <span class="input-group-btn mapsvg-marker-id-save-container" data-toggle="tooltip" data-placement="left" title="You can hit Enter&#9166; to set ID" >
                        <button type="button" class="btn btn-default mapsvg-marker-id-save"  type="button" >Set</button>
                    </span>
                </div>
            </div>

            {{#if geoCoords}}
                <div class="form-group">
                    <label class="control-label">Lat/Lon coordinates</label>
                    <input type="text" autocomplete="off" class="form-control mapsvg-marker-geocoords" name="markers[{{id}}][geoCoords]" value="{{#if geoCoords}}{{geoCoords.[0]}}, {{geoCoords.[1]}}{{/if}}"  placeholder="lat,lon" data-live="keyup"/>
                </div>
            {{/if}}

            <div class="form-group">
                <label class="control-label">Image</label>
                <select name="markers[{{id}}][src]" class="form-control mapsvg-marker-src" data-live="change">
                    {{#each markerImages}}
                        <option value="{{url}}" {{#ifeq ../src url}}selected{{/ifeq}}>{{file}}</option>
                    {{/each}}
                </select>
            </div>

            <div class="form-group">
                <label class="control-label">Tooltip</label>
                <textarea class="form-control mapsvg-marker-tooltip" name="markers[{{id}}][tooltip]" placeholder="Text/HTML" data-live="keyup">{{tooltip}}</textarea>
            </div>

            <div class="form-group">
                <label class="control-label">Popover</label>
                <textarea class="form-control mapsvg-marker-popover" name="markers[{{id}}][popover]" placeholder="Text/HTML" data-live="keyup">{{popover}}</textarea>
            </div>

            {{#if isSafari}}<form>{{/if}}
            <div class="form-group">
                <label class="control-label">Link</label>
                <div class="input-group">
                    <input class="form-control mapsvg-marker-link" type="text" autocomplete="off" placeholder="http://" name="markers[{{id}}][href]" value="{{href}}" data-live="keyup"/>
                      <span class="input-group-addon">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="mapsvg-marker-target"  name="markers[{{id}}][target]" value="blank" {{#ifeq target "blank"}}checked{{/ifeq}}  data-live="change"/> New tab
                            </label>
                        </div>
                      </span>
                </div>
            </div>
            {{#if isSafari}}</form>{{/if}}

            <div class="form-group">
                <label class="control-label">Data</label>
                <textarea class="form-control mapsvg-marker-data" name="markers[{{id}}][data]" data-live="keyup">{{toString data}}</textarea>
            </div>
        </td>
    </tr>
</script>
