{%import "executePythonDisplayMacro.js" as display with context%}
{% set flags={} %}
<div class="row chart-button-group">
    <div class="form-group col-sm-9" style="padding-right:10px;">
        {% if this.get_options_dialog_pixieapp() %}
        <button pd_app="{{this.get_options_dialog_pixieapp()}}" 
            class="btn btn-default no_loading_msg"
            pd_options="runInDialog=true"
            id="option_btn_{{prefix}}">
            <pd_event_handler pd_source="option_btn_{{prefix}}" pd_script="ShellAccess[eventInfo['entity']].on_ok()"></pd_event_handler>
            Options
        </button>
        {%if show_options_dialog%}
        <script>
            $("#option_btn_{{prefix}}").click();
        </script>
        {%endif%}
        {%endif%}
        {% if this.options.get('mpld3') == 'true' %}
            {% if flags.update({'downloadSVG': True}) %} {% endif %}
            <button id="downloadSVG{{prefix}}" class="btn btn-default">Download SVG</button>
        {% endif %}
        <button pd_app="pixiedust.apps.gateway.share.ShareChartApp" 
                pd_options="runInDialog=true;title=Share Chart" 
                class="btn btn-default no_loading_msg">
            Share
        </button>
    </div>
    {% if this.getRendererList() and this._rendererId %}
    <div class="form-group col-sm-3">
        {% if this.getRendererList() | length > 1 %}
        <label class="field">Renderer:</label>
        <select class="form-control" id="renderer{{prefix}}" style="margin:0; display:inline-block; width:70%;">
            {% for renderer in this.getRendererList() %}
                <option value="{{renderer._rendererId}}" {{'selected' if this._rendererId==renderer._rendererId else ''}}>{{renderer._rendererId}}</option>
            {% endfor %}
        </select>
        {% endif %}
    </div>
    {% endif %}
</div>

<script>
{%if flags.get("downloadSVG",False)%}
setTimeout(function(){
    mpld3Node = $("#wrapperHTML{{prefix}} svg.mpld3-figure");
    if (mpld3Node.length == 0){
        $("#downloadSVG{{prefix}}").hide()
    }else{
        $("#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();
        });
    }
}, 500);
{%endif%}

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