{% load brickwork_icons i18n %}
{% comment %}
Trend indicator (VIZ-017): a standalone directional caption, extracted from
_stat.html's former inline trend block (VIZ-002, BR-BW-TPL-007) so a table
cell or a scorecard can render the same accessible trend contract without
pulling in the whole KPI tile. Structural, consumed via {% include %} (no
render-time enforcement needed, matching _stat.html's own consumption mode:
this component carries the same trend/trend_label contract with zero
Python-side validation, so introducing a tag here would add behaviour the
extraction is not supposed to change). Since icvoss/django-brickwork#334,
_stat.html itself consumes this partial rather than keeping a second copy:
there is one implementation of the trend contract, this one, not two.

Class name: bw-trend, not the block's former bw-stat__trend. That was a BEM
element scoped to .bw-stat, which is meaningless once this markup renders
inside a table cell or a scorecard with no .bw-stat ancestor: keeping the
scoped name here, unqualified, would not match any selector a consumer or
this package's own CSS reasonably targets outside a .bw-stat. bw-trend is
this partial's own root class as a standalone consumer sees it.

css_class (optional, matching bw_icon's/bw_chart_mount's own seam): extra
class tokens appended after bw-trend and the bw-trend--<state> modifier,
space-joined, escaped. _stat.html (#334) uses this to add its own
bw-stat__trend back onto the element it includes this partial for:
bw-stat__trend was documented public surface before the extraction
(docs/DESIGN.md, docs/BRANDING.md name it in prose about the X-fg token,
and it carried its own styling) so #334 retains it alongside bw-trend on
the SAME element rather than retiring it; a consumer selecting
.bw-stat__trend directly still matches. This is one implementation (this
partial) rendered with two class names when _stat.html is the caller, not
two implementations: a table cell or scorecard that includes this partial
directly gets only bw-trend, because they never had bw-stat__trend to
begin with.

bw-trend rather than bw-trend-indicator because this package uses the
SHORTEST name that identifies the component, which is not the same rule as
"prefer bare nouns". Both forms ship: bare where one word names the thing
(bw-badge, bw-card, bw-spinner) and compound where it takes two
(bw-data-table, bw-empty-state, bw-chart-mount). "table" alone would be
ambiguous against every other table on a page and "state" alone means
nothing, so those earn their second word. "trend" earns nothing from
"indicator": every component here indicates something, so the suffix
distinguishes this from no other component. The package does not pad
names, and a future reader who greps for bw-data-table should find that
rule rather than a bare-noun preference the compounds would falsify.

Trend accessibility (BR-BW-TPL-007, AC-BW-073/074, unchanged from _stat.html):
whenever ``trend`` is set, the template renders a directional glyph
(arrow-up / arrow-down / minus, decorative) PLUS a visually hidden text
fallback ("increased" / "decreased" / "unchanged"), so the direction never
rides on colour alone by construction, even when the caller supplies no
``trend_label``. ``trend_label``, when given, refines the accessible text
(e.g. "12% up on last month") and renders visibly beside the glyph. Colour
(success or danger ink on the row) is reinforcement only, never the sole
signal.

Required context:
  trend ("up" | "down" | "flat"): the direction of change. A falsy value
        (None, "", 0, False, or the key absent) renders nothing, matching
        _stat.html's own ``{% if trend %}`` guard: no data means no trend
        row, not a spurious "unchanged". Any other, truthy but
        unrecognised value takes the flat treatment, matching _stat.html's
        own fallback.
Optional:
  trend_label (str): the visible delta text beside the glyph.
  css_class (str): extra class tokens appended after bw-trend and the
        bw-trend--<state> modifier (see the header note above). Escaped;
        never Brickwork's own trusted markup.

Usage (a table cell, VIZ-017's own motivating case)::

    {% include "brickwork/components/_trend_indicator.html" with trend="up" trend_label="12% on last month" %}

States: up/down/flat, each its own .bw-trend--<state> colour pairing;
  the glyph and hidden text are identical in shape across up and down (only
  the flat state renders a different, non-directional glyph (minus, not an
  arrow) and never shows a visible word for the state itself: the visible
  slot is always the caller-supplied trend_label, matching _stat.html's own
  treatment).
Accessibility: a trend is never colour-only: a directional glyph
  (decorative) always pairs with visually-hidden text naming the direction
  in words ("increased"/"decreased"/"unchanged"), regardless of whether the
  caller supplies a visible trend_label.
Responsive: no breakpoint switch; no width-dependent CSS on any .bw-trend*
  selector.
{% endcomment %}
{% if trend %}
<span class="bw-trend bw-trend--{% if trend == "up" %}up{% elif trend == "down" %}down{% else %}flat{% endif %}{% if css_class %} {{ css_class }} {{ css_class }}--{% if trend == "up" %}up{% elif trend == "down" %}down{% else %}flat{% endif %}{% endif %}">
  {% if trend == "up" %}{% bw_icon "arrow-up" size="sm" decorative=True %}{% elif trend == "down" %}{% bw_icon "arrow-down" size="sm" decorative=True %}{% else %}{% bw_icon "minus" size="sm" decorative=True %}{% endif %}
  <span class="bw-visually-hidden">{% if trend == "up" %}{% translate "increased" %}{% elif trend == "down" %}{% translate "decreased" %}{% else %}{% translate "unchanged" %}{% endif %}</span>
  {% if trend_label %}<span>{{ trend_label }}</span>{% endif %}
</span>
{% endif %}