{#
  Shared template macros.

  Import at the top of any template that needs them:
    {% from "_macros.html" import icon, brand, mark %}
#}

{# An icon from the inlined sprite. `name` omits the "i-" prefix. #}
{% macro icon(name, cls="") -%}
<svg class="icon {{ cls }}" aria-hidden="true"><use href="#i-{{ name }}"/></svg>
{%- endmacro %}

{#
  The leaf-and-wafer mark, inlined rather than referenced as <img> so it can
  scale with the surrounding font size. Gradient ids are suffixed with `uid`
  because ids are document-global: two marks on one page with the same ids
  means the second silently reuses the first one's gradients.
#}
{% macro mark(cls="brand-mark", uid="a") -%}
<svg class="{{ cls }}" viewBox="0 0 64 64" role="img" aria-label="LLeMbas">
  <defs>
    <linearGradient id="mk-{{ uid }}-w" x1="0" y1="0" x2="0.3" y2="1">
      <stop offset="0" stop-color="#EACB74"/>
      <stop offset="0.5" stop-color="#C9A227"/>
      <stop offset="1" stop-color="#916F13"/>
    </linearGradient>
    <linearGradient id="mk-{{ uid }}-l" x1="0.1" y1="1" x2="0.9" y2="0">
      <stop offset="0" stop-color="#93A5B6"/>
      <stop offset="0.4" stop-color="#F1F6FA"/>
      <stop offset="1" stop-color="#B8C7D5"/>
    </linearGradient>
    <clipPath id="mk-{{ uid }}-c"><rect x="6" y="6" width="52" height="52" rx="13"/></clipPath>
  </defs>
  <rect x="6" y="6" width="52" height="52" rx="13" fill="url(#mk-{{ uid }}-w)"/>
  <g clip-path="url(#mk-{{ uid }}-c)" fill="none" stroke-linecap="round">
    <g stroke="#7A5C10" stroke-opacity="0.38" stroke-width="2">
      <path d="M32 6 V58"/><path d="M6 32 H58"/>
    </g>
    <g stroke="#F6E3A8" stroke-opacity="0.3" stroke-width="1">
      <path d="M33.2 6 V58"/><path d="M6 33.2 H58"/>
    </g>
  </g>
  <rect x="7.1" y="7.1" width="49.8" height="49.8" rx="11.9" fill="none"
        stroke="#7A5C10" stroke-opacity="0.3" stroke-width="1.2"/>
  <path d="M21.2 44.8 L17 49.4" stroke="#8A9AA8" stroke-width="3"
        stroke-linecap="round" fill="none"/>
  <path d="M20.5 45.5 C13.8 31.7 23.8 20.9 45.5 18.5 C49.8 35 39.8 45.8 20.5 45.5 Z"
        fill="url(#mk-{{ uid }}-l)"/>
  <path d="M20.5 45.5 C28 38 36 29 45.5 18.5" fill="none" stroke="#61758A"
        stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round"/>
</svg>
{%- endmacro %}

{#
  The wordmark as live text rather than the outlined SVG: it stays selectable,
  searchable and readable to a screen reader, and scales with the user's font
  size. The capitals spelling LLM take the gold accent.
#}
{% macro wordmark() -%}
<span class="brand-llm">LL</span>e<span class="brand-llm">M</span>bas
{%- endmacro %}

{#
  A model's avatar: the uploaded image, or a generated initial.

  The fallback colour is derived from the model id, so every model gets a
  stable, distinct-looking badge without an administrator having to upload
  anything. Hue only -- saturation and lightness are fixed so the result always
  sits legibly against both themes.
#}
{% macro model_avatar(model, cls="model-avatar") -%}
{% if model.image_path %}
<img class="{{ cls }}" src="/uploads/models/{{ model.image_path }}"
     alt="" loading="lazy" width="32" height="32">
{% else %}
<span class="{{ cls }} model-avatar--initial"
      style="--avatar-hue: {{ model.model_id | stable_hue }}"
      aria-hidden="true">{{ model.initial }}</span>
{% endif %}
{%- endmacro %}

{% macro brand(href="/", uid="a") -%}
<a class="sidebar__brand" href="{{ href }}">
  {{ mark(uid=uid) }}
  <span>{{ wordmark() }}</span>
</a>
{%- endmacro %}