{% load i18n %}
<svg viewBox="0 0 {{ chart.width }} {{ chart.height }}" style="width:100%;height:auto;max-width:{{ chart.width }}px"
     role="img" aria-label="{% translate 'Compliance trend chart' %}">
    {% for tick in chart.y_ticks %}
        <line x1="{{ chart.pad_left }}" y1="{{ tick.y }}" x2="{{ chart.inner_right }}" y2="{{ tick.y }}"
              stroke="currentColor" stroke-width="0.5" opacity="0.15"/>
        <text x="{{ chart.pad_left|add:'-6' }}" y="{{ tick.y }}" text-anchor="end" dominant-baseline="middle"
              font-size="11" fill="currentColor" opacity="0.6">{{ tick.label }}</text>
    {% endfor %}
    {% for tick in chart.x_ticks %}
        <text x="{{ tick.x }}" y="{{ chart.height|add:'-8' }}" text-anchor="middle"
              font-size="11" fill="currentColor" opacity="0.6">{{ tick.label }}</text>
    {% endfor %}
    <path d="{{ chart.area }}" fill="var(--bs-primary, #375a7f)" opacity="0.15"/>
    <polyline points="{{ chart.line }}" fill="none" stroke="var(--bs-primary, #375a7f)"
              stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
    {% for point in chart.points %}
        <circle cx="{{ point.x }}" cy="{{ point.y }}" r="3.5" fill="var(--bs-primary, #375a7f)">
            <title>{{ point.date|date:"Y-m-d" }} — {{ point.ready_pct }}% ({{ point.compliant }}+{{ point.subs }}/{{ point.audience }} {% translate "ready" %}; {{ point.non_compliant }} {% translate "non-compliant" %}, {{ point.no_submission }} {% translate "no submission" %})</title>
        </circle>
    {% endfor %}
</svg>