{# Swapped in by Unpoly as the combobox listbox contents. Each option needs
   a stable id so core.js can point aria-activedescendant at it. #}
<div id="manyrelated-results-{{ field_name }}" class="fcu-dropdown-menu" role="listbox" style="display: block; position: static; max-height: 240px; overflow-y: auto; border: none; box-shadow: none; padding: 0;">
  {% for result in results %}
    {# tojson output is only safe inside single-quoted attributes #}
    <a href="#"
       class="fcu-dropdown-item"
       role="option"
       id="manyrelated-opt-{{ field_name }}-{{ loop.index0 }}"
       aria-selected="false"
       style="display: block; padding: 8px 12px; text-decoration: none; color: inherit; font-size: var(--fcu-font-size-sm);"
       onclick='addManyRelatedItem("{{ field_name }}", "{{ result[field_type.related_class._primary_key] }}", {{ field_type.render_display(result)|tojson }}); return false;'>
      {{ field_type.render_display(result) }}
    </a>
  {% endfor %}
  {% if not results %}
    <div role="option" aria-disabled="true" style="padding: 8px 12px; font-size: var(--fcu-font-size-sm); color: var(--fcu-text-muted); font-style: italic;">{{ construct.t("crud-no-items-found") }}</div>
  {% endif %}
  {% if field_type.create == "quick" and query and not quick_exact %}
    <a href="#"
       class="fcu-dropdown-item"
       role="option"
       id="manyrelated-opt-{{ field_name }}-quick"
       aria-selected="false"
       style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; text-decoration: none; color: var(--fcu-primary); font-size: var(--fcu-font-size-sm);"
       onclick='addManyRelatedQuickItem("{{ field_name }}", {{ query|tojson }}); return false;'>
      {{ icon("add", style="font-size: 14px;") }} {{ construct.t("crud-quick-add", {"value": query}) }}
    </a>
  {% endif %}
</div>