{%import "executePythonDisplayMacro.js" as display with context%}
<script>
$("#mapOptions{{prefix}}").click(function(){
    {%include resModule + ":chartOptions.dialog" %}
});
$("#downloadSVG{{prefix}}").click(function(){
    var svg = $("#wrapperHTML{{prefix}} svg.mpld3-figure")[0].outerHTML;
    var URL = (window.webkitURL || window.URL);
    var url = URL.createObjectURL(new Blob([svg], {type : "image/svg+xml"}));
    var a = document.createElement('a');
    $("#wrapperHTML{{prefix}}")[0].appendChild(a);
    a.innerHTML = "graphic.svg";
    a.href = url;
    a.setAttribute("type", "hidden");
    a.download = "graphic.svg";
    a.click();
});

$("#renderer{{prefix}}").change(function(){
    var rendererId = $(this).val();
    {% call display.executeDisplay( useCellMetadata=True ) %}
        addOptions({"rendererId": rendererId });
    {% endcall %}
});
</script>

<div class="row">
    <div class="form-group col-sm-10" style="padding-right:10px;">
        <button id="mapOptions{{prefix}}">Options</button>
        {% if this.options.get('staticFigure') != 'true' and this.options.get("handlerId") != 'mapView' %}
            <button id="downloadSVG{{prefix}}">Download SVG</button>
        {% endif %}
    </div>
    {% if this.getRendererList() and this._rendererId %}
    <div class="form-group col-sm-2">
        <label class="field">Renderer:</label>
        <select class="form-control" id="renderer{{prefix}}" style="margin-left: 0px;">
            {% for renderer in this.getRendererList() %}
                <option value="{{renderer._rendererId}}" {{'selected' if this._rendererId==renderer._rendererId else ''}}>{{renderer._rendererId}}</option>
            {% endfor %}
        </select>
    </div>
    {% endif %}
</div>