{% if actions %}
    <div class="group leading-none relative" x-data="{ openActionsId{{ instance.pk }}: false }">
        <span class="cursor-pointer material-symbols-outlined md-18 text-gray-400 transition-colors group-hover:text-primary-600 dark:text-gray-400" @click="openActionsId{{ instance.pk }} = !openActionsId{{ instance.pk }}">more_horiz</span>

        <nav class="absolute bg-white border flex flex-col leading-none py-1 right-0 rounded-md shadow-lg text-gray-500 text-sm z-50 w-48 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openActionsId{{ instance.pk }}" @click.outside="openActionsId{{ instance.pk }} = false">
            {% for action in actions %}
                <a href="{{ action.path }}" class="mx-1 px-3 py-2 rounded-md whitespace-nowrap hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200"{% for attr_name, attr_value in action.attrs.items %} {{ attr_name }}="{{ attr_value }}"{% endfor %}>
                    {{ action.title }}
                </a>
            {% endfor %}
        </nav>
    </div>
{% endif %}
