{% load i18n wagtailcore_tags wagtailadmin_tags %}
<tr data-testid="membership-row" data-membership-id="{{ membership.pk }}">
    <td class="title">
        <div class="title-wrapper">
            <a href="{% url 'wgp-memberships:inspect' group_pk=membership.group.pk pk=membership.pk %}">
                {% if membership.is_owner %}
                    <div title="Owner" class="w-inline-flex w-gap-2 w-items-center">
                        {{ membership.user.first_name }} {{ membership.user.last_name }}
                        {% icon name="pick" classname="icon w-w-4 w-h-4 w-text-warning-100" %}
                    </div>
                {% else %}
                    {{ membership.user.first_name }} {{ membership.user.last_name }}
                {% endif %}
            </a>
        </div>
    </td>
    {% if can_edit_memberships or can_view_memberships or can_remove_members %}
        <td class="actions-container">
            <ul class="actions">
                <li>
                    {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Actions") %}
                        {% if can_edit_memberships %}
                            <a href="{% url 'edit_membership_roles' group_pk=membership.group.pk membership_pk=membership.pk %}">
                                {% icon name="edit" classname="icon icon-edit icon" %} Edit roles
                            </a>
                        {% endif %}
                        {% if can_view_memberships %}
                            <a href="{% url 'wgp-memberships:inspect' group_pk=membership.group.pk pk=membership.pk %}">
                                {% icon name="info-circle" classname="icon icon-info-circle icon" %} Inspect
                            </a>
                        {% endif %}
                        {% if can_remove_members %}
                            <a href="{% url 'wgp-memberships:delete' group_pk=membership.group.pk pk=membership.pk %}">
                                {% icon name="bin" classname="icon icon-bin icon" %} Remove
                            </a>
                        {% endif %}
                    {% enddropdown %}
                </li>
            </ul>
        </td>
    {% endif %}
</tr>