{% macro icon(name, class_name='') -%}
<svg class="icon {{ class_name }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  {% if name == 'arrow' %}<path d="M5 12h14m-5-5 5 5-5 5"/>
  {% elif name == 'external' %}<path d="M14 4h6v6m0-6L10 14M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5"/>
  {% elif name == 'download' %}<path d="M12 3v12m-5-5 5 5 5-5M4 15v5h16v-5"/>
  {% elif name == 'search' %}<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/>
  {% elif name == 'filter' %}<path d="M4 7h16M4 17h16"/><circle cx="8" cy="7" r="2" fill="currentColor"/><circle cx="16" cy="17" r="2" fill="currentColor"/>
  {% elif name == 'grid' %}<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
  {% elif name == 'layers' %}<path d="m3 8 9-5 9 5-9 5-9-5Zm0 5 9 5 9-5M3 18l9 5 9-5"/>
  {% elif name == 'circuit' %}<rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v4m6-4v4M9 18v4m6-4v4M2 9h4m-4 6h4m12-6h4m-4 6h4M10 10h4v4h-4z"/>
  {% elif name == 'check' %}<path d="m5 12 4 4L19 6"/>
  {% elif name == 'chevron' %}<path d="m9 5 7 7-7 7"/>
  {% elif name == 'close' %}<path d="m6 6 12 12M6 18 18 6"/>
  {% elif name == 'copy' %}<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M15 8V4H4v11h4"/>
  {% elif name == 'book' %}<path d="M12 6v15m0-15C8 3 4 3 2 4v15c4-1 7 0 10 2 3-2 6-3 10-2V4c-2-1-6-1-10 2Z"/>
  {% elif name == 'github' %}<path d="M9 19c-4 1-4-2-6-2m12 5v-4c0-1 .1-2-1-3 4 0 7-2 7-6 0-2-1-3-2-4 0-1 0-3-1-3-2 0-3 1-4 1a14 14 0 0 0-4 0C9 3 8 2 6 2c-1 0-1 2-1 3-1 1-2 2-2 4 0 4 3 6 7 6-1 1-1 2-1 3v4"/>
  {% endif %}
</svg>
{%- endmacro %}

{% macro option(name, label, checked=false, hint='') -%}
<label class="check-option" for="{{ name }}">
  <input type="checkbox" id="{{ name }}" name="{{ name }}" value="true" {% if checked %}checked{% endif %}>
  <span>{{ label }}</span>{% if hint %}<span class="option-hint">{{ hint }}</span>{% endif %}
</label>
{%- endmacro %}