{% props toggleLabel = null, toggleSize = null, dropdownClass = null, position = 'right' %}
<el-dropdown {{ attributes.defaults(stimulus_controller('ferienpass/admin-dropdown')).defaults({ class: 'inline-block' }) }}>

    {% block toggle %}
        <button class="cursor-pointer">
            {% if toggleLabel is not null %}
                <span class="inline-flex items-center gap-x-0.5 rounded-md bg-white dark:bg-white/5 {{ toggleSize|default('sm') == 'lg' ? 'px-3 py-2' : 'px-2.5 py-1.5' }} text-sm font-medium text-gray-900 dark:text-white/95 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-white/10 hover:bg-gray-50 dark:hover:bg-white/10">
                    <span class="flex items-center space-x-1">
                        <span>{{ toggleLabel }}</span>
                        <span class="size-4 text-gray-500"><twig:ux:icon name="ph:caret-down" /></span>
                    </span>
                </span>
            {% else %}
                <span id="options-menu-0-button"
                      class="-m-2.5 block p-2.5 text-gray-500 dark:text-gray-100/50 hover:text-gray-900 dark:hover:text-gray-100/80">
                    <span class="sr-only">Open options</span>
                    <twig:ux:icon name="ph:dots-three-vertical-bold" class="h-5 w-5" aria-hidden="true" />
                </span>
            {% endif %}
        </button>
    {% endblock %}

    {% if dropdownClass|default is empty %}
        {% set dropdownClass = 'w-56' %}
    {% endif %}

    <el-menu anchor="bottom {{ position|default('right') == 'right' ? 'end' : 'start' }}" popover class="{{ dropdownClass }} origin-top-{{ position|default('right') }} rounded-md bg-white dark:bg-gray-950 shadow-lg outline-1 outline-black/5 dark:outline-white/10 transition transition-discrete [--anchor-gap:--spacing(2)] data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in">
        <div class="py-1 divide-y divide-gray-100 dark:divide-white/5">
            {% block dropdown %}{% endblock %}
        </div>
    </el-menu>

</el-dropdown>
