<script type="text/x-handlebars-template" data-name="toolbar">
    <div class="row">
        <div class="col-xs-4">
        </div>
        <div class="mapsvg-toolbar-title col-xs-4">
            Google Maps
        </div>
        <div class="col-xs-4">
        </div>
    </div>
</script>

<script type="text/x-handlebars-template" data-name="main">
    <div class="well" id="mapsvg-can-use-gmap">
        You can't use Google Maps with a not calibrated SVG file.
    </div>
    <form class="form-horizontal mapsvg-view-padding">

        <div class="form-group">
            <label class="col-sm-3 control-label">Maps API key</label>
            <div class="col-sm-9">
                <input class="form-control" type="text" name="googleMaps[apiKey]" autocomplete="off" value="{{googleMaps.apiKey}}" data-live="keyup"/>
                <p class="help-block"><a href="https://mapsvg.com/tutorials/5/how-to-get-a-google-api-key/" target="_blank">Get Google Maps API key</a></p>
                <p class="help-block">If you change the key, click on "Save" & reload the page.</p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Enable</label>
            <div class="col-sm-9">
                <input type="checkbox" id="googleMapsOn" name="googleMaps[on]" value="1"  class="mapsvg-onoff" {{#if googleMaps.on}}checked{{/if}} data-live="change" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Go to location</label>
            <div class="col-sm-9">
                <input type="text" class="form-control typeahead" onclick="this.focus();this.select()" id="mapsvg-gm-address" placeholder="Enter address..." />
                <!--            <span class="input-group-btn">-->
                <!--              <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>-->
                <!--            </span>-->
            </div>
        </div><!-- /input-group -->

        <div class="form-group">
            <label class="col-sm-3 control-label">Map type</label>
            <div class="col-sm-9">
                <div class="btn-group" data-toggle="buttons" id="mapsvg-controls-cursor">
                    <label class="btn btn-default  {{#ifeq googleMaps.type 'roadmap'}}active{{/ifeq}}">
                        <input type="radio" name="googleMaps[type]" value="roadmap" {{#ifeq googleMaps.type 'roadmap'}}checked{{/ifeq}} data-live="change"/>
                        Road
                    </label>
                    <label class="btn btn-default  {{#ifeq googleMaps.type 'satellite'}}active{{/ifeq}}">
                        <input type="radio" name="googleMaps[type]" value="satellite" {{#ifeq googleMaps.type 'satellite'}}checked{{/ifeq}} data-live="change"/>
                        Satellite
                    </label>
                    <label class="btn btn-default  {{#ifeq googleMaps.type 'hybrid'}}active{{/ifeq}}">
                        <input type="radio" name="googleMaps[type]" value="hybrid" {{#ifeq googleMaps.type 'hybrid'}}checked{{/ifeq}} data-live="change"/>
                        Hybrid
                    </label>
                    <label class="btn btn-default  {{#ifeq googleMaps.type 'terrain'}}active{{/ifeq}}">
                        <input type="radio" name="googleMaps[type]" value="terrain" {{#ifeq googleMaps.type 'terrain'}}checked{{/ifeq}} data-live="change"/>
                        Terrain
                    </label>
                </div>
            </div>
        </div>

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

                <div class="radio">
                    <label><input name="googleMaps[style]" type="radio" value="default" {{#ifeq googleMaps.style 'default'}}checked{{/ifeq}} data-live="change"/> Default</label>
                </div>
                <div class="radio">
                    <label><input name="googleMaps[style]" type="radio" value="silver" {{#ifeq googleMaps.style 'silver'}}checked{{/ifeq}} data-live="change"/> Silver</label>
                </div>
                <div class="radio">
                    <label><input name="googleMaps[style]" type="radio" value="retro" {{#ifeq googleMaps.style 'retro'}}checked{{/ifeq}} data-live="change"/> Retro</label>
                </div>
                <div class="radio">
                    <label><input name="googleMaps[style]" type="radio" value="dark" {{#ifeq googleMaps.style 'dark'}}checked{{/ifeq}} data-live="change"/> Dark</label>
                </div>
                <div class="radio">
                    <label><input name="googleMaps[style]" type="radio" value="night" {{#ifeq googleMaps.style 'night'}}checked{{/ifeq}} data-live="change"/> Night</label>
                </div>
                <div class="radio">
                    <label><input name="googleMaps[style]" type="radio" value="blue" {{#ifeq googleMaps.style 'blue'}}checked{{/ifeq}} data-live="change"/> Blue</label>
                </div>
                <div class="radio">
                    <label><input name="googleMaps[style]" type="radio" value="custom" {{#ifeq googleMaps.style 'custom'}}checked{{/ifeq}} data-live="change"/> <b>Custom</b></label>
                </div>

                <div id="mapsvg-gm-custom-style-extra" style="{{#ifnoteq googleMaps.style 'custom'}}display: none;{{/ifnoteq}}">
                    <p id="mapsvg-gm-create-custom-style" class="help-block">
                        Create a custom style at <a href="https://mapstyle.withgoogle.com" target="_blank">mapstyle.withgoogle.com</a>
                        or get a ready style at <a href="https://snazzymaps.com/explore" target="_blank">snazzymaps.com</a> and paste
                        the code into the field below:
                    </p>
                    <textarea rows="7" class="form-control" id="mapsvg-gm-custom-style-textarea" placeholder="Paste in JSON styles">{{jsonToString googleMaps.styleJSON}}</textarea>
                    <p id="mapsvg-gm-invalid-json" class="help-block" style="display:none;color: #a00;">Invalid JSON</p>
                </div>
            </div>
        </div>

        <div>

        </div>

        <!--
        <div class="form-group">
            <label class="col-sm-3 control-label">SVG file</label>
            <div class="col-sm-9">
                <button type="button" class="btn btn-default" id="mapsvg-google-download">Download</button>
                <p>
                    Get geo-calibrated SVG file with Google Maps screenshot in the background for your custom artwork.
                    Draw vector shapes on top of Google Maps screenshot in any vector editing software and upload
                    the file back into MapSVG. MapSVG automatically removes Google Maps screenshot from the file and
                    places your artwork on live Google Map by geo-coordinates stored in SVG file.
                </p>
            </div>
        </div>
        -->




    </form>
</script>

<script type="text/x-handlebars-template" data-name="download">
    <!--<div id="mapsvg-google-map-fullscreen-wrap">-->
        <!--<div id="mapsvg-google-map-fullscreen"></div>-->
        <!--<div id="mapsvg-google-map-fullscreen-controls" class="well">-->
            <!--Zoom-in to desired area and download it as SVG file.<br />-->
            <!--<a class="btn btn-default" id="mapsvg-gm-download">Download SVG file</a>-->
            <!--<button class="btn btn-default" id="mapsvg-gm-close">Close</button>-->
        <!--</div>-->
    <!--</div>-->
</script>