{# Zestaw ikon-awatarów w stylu Windrose (róża wiatrów / znaki geometryczne).
   Kolory z palety: sim #C0182B, engine #0E6B4F, summary #002FA7, idea #6A6A66.
   Użycie: {% import "_icons.html" as ico %} {{ ico.avatar('rose-2', 40) }} #}

{% set ICON_IDS = ['rose-1','rose-2','rose-3','rose-4','compass','needle','star8','tri'] %}

{% macro avatar(icon_id, size=40) %}
{%- set c = {'rose-1':'#C0182B','rose-2':'#0E6B4F','rose-3':'#002FA7','rose-4':'#6A6A66',
             'compass':'#C0182B','needle':'#0E6B4F','star8':'#002FA7','tri':'#6A6A66'} -%}
{%- set col = c.get(icon_id, '#6A6A66') -%}
<svg class="wr-avatar" width="{{ size }}" height="{{ size }}" viewBox="0 0 40 40"
     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <rect x="0.6" y="0.6" width="38.8" height="38.8" rx="7" fill="#FAFAF7" stroke="#E4E2DB"/>
  {%- if icon_id in ('rose-1','rose-2','rose-3','rose-4') %}
    <circle cx="20" cy="20" r="12" fill="none" stroke="#141414" stroke-width="1"/>
    <path d="M20 7 L22.4 18 L20 15.8 L17.6 18 Z" fill="{{ col }}"/>
    <path d="M20 33 L17.6 22 L20 24.2 L22.4 22 Z" fill="#141414"/>
    <path d="M7 20 L18 17.6 L15.8 20 L18 22.4 Z" fill="#141414" opacity="0.55"/>
    <path d="M33 20 L22 22.4 L24.2 20 L22 17.6 Z" fill="#141414" opacity="0.55"/>
  {%- elif icon_id == 'compass' %}
    <circle cx="20" cy="20" r="13" fill="none" stroke="{{ col }}" stroke-width="1.4"/>
    <circle cx="20" cy="20" r="2" fill="{{ col }}"/>
    <path d="M20 9 L23 20 L20 17 L17 20 Z" fill="{{ col }}"/>
  {%- elif icon_id == 'needle' %}
    <path d="M20 6 L26 20 L20 34 L14 20 Z" fill="none" stroke="{{ col }}" stroke-width="1.4"/>
    <path d="M20 6 L26 20 L20 20 Z" fill="{{ col }}"/>
  {%- elif icon_id == 'star8' %}
    {%- for a in range(0, 360, 45) %}
    <path transform="rotate({{ a }} 20 20)" d="M20 8 L21.6 20 L18.4 20 Z" fill="{{ col }}" opacity="{{ '1' if a % 90 == 0 else '0.5' }}"/>
    {%- endfor %}
  {%- else %}{# tri #}
    <path d="M20 8 L31 30 L9 30 Z" fill="none" stroke="{{ col }}" stroke-width="1.4"/>
    <circle cx="20" cy="23" r="3" fill="{{ col }}"/>
  {%- endif %}
</svg>
{% endmacro %}

{% macro picker(name, selected) %}
<div class="iconpicker">
  {%- for id in ICON_IDS %}
  <label class="iconopt {{ 'on' if id == selected }}">
    <input type="radio" name="{{ name }}" value="{{ id }}" {{ 'checked' if id == selected }} hidden>
    {{ avatar(id, 34) }}
  </label>
  {%- endfor %}
</div>
{% endmacro %}