{% from "tungsten/forms/macros.html" import wrapper, ui_action %}
{% call wrapper(field, v) %}
<div class="flex flex-wrap items-center gap-2 rounded-lg bg-white px-2 py-1.5 shadow-sm ring-1 dark:bg-white/5 {{ 'ring-danger-600 dark:ring-danger-500' if v.errors else 'ring-gray-950/10 dark:ring-white/20' }}"
     id="{{ v.id }}" {{ v.extra }}>
  {% for o in v.selected %}
  <span class="inline-flex items-center gap-x-1 rounded-md bg-primary-50 px-2 py-1 text-xs font-medium text-primary-700 ring-1 ring-inset ring-primary-600/10 dark:bg-primary-400/10 dark:text-primary-400">
    {{ o.label }}
    <input type="hidden" name="{{ v.path }}" value="{{ o.value }}">
    {% if not v.disabled %}{{ ui_action(form, 'mts.remove:' ~ v.path ~ ':' ~ o.value, __('Remove'), 'text-primary-500 hover:text-primary-700', 'x') }}{% endif %}
  </span>
  {% else %}
  <span class="px-1 text-sm text-gray-400 dark:text-gray-500">{{ v.placeholder or __('Nothing selected') }}</span>
  {% if not v.multiple %}<input type="hidden" name="{{ v.path }}" value="">{% endif %}
  {% endfor %}
  <span class="ms-auto flex items-center gap-x-1">{{ v.select_button }}{{ v.suffix_actions }}</span>
</div>
{% endcall %}