{# il2ks-template: templates/il2ks/components/bar_chart.html v1 - copy this line along when you override #}
{% load i18n il2ks %}{% comment %}
  bar_chart.html ({% bar_chart spec %}, spec = il2ks.web.charts.ChartSpec): an inline-SVG bar chart (FR-WEB-16).
  Context: spec (title, desc, chart_id, ...), chart (the BarChart layout: bars with SVG paths, y_ticks, x_labels,
  legend, table_head, table_rows, is_empty). Colours are the --il2-chart-* tokens (site.css), so it follows light and
  dark mode; each bar has a <title> (native tooltip); the numbers are in the "Show the numbers" table.
{% endcomment %}<figure class="chart" id="{{ spec.chart_id }}">
  <figcaption class="chart__title">{{ spec.title }}</figcaption>
  {% if chart.is_empty %}
    <p class="muted">{% translate "Nothing to show yet." %}</p>
  {% else %}
    {% if chart.legend %}
      <ul class="chart__legend">
        {% for label in chart.legend %}<li><span class="chart__swatch chart__swatch--s{{ forloop.counter0 }}" aria-hidden="true"></span>{{ label }}</li>{% endfor %}
      </ul>
    {% endif %}
    <svg class="chart__svg" viewBox="0 0 {{ chart.width }} {{ chart.height }}" role="img" aria-labelledby="{{ spec.chart_id }}-t {{ spec.chart_id }}-d" focusable="false">
      <title id="{{ spec.chart_id }}-t">{{ spec.title }}</title>
      <desc id="{{ spec.chart_id }}-d">{{ spec.desc }}</desc>
      <g class="chart__grid" aria-hidden="true">
        {% for tick in chart.y_ticks %}
          <line x1="{{ chart.plot_left|floatformat:"1u" }}" x2="{{ chart.plot_right|floatformat:"1u" }}" y1="{{ tick.y|floatformat:"1u" }}" y2="{{ tick.y|floatformat:"1u" }}"{% if forloop.first %} class="chart__axis"{% endif %}/>
          <text class="chart__tick" x="{{ chart.plot_left|floatformat:"1u" }}" dx="-6" y="{{ tick.y|floatformat:"1u" }}" dy="3.5" text-anchor="end">{{ tick.label }}</text>
        {% endfor %}
        {% for label in chart.x_labels %}
          <text class="chart__tick" x="{{ label.x|floatformat:"1u" }}" y="{{ chart.baseline|floatformat:"1u" }}" dy="15" text-anchor="middle">{{ label.text }}</text>
        {% endfor %}
      </g>
      {% for bar in chart.bars %}<path class="chart__bar chart__bar--s{{ bar.series }}" d="{{ bar.path }}"><title>{{ bar.tip }}</title></path>{% endfor %}
    </svg>
    <details class="chart__data">
      <summary>{% translate "Show the numbers" %}</summary>
      <div class="table-wrap">
        <table class="data-table data-table--compact">
          <thead>
            <tr><th scope="col">{{ spec.title }}</th>{% for label in chart.table_head %}<th scope="col" class="num">{{ label }}</th>{% endfor %}</tr>
          </thead>
          <tbody>
            {% for category, values in chart.table_rows %}
              <tr><th scope="row">{{ category }}</th>{% for value in values %}<td class="num">{{ value|num }}</td>{% endfor %}</tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </details>
  {% endif %}
</figure>