{% extends "wagtailadmin/generic/inspect.html" %}
{% load wagtailadmin_tags wagtailcore_tags %}

{% block main_content %}
    <div class="w-mt-8">
        <h2 class="w-relative w-h1">{{ object.name }}</h2>
        {% fragment as members %}
            <table class="listing listing--dashboard listing-page">
                <thead class="w-sr-only">
                    <tr>
                        <th class="title">Group members</th>
                    </tr>
                </thead>
                <tbody>
                    {% for membership in memberships %}
                        {% include "wagtail_group_permissions/includes/tables/table_row_user_membership.html" with membership=membership %}
                    {% endfor %}
                </tbody>
            </table>
        {% endfragment %}
        {% if can_add_members %}
            <div class="w-text-end">
                <a href="{% url 'add_member' group_pk=object.pk %}"
                   class="button button-small button-secondary">Add member</a>
            </div>
        {% endif %}
        {% include "wagtailadmin/shared/panel.html" with heading="Members" id_prefix="member_groups" classname="w-panel--dashboard" children=members %}

        {% fragment as managed_pages %}
            <table class="listing listing--dashboard listing-page"
                   data-testid="managed-pages-table">
                <thead class="w-sr-only">
                    <tr>
                        <th class="title">Managed pages</th>
                    </tr>
                </thead>
                <tbody>
                    {% for page in managed_pages %}
                        <tr data-testid="managed-page-row" data-page-id="{{ page.pk }}">
                            <td class="title">
                                <div class="title-wrapper">
                                    <a href="{% url 'wagtailadmin_explore' page.pk %}">{{ page.title }}</a>
                                </div>
                            </td>
                            {% if can_remove_managed_pages %}
                                <td class="actions-container">
                                    <ul class="actions">
                                        <li>
                                            {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Actions") %}
                                                {% if can_remove_managed_pages %}
                                                    <a href="{% url 'remove_managed_page' group_pk=object.pk pk=page.pk %}">
                                                        {% icon name="bin" classname="icon icon-bin icon" %} Remove
                                                    </a>
                                                {% endif %}
                                            {% enddropdown %}
                                        </li>
                                    </ul>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endfragment %}
        {% if can_add_managed_pages %}
            <div class="w-text-end">
                <a href="{% url 'add_managed_page' group_pk=object.pk %}"
                   class="button button-small button-secondary">Add managed page</a>
            </div>
        {% endif %}
        {% include "wagtailadmin/shared/panel.html" with heading="Managed pages" id_prefix="managed_pages" classname="w-panel--dashboard" children=managed_pages %}

        {% fragment as allowed_roles_table %}
            <table class="listing listing--dashboard listing-page">
                <thead class="w-sr-only">
                    <tr>
                        <th class="title">Allowed roles</th>
                    </tr>
                </thead>
                <tbody>
                    {% for role in allowed_roles %}
                        <tr data-testid="role-row" data-role-id="{{ role.pk }}">
                            <td class="title">
                                <div class="title-wrapper">
                                    {% if can_view_roles %}
                                        <a href="{% url 'wgp-roles:inspect' pk=role.pk %}">{{ role.name }}</a>
                                    {% else %}
                                        {{ role.name }}
                                    {% endif %}
                                </div>
                            </td>
                            {% if can_edit_allowed_roles %}
                                <td class="actions-container">
                                    <ul class="actions">
                                        <li>
                                            {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Actions") %}
                                                {% if can_edit_allowed_roles %}
                                                    <a href="{% url 'remove_allowed_role' group_pk=object.pk pk=role.pk %}">
                                                        {% icon name="bin" classname="icon icon-bin icon" %} Remove
                                                    </a>
                                                {% endif %}
                                            {% enddropdown %}
                                        </li>
                                    </ul>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endfragment %}
        {% if can_edit_allowed_roles %}
            <div class="w-text-end">
                <a href="{% url 'edit_allowed_roles' group_pk=object.pk %}"
                   class="button button-small button-secondary">Edit allowed roles</a>
            </div>
        {% endif %}
        {% include "wagtailadmin/shared/panel.html" with heading="Allowed roles" id_prefix="allowed_roles" classname="w-panel--dashboard" children=allowed_roles_table %}

    </div>
{% endblock main_content %}