<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>{{ chart.title | replace({'<br/>': ' - '}) | striptags }}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.95, maximum-scale=0.95, user-scalable=0" />
    {# <!--[if lt IE 7]>
    <meta http-equiv="refresh" content="0;URL='static.html'">
    <![endif]--> #}
    <!--[if lt IE 9]>
    <script src="{{ config.static_path }}/vendor/json-js/json2.min.js"></script>
    <script type="text/javascript">
        window.__ltie9 = true;
    </script>
    <![endif]-->
    {% if innersvg %}
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/innersvg/innersvg.js"></script>
    {% endif %}

        {{ hook('chart_html_head', chart) }}

{% for src in stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ src }}?v={{ vis_version }}"></link>
{% endfor %}

    <script type="text/javascript" charset="utf-8">
    window.__locale = '{{ chartLocale }}';
    </script>

{% for script in scripts %}
  {% if script.ie %}<!--[if {{ script.ie }}]>
  {% endif %}
    <script type="text/javascript" charset="utf-8" src="{% if script.src %}{{ script.src }}{% else %}{{ script }}{% endif %}?v={{ vis_version }}"></script>
  {% if script.ie %}<![endif]-->
  {% endif %}
{% endfor %}

    <script type="text/javascript">
        (function() {
            dw.theme.register('{{ theme.id }}', {{ theme.getThemeData() | json | raw }});
        }).call(this);
    </script>


    <style type="text/css">
        {{ themeCSS | raw }}
    </style>

    {{ hook('chart_html_head_end', chart) }}

</head>
<body class="dw-chart chart{% if fullscreen %} fullscreen{% endif %}{% if plain %} plain{% endif %} vis-height-{{ visualization.height ? visualization.height : "fit" }} theme-{{ chart.theme }} vis-{{ chart.type }}">
    {{ hook('chart_before_body', chart, published) }}

    {# some convenient short cuts for theme templates #}
    {% set title = chart.title %}
    {% set intro = chart.getMetadata('describe.intro') %}
    {% set source = chart.getMetadata('describe.source-name') %}
    {% set sourceURL = chart.getMetadata('describe.source-url') %}


    <div class="dw-chart-header" id="header">
        {% if not plain %}
            <h1 {% if not title %}class="hidden"{% endif %}>
                <span class="chart-title">{{ title | purify | raw }}</span>
            </h1>

            <p class="chart-intro{% if not intro %} hidden{% endif %}">{{ intro|purify|raw }}</p>
        {% endif %}
    </div>

    <div class="dw-chart-body" id="chart"></div>

    {% if theme.getThemeData('template.afterChart') %}
        {{ theme.getThemeData('template.afterChart') | raw }}
    {% endif %}

    <div class="dw-chart-footer" id="footer">
        {% if not plain %}
            <div class="footer-left">
                {% if theme.getThemeData('options.footer.logo.enabled') and theme.getThemeData('options.footer.logo.position') == "left" %}
                    <img height="{{ theme.getThemeData('options.footer.logo.height') }}" src="{{ theme.getThemeData('options.footer.logo.url') }}">
                {% endif %}

                {% if theme.getThemeData("options.footer.sourcePosition") == "left" %}
                    {% block footer %}
                        {% if chartByline %}
                            <span class="byline-block">
                            {{ theme.getThemeData('options.footer.chartCaption') }}:
                            {{ chartByline | raw }}</span>
                        {% endif %}

                        {% if chartSource %}
                            {% set sourceCaption = theme.getThemeData('options.footer.sourceCaption') %}
                            <span class="source-block">{{ sourceCaption }}:
                            {{ chartSource | raw }}</span>
                        {% endif %}

                        {% if theme.getThemeData("options.footer.getTheData.enabled") %}
                            {% set getTheDataCaption = theme.getThemeData("options.footer.getTheData.caption") %}
                            <a href="data">{% trans getTheDataCaption %}</a>
                        {% endif %}

                        {% if theme.getThemeData("options.footer.embed.enabled") %}
                            <a href="#embed">{{ theme.getThemeData("options.footer.embed.caption") }}</a>

                            <div class="embed-code hide">
                                <div class="close">×</div>
                                <div>Please use the following HTML code to embed this chart:</div>
                                <textarea>{{ embedCode }}</textarea>
                            </div>
                            <script type="text/javascript">
                                $('a[href=#embed], .embed-code .close').click(function() { $('.embed-code').toggleClass('hide'); });
                                $('.embed-code textarea').click(function() { $(this).focus().select(); });
                            </script>
                        {% endif %}

                        {% if theme.getThemeData("options.footer.staticImage.enabled") %}
                            <a href="//s3.eu-central-1.amazonaws.com/datawrapper-exports/exports/{{ chart.id }}.png">
                                {{ theme.getThemeData("options.footer.staticImage.caption") }}
                            </a>
                        {% endif %}

                        {% if theme.getThemeData("options.footer.createdWithDatawrapper") %}
                            <a href="{{ DW_DOMAIN }}_/{{ chart.id }}" target="_blank">{% trans "Created with" %}  {% trans "Datawrapper" %}</a>
                        {% endif %}
                    {% endblock %}
                {% endif %}
            </div>
            <div class="footer-right">
                {% if theme.getThemeData("options.footer.sourcePosition") and theme.getThemeData("options.footer.sourcePosition") == "right" %}
                    {{ block('footer') }}
                {% endif %}

                {% if theme.getThemeData('options.footer.logo.enabled') and theme.getThemeData('options.footer.logo.position') == "right" %}
                    <img height="{{ theme.getThemeData('options.footer.logo.height') }}" src="{{ theme.getThemeData('options.footer.logo.url') }}">
                {% endif %}
            </div>
        {% endif %}
    </div>

    {# <div class="noscript" style="position: absolute;top: 0;left: 0;z-index: -10;">
        <a href="static.html"><img src="nojs.png" alt="{% trans "Please activate JavaScript to see the interactive chart." %}" /></a>
    </div>
    <div class="noscript" style="height:95%;position:absolute;top:0;width:98%;z-index:10;overflow:hidden">
        <div style="position:relative;top:50%;text-align:center;font-size:18px;padding:0 20px"><a style="color: rgba(0,0,0,.2); text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff; text-decoration: none;" href="static.html" >{% trans "Please activate JavaScript to see the interactive chart." %}</a></div>
    </div>#}

    {{ hook('chart_after_body', chart, published) }}

    <script type="text/javascript" charset="utf-8">

    if (document.getElementsByTagName('script').length > 0) $('body').addClass('js');

    var visJSON = {{ visualization | json | raw }};


    __dw.init($.extend({
        chartJSON: {{ chart.toStruct(true) | json | raw }},
        chartLocale: '{{ chartLocale }}',
        themeId: '{{ theme.id }}',
        visId: '{{ visualization.id }}',
        visJSON: visJSON,
        metricPrefix: {{ metricPrefix | json | raw }},
        lang: '{{ lang }}',
        data: {{ chart.loadData | json | raw }}
    }, window.__dwParams));

    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        window.onload = __dw.render();
    }

    if (visJSON.height == "fixed") {
        setInterval(function() {
            var desiredHeight = $('html').outerHeight(true);
            window.parent.postMessage({
                'datawrapper-height': {
                    '{{ chart.id }}': desiredHeight
                }
            }, "*");

            window.parent.postMessage({
                sentinel: 'amp',
                type: 'embed-size',
                height: desiredHeight
            }, '*');
        }, 1000);
    }

    {% if theme.getThemeData('template.js') %}
        {{ theme.getThemeData('template.js') | raw }}
    {% endif %}

    </script>

</body>
</html>
