{% load i18n %}

<div class="relative">
    {% include 'sb_admin/widgets/includes/simple_field_label.html' with label_classes="radio-dropdown-label inline-flex text-dark-900 mb-8 text-14 leading-18 font-medium" %}
    <div id="{{ widget.attrs.id }}-wrapper" class="js-simple-multiselect-detail js-dropdown-wrapper">
        <button
                data-bs-toggle="dropdown"
                aria-expanded="false"
                data-bs-offset="[0, 8]"
                class="btn px-10 font-normal w-full"
        >
            <span id="{{ widget.attrs.id }}-value" class="js-dropdown-label flex gap-8">{{ widget.form_field.empty_label }}</span>
            <svg class="ml-8 no-rotate text-dark">
                <use xlink:href="#Sort Alt"></use>
            </svg>
        </button>
        <div id="{{ widget.attrs.id }}-dropdown" class="dropdown-menu">
            <ul id="{{ widget.attrs.id }}" class="relative py-8">
                {% for group, options, index in widget.optgroups %}
                    {% for option in options %}
                        <li>
                            {% include option.template_name with widget=option %}
                        </li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% include 'sb_admin/widgets/includes/help_text.html' %}