{% spaceless %}
    {% if button.visible %}
        <div class="">
            <select class="border border-base-200 bg-white font-medium min-w-20 placeholder-base-400 shadow-xs text-font-default-light text-sm focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 group-[.errors]:border-red-600 focus:group-[.errors]:outline-red-600 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:group-[.errors]:border-red-500 dark:focus:group-[.errors]:outline-red-500 dark:scheme-dark group-[.primary]:border-transparent disabled:!bg-base-50 dark:disabled:!bg-base-800 px-3 py-2 w-full pr-8! max-w-2xl appearance-none text-ellipsis "
                    {% include "admin_extra_buttons/includes/attrs.html" with button=button %}
                    onchange="window.location = this.options[this.selectedIndex].value">
                <option value="#">
                    {{ button.label }}
                </option>
                {% for choice in button.get_choices %}
                    <option {% if choice.selected %}selected="selected"{% endif %} value="{{ choice.url }}">
                        {{ choice.label }}
                    </option>
                {% endfor %}
            </select>
            <span class="material-symbols-outlined absolute group-[.primary]:text-white pointer-events-none mr-[12px] right-0 text-base-400 top-0 top-1/2 hover:text-base-700 dark:text-base-500 dark:hover:text-base-200 -translate-y-1/2">expand_more</span>
        </div>
    {% endif %}
{% endspaceless %}