<?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"
   >

    <!-- 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">
        <g class="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 %}
        </g>

        <g class="datasets">
        {% for idx in range(0, content.datasets|length) %}

            {% set dataset = content.datasets[idx] %}

            <g id="{{ dataset.ref_id }}" class="dataset">

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

                <g class="description">

                    <switch> <!-- switch uses first item with supported (or no) requiredExtensions -->
                        <foreignObject class="html" requiredExtensions="http://www.w3.org/1999/xhtml" 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>{{ dataset.title }}</h1>
                                {{ dataset.description.render() }}
                            </body>
                        </foreignObject>
                        
                        <svg class="fallback" x="0" y="{{ content.plot_height + content.padding }}" width="100%" height="{{ content.description_height }}"> {# or fall back to an SVG representation that shows the markdown plainly #}

                            <text x="0" y="20" class="heading" width="100%">{{ dataset.title }}</text>

                            {% set lines = dataset.description.split("\n") %}

                            <g class="description-fallback">
                            {% for linenum in range(1, lines|length + 1) %}
                                {% set line = lines[linenum - 1] %}
                                <text x="10" y="{{ 25 + 5 + (20 * linenum) }}">{{ line }}</text>
                            {% endfor %}
                            </g>

                        </svg>

                    </switch>
                </g>

                {% if dataset.authorized_datapoints|length %} 
                <a class="dataset-link" href="#{{ dataset.ref_id }}">
                    <path class="dataset-line" d="
                        {% for datapoint in dataset.authorized_datapoints %}
                            {% if loop.first %}M{% else %}L{% endif %} {# first loop Moves the "pen", others create Lines from last coord #}
                            {{ content.normalize_x(datapoint.x) }} {{ content.normalize_y(datapoint.y) }}
                        {% endfor %}
                    " />
                </a>
                {% endif %}

                {% for datapoint in dataset.authorized_datapoints %}


                    <a href="#{{ dataset.datapoint_id(datapoint) }}">
                        <g id="{{ dataset.datapoint_id(datapoint) }}" class="datapoint">

                            <g class="error">

                                {% if datapoint.error_upper %}
                                <g class="upper">
                                    <line x1="{{ content.normalize_x(datapoint.x) }}" y1="{{ content.normalize_y(datapoint.y) }}" x2="{{ content.normalize_x(datapoint.x) }}" y2="{{ content.normalize_y(datapoint.y + datapoint.error_upper) }}" />
                                    <line x1="{{ content.normalize_x(datapoint.x) - 5 }}" y1="{{ content.normalize_y(datapoint.y + datapoint.error_upper) }}" x2="{{ content.normalize_x(datapoint.x) + 5 }}" y2="{{ content.normalize_y(datapoint.y + datapoint.error_upper) }}" />
                                </g>
                                {% endif %}

                                {% if datapoint.error_lower %}
                                <g class="lower">
                                    <line x1="{{ content.normalize_x(datapoint.x) }}" y1="{{ content.normalize_y(datapoint.y) }}" x2="{{ content.normalize_x(datapoint.x) }}" y2="{{ content.normalize_y(datapoint.y - datapoint.error_lower) }}" />
                                    <line x1="{{ content.normalize_x(datapoint.x) - 5 }}" y1="{{ content.normalize_y(datapoint.y - datapoint.error_lower) }}" x2="{{ content.normalize_x(datapoint.x) + 5 }}" y2="{{ content.normalize_y(datapoint.y - datapoint.error_lower) }}" />
                                </g>
                                {% endif %}

                            </g>

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

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

                        </g>
                    </a>

                {% endfor %}
            </g>
        {% endfor %}i
        </g> <!-- /datasets -->
    </svg>
</svg>
