{% extends "wagtailadmin/generic/inspect.html" %}
{% load wagtailadmin_tags %}
{% block main_content %}
    <div class="w-mt-8">
        <h2 data-testid="membership-title"
            class="w-relative w-h1"
            data-user-id="{{ object.user.pk }}">
            {{ object.group.name }}
            {% icon name="arrow-right-full" classname="icon w-w-4 w-h-4" %}
            {{ object.user.first_name }} {{ object.user.last_name }}
        </h2>
        <h4 data-testid="is-owner"
            class="w-flex w-gap-2 w-items-center w-text-text-label w-h4">
            {% if object.is_owner %}
                Is owner: Yes {% icon name="check" classname="icon w-w-4 w-h-4 w-text-positive-100" %}
            {% else %}
                Is owner: No {% icon name="cross" classname="icon w-w-4 w-h-4 w-text-critical-100" %}
            {% endif %}
        </h4>
        {% if can_set_ownership or can_unset_ownership or can_edit_roles %}
            <div class="w-text-end">
                {% if can_set_ownership %}
                    <a href="{% url 'set_ownership' group_pk=object.group.pk membership_pk=object.pk %}"
                       class="button button-small button-secondary">Set as owner</a>
                {% endif %}
                {% if can_unset_ownership %}
                    <a href="{% url 'unset_ownership' group_pk=object.group.pk membership_pk=object.pk %}"
                       class="button button-small button-secondary">Unset as owner</a>
                {% endif %}
                {% if can_edit_roles %}
                    <a href="{% url 'edit_membership_roles' group_pk=object.group.pk membership_pk=object.pk %}"
                       class="button button-small button-secondary">Edit roles</a>
                {% endif %}

            </div>
        {% endif %}

        {% fragment as roles %}
            <table class="listing listing--dashboard listing-page">
                <thead class="w-sr-only">
                    <tr>
                        <th class="title">Roles</th>
                    </tr>
                </thead>
                <tbody>
                    {% for role in roles %}
                        <tr data-testid="role-row" data-role-id="{{ role.pk }}">
                            <td class="title">
                                <div class="title-wrapper">
                                    {% if can_view_role %}
                                        <a href="{% url 'wgp-roles:inspect' pk=role.pk %}">{{ role.name }}</a>
                                    {% else %}
                                        {{ role.name }}
                                    {% endif %}
                                </div>
                            </td>
                            {% if can_view_role or can_remove_role %}
                                <td class="actions-container">
                                    <ul class="actions">
                                        <li>
                                            {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Actions") %}
                                                {% if can_view_role %}
                                                    <a href="{% url 'wgp-roles:inspect' pk=role.pk %}">
                                                        {% icon name="info-circle" classname="icon w-w-4 w-h-4" %}
                                                        View role
                                                    </a>
                                                {% endif %}
                                                {% if can_remove_role %}
                                                    <a href="{% url 'remove_role' group_pk=object.group.pk membership_pk=object.pk role_pk=role.pk %}">
                                                        {% icon name="bin" classname="icon w-w-4 w-h-4" %}
                                                        Remove role
                                                    </a>
                                                {% endif %}
                                            {% enddropdown %}
                                        </li>
                                    </ul>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endfragment %}
        {% include "wagtailadmin/shared/panel.html" with heading="Roles" id_prefix="member_roles" classname="w-panel--dashboard" children=roles %}
    </div>
{% endblock main_content %}