{% extends "chart/base.twig" %}
{% block content %}

{{ parent() }}

{{ hook('visualize_before_content') }}

<script type="text/javascript" charset="utf-8" src="/static/vendor/canvg/canvg.bundle.min.js"></script>
<script type="text/javascript" src="/static/vendor/scrolltofixed/jquery-scrolltofixed-min.js"></script>

{% for vis in visualizations_deps %}
<script type="text/javascript" charset="utf-8" src="{{ vis.__static_path }}/{{ vis.id }}.js?v={{ vis.version }}"></script>
{% endfor %}

<script type="text/javascript">
var visData = {{ vis_data | raw }};

dw.backend.ready(function() {
    require(['dw/chart/visualize'], function(visualize) {
        visualize.init(visData.themes, visData.visualizations, visData.vis, "{{ mode }}");
    });
});
</script>

<div class="dw-create-visualize chart-editor chart-editor-{{ mode }}">
    <div class="row">
        {% include "chart/visualize/sidebar.twig" %}

        <div class="span8">

            <div class="scrollfix-cont" data-offset-top="100" data-offset-bottom="130" style="position:relative;">
                <div id="iframe-wrapper" style="height:500px; overflow:visible;">
                    <iframe src="" id="iframe-vis" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
                </div>

                {{ hook('render_resize_control') }}

                <div id="notifications"></div>
            </div>

        </div>

    </div>
</div>

{% endblock %}
