{# Macro search_field — buscador de lista con icono y atajo opcional.
   Uso:
     {% from "core/components/search_field.html" import search_field %}
     {{ search_field("folder-search", placeholder="Buscar carpeta",
                     attrs='data-folder-search', shortcut="/") }}

   attrs    → atributos extra del <input> (data-* para el JS de la página), sin escapar.
   shortcut → tecla que se muestra como pista; el atajo lo cablea la página.
#}
{% from "core/components/icon.html" import icon as _icon %}

{% macro search_field(id, placeholder="Buscar…", label="Buscar", attrs="", shortcut="") %}
<label class="dg-search" for="{{ id }}">
  <span class="sr-only">{{ label }}</span>
  {{ _icon("search", class="dg-search-icon") }}
  <input id="{{ id }}" type="search" class="dg-search-input" placeholder="{{ placeholder }}" autocomplete="off"{% if attrs %} {{ attrs|safe }}{% endif %}>
  {%- if shortcut %}
  <kbd class="dg-kbd">{{ shortcut }}</kbd>
  {%- endif %}
</label>
{%- endmacro %}