{# LLM-generated by using the prompt "Generate a simple HTML-and-CSS only Twig template to render a sparkline. #}

{% set max_value = data|reduce((max, value) => value > max ? value : max, data[0]|default(0)) %}
{% set min_value = data|reduce((min, value) => value < min ? value : min, data[0]|default(0)) %}
{% set range = max_value - min_value %}
{% set width = width|default(100) %}
{% set height = height|default(20) %}
{% set line_width = line_width|default(1) %}
{% set line_color = line_color|default('#1a73e8') %}
{% set fill_color = fill_color|default('rgba(26, 115, 232, 0.2)') %}

<div class="sparkline-container" style="width: {{ width }}px; height: {{ height }}px;">
  <svg width="{{ width }}" height="{{ height }}" viewBox="0 0 {{ width }} {{ height }}" preserveAspectRatio="none">
    {% if data|length > 1 and range > 0 %}
      {# Generate points for the line #}
      {% set points = [] %}
      {% for value in data %}
        {% set x = loop.index0 * (width / (data|length - 1)) %}
        {% set y = height - ((value - min_value) / range * height) %}
        {% set points = points|merge([x ~ ',' ~ y]) %}
      {% endfor %}

      {# Draw the fill area #}
      <polygon points="0,{{ height }} {{ points|join(' ') }} {{ width }},{{ height }}" fill="{{ fill_color }}" />

      {# Draw the line #}
      <polyline points="{{ points|join(' ') }}" fill="none" stroke="{{ line_color }}" stroke-width="{{ line_width }}" />
    {% endif %}
  </svg>
</div>
