{% load i18n %}

{% if actions %}
    <td data-label="{% trans "More actions" %}" class="field-actions_holder align-middle flex border-t border-base-200 font-normal px-3 py-2 text-left text-sm before:block before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-base-500 dark:before:text-base-300 lg:before:hidden lg:py-3 lg:table-cell dark:border-base-800 lg:w-px">
        {% with action_id=instance_pk|cut:"-" %}
            <div class="group/action leading-none relative" x-data="{ openActionsId{{ action_id }}: false }">
                <span x-ref="rowDropdown{{ action_id }}" class="cursor-pointer flex h-7 material-symbols-outlined md-18 -my-1 !leading-7 rounded text-center text-base-400 w-7 group-hover/action:bg-base-100 group-hover/action:text-base-700 dark:text-font-default-dark group-hover/action:dark:bg-base-800 group-hover/action:dark:text-white" @click="openActionsId{{ action_id }} = !openActionsId{{ action_id }}">
                    more_horiz
                </span>

                <template x-teleport="body">
                    <nav x-anchor.bottom-end.offset.4="$refs.rowDropdown{{ action_id }}" class="bg-white border flex flex-col leading-none py-1 rounded shadow-lg text-sm top-7 z-50 w-48 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openActionsId{{ action_id }}" @click.outside="openActionsId{{ action_id }} = false">
                        {% for action in actions %}
                            <a href="{% url action.raw_path instance_pk %}" class="mx-1 px-3 py-2 rounded truncate hover:bg-base-100 dark:hover:bg-base-700 dark:hover:text-base-200"{% for attr_name, attr_value in action.attrs.items %} {{ attr_name }}="{{ attr_value }}"{% endfor %}>
                                {{ action.title }}
                            </a>
                        {% endfor %}
                    </nav>
                </template>
            </div>
        {% endwith %}
    </td>
{% endif %}
