<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
    xmlns="http://www.w3.org/2000/svg"
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    version="1.1"
    width="{{ content.width }}"
    height="{{ content.height }}"
    viewBox="0 0 {{ content.width }} {{ content.height }}"
    preserveAspectRatio="xMinYMin meet"
    class="plot {{ content.__class__.__name__.lower()}}"
   >

    <!-- a json representation of all visualized data, not used since there's a strict nojs policy, but included for your convenience -->
    {# content.render('json') #}

    <style>
        {{ content.style }}
    </style>

    {% include "svg/defs.jinja" %}

    <text class="axis-label axis-x" x="{{ content.padding }}" y="{{ content.plot_height + content.padding + 20 }}" dominant-baseline="hanging">{{ content.label_x }}</text>
    <text class="axis-label axis-y" transform="rotate(-90 0 {{ content.plot_height + content.padding }}) translate(5 15)" x="0" y="{{ content.plot_height + content.padding }}">{{ content.label_y }}</text>

    <svg class="plot-inner" x="{{ content.padding }}" y="{{ content.padding }}" width="{{ content.inner_width }}" height="{{ content.inner_height }}" viewBox="0 0 {{ content.inner_width }} {{ content.inner_height }}" preserveAspectRatio="xMinYMin meet">

        {% if content.has_grid %}
            <g class="grid">
                {% block grid %}
                {% for i in range(0, content.grid_x|length) %}

                    {% set x = content.grid_x[i] %}

                    {% if content.grid_x|length >= 4 %}
                        {% set highlighted = i % (content.grid_x|length / 4.0)|int == 0 %} {# whether this line should be highlighted and have a value shown next to it #}
                    {% else %}
                        {% set highlighted = True %}
                    {% endif %}

                    <line class="grid-x{% if highlighted %} highlighted{% endif %}" x1="{{ content.normalize_x(x) }}" y1="0%" x2="{{ content.normalize_x(x) }}" y2="{{ content.plot_height }}" />
                    
                    {% if highlighted %}
                        <text class="grid-label axis-x" x="{{ content.normalize_x(x) }}" y="{{ content.plot_height }}" dominant-baseline="hanging">{{ "%.3f"|format(x) }}</text>
                    {% endif %}
                {% endfor %}

                {% for i in range(0, content.grid_y|length) %}
                    {% set y = content.grid_y[i] %}
                    
                    {% if content.grid_y|length >= 4 %}
                        {% set highlighted = i % (content.grid_y|length / 4)|int == 0 %} {# whether this line should be highlighted and have a value shown next to it #}
                    {% else %}
                        {% set highlighted = True %}
                    {% endif %}


                    <line class="grid-y{% if highlighted %} highlighted{% endif %}" x1="0%" y1="{{ content.normalize_y(y) }}" x2="100%" y2="{{ content.normalize_y(y) }}" />
                    {% if highlighted %}
                    <text class="grid-label axis-y" transform="rotate(-90 0 {{ content.normalize_y(y) }}) translate(5 -15)" x="0" y="{{ content.normalize_y(y) }}" dominant-baseline="hanging">{{ "%.3f"|format(y) }}</text>
                    {% endif %}
                {% endfor %}
                {% endblock %}
            </g>
        {% endif %}

        <g id="{{ content.dataset.ref_id }}" class="dataset">
        {% block dataset scoped %}

            {% if content.is_dataframe(content.dataset.data) %}
                {% for series_index in content.dataset.data %}
                {% set series = content.dataset.data[series_index] %}

                    {% for x, y in series.iteritems() %}

                        <a href="#{{ content.dataset.datapoint_id(x) }}">
                            <g id="{{ content.dataset.datapoint_id(x) }}" class="datapoint">
                            {% block datapoint scoped %}

                                <use href="#marker" class="marker" x="{{ content.normalize_x(x) }}" y="{{ content.normalize_y(y) }}" />

                                <text class="datapoint-value" x="{{ content.normalize_x(x) + 5 }}" y="{{ content.normalize_y(y) - 20 }}">{{ "%.5f"|format(y) }}</text>

                            {% endblock %}
                            </g>
                        </a>

                    {% endfor %}
                {% endfor %}
            {% else %}

                <text>{{ content.dataset.data.__class__.__name__ }}</text>

            {% endif %}

            <a class="dataset-link" href="#{{ content.dataset.ref_id }}">
                {# <text class="dataset-name" x="{{ content.inner_width  }}" y="{{ 10 + (idx * 20) }}" text-anchor="end">{{ content.dataset.title }}</text> #}
            </a>
            
            <g class="description">

                <foreignObject class="html" x="0" y="{{ content.plot_height + content.padding }}" width="100%" height="{{ content.description_height }}px"> {# either render HTML #}
                    <body xmlns="http://www.w3.org/1999/xhtml">
                        <h1>{{ content.dataset.title }}</h1>
                        {{ content.dataset.description.render() }}
                    </body>
                </foreignObject>

            </g>

        {% endblock dataset %}
        </g> <!-- / .dataset -->
    </svg>
</svg>
