From 971319f8c3ba7a4a32c2f32a141886dd566a1cab Mon Sep 17 00:00:00 2001
From: Anjeel Haria <bytemeasap@gmail.com>
Date: Fri, 27 Mar 2026 14:27:45 +0530
Subject: [PATCH 1/5] [UPD] website_membership_group: Added snippet options to
 customize the membership group page

Updates
---
 website_membership_group/__manifest__.py      |  12 +-
 .../models/membership_group.py                |  18 +-
 .../src/js/membership_group_frontend.esm.js   |  38 ++++
 .../src/js/membership_group_options.esm.js    | 127 ++++++++++++
 .../static/src/scss/membership_group.scss     | 183 ++++++++++++++++++
 .../templates/website.xml                     | 170 +++++++++-------
 .../views/snippets/snippet_options.xml        |  35 ++++
 7 files changed, 508 insertions(+), 75 deletions(-)
 create mode 100644 website_membership_group/static/src/js/membership_group_frontend.esm.js
 create mode 100644 website_membership_group/static/src/js/membership_group_options.esm.js
 create mode 100644 website_membership_group/static/src/scss/membership_group.scss
 create mode 100644 website_membership_group/views/snippets/snippet_options.xml

diff --git a/website_membership_group/__manifest__.py b/website_membership_group/__manifest__.py
index dbb5b53c..187603fe 100644
--- a/website_membership_group/__manifest__.py
+++ b/website_membership_group/__manifest__.py
@@ -4,7 +4,7 @@
 {
     "name": "Website Membership Group",
     "category": "Membership",
-    "version": "18.0.1.0.0",
+    "version": "18.0.1.0.3",
     "author": "Onestein",
     "license": "AGPL-3",
     "website": "https://www.onestein.nl",
@@ -15,5 +15,15 @@
     "data": [
         "views/membership_group_view.xml",
         "templates/website.xml",
+        "views/snippets/snippet_options.xml",
     ],
+    "assets": {
+        "web.assets_frontend": [
+            "website_membership_group/static/src/scss/membership_group.scss",
+            "website_membership_group/static/src/js/membership_group_frontend.esm.js",
+        ],
+        "website.assets_wysiwyg": [
+            "website_membership_group/static/src/js/membership_group_options.esm.js",
+        ],
+    },
 }
diff --git a/website_membership_group/models/membership_group.py b/website_membership_group/models/membership_group.py
index 55a3f300..ac8c2f8e 100644
--- a/website_membership_group/models/membership_group.py
+++ b/website_membership_group/models/membership_group.py
@@ -7,7 +7,7 @@
 
 class MembershipGroup(models.Model):
     _name = "membership.group"
-    _inherit = ["membership.group", "website.published.mixin"]
+    _inherit = ["membership.group", "website.published.mixin", "website.seo.metadata"]
 
     website_top = fields.Html(strip_style=True, translate=html_translate)
     website_bottom = fields.Html(strip_style=True, translate=html_translate)
@@ -15,6 +15,22 @@ class MembershipGroup(models.Model):
     icon = fields.Image()
     page_id = fields.Many2one(comodel_name="website.page")
     website_url = fields.Char(compute="_compute_website_url", store=True)
+    website_snippet_wrap_classes = fields.Char(
+        string="Wrap Classes",
+        default="mg_wrap mg_show_image mg_show_top mg_show_bottom mg_show_committee mg_show_team",
+        help="Classes for the #wrap element (visibility options)",
+    )
+    website_snippet_members_classes = fields.Char(
+        string="Members Row Classes",
+        default="mg_layout_grid mg_show_committee_desc mg_show_team_desc",
+        help="Classes for the #mg_members_row element (layout and description options)",
+    )
+    website_committee_col_classes = fields.Char(
+        string="Committee Column Classes", default="col-lg-4"
+    )
+    website_team_col_classes = fields.Char(
+        string="Team Column Classes", default="col-lg-8"
+    )
 
     @api.depends("page_id", "page_id.is_published")
     def _compute_website_url(self):
diff --git a/website_membership_group/static/src/js/membership_group_frontend.esm.js b/website_membership_group/static/src/js/membership_group_frontend.esm.js
new file mode 100644
index 00000000..64a8086f
--- /dev/null
+++ b/website_membership_group/static/src/js/membership_group_frontend.esm.js
@@ -0,0 +1,38 @@
+import publicWidget from "@web/legacy/js/public/public_widget";
+
+publicWidget.registry.MembershipGroupCollapsible = publicWidget.Widget.extend({
+    selector: '#mg_members_row',
+
+    start: function () {
+        this.setupCollapsibleButtons();
+        return this._super.apply(this, arguments);
+    },
+
+    setupCollapsibleButtons: function () {
+        const buttons = this.el.querySelectorAll('.mg_collapse_btn');
+        buttons.forEach(button => {
+            button.onclick = (e) => {
+                e.preventDefault();
+                this.toggleDescription(button);
+            };
+        });
+    },
+
+    toggleDescription: function (button) {
+        const descriptionId = button.getAttribute('aria-controls');
+        // eslint-disable-next-line no-undef
+        const description = document.getElementById(descriptionId);
+
+        if (!description) return;
+
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+        if (isExpanded) {
+            description.classList.add('d-none');
+            button.setAttribute('aria-expanded', 'false');
+        } else {
+            description.classList.remove('d-none');
+            button.setAttribute('aria-expanded', 'true');
+        }
+    },
+});
diff --git a/website_membership_group/static/src/js/membership_group_options.esm.js b/website_membership_group/static/src/js/membership_group_options.esm.js
new file mode 100644
index 00000000..096a7bd8
--- /dev/null
+++ b/website_membership_group/static/src/js/membership_group_options.esm.js
@@ -0,0 +1,127 @@
+import options from "@web_editor/js/editor/snippets.options";
+import { rpc } from "@web/core/network/rpc";
+/**
+ * Helper to filter for module-specific option classes.
+ * Excludes base structural classes to prevent duplication in templates.
+ */
+const filterMgClasses = (classList, excludeClass) => {
+    return classList.split(/\s+/)
+        .filter(cls => cls.startsWith('mg_') && cls !== excludeClass)
+        .join(' ');
+};
+options.registry.MembershipGroupPage = options.Class.extend({
+    /**
+     * @override
+     */
+    // eslint-disable-next-line no-unused-vars
+    selectClass: function (previewMode, widgetValue, params) {
+        this._super(...arguments);
+        // Only save to database on actual click (not during hover preview)
+        if (!previewMode) {
+            this._saveToDatabase();
+        }
+    },
+
+    /**
+     * Save the current class list to the database
+     */
+    _saveToDatabase: function () {
+        const id = parseInt(this.$target[0].dataset.oeId,10);
+        // Filter to keep only option classes, excluding 'mg_wrap'
+        const classes = filterMgClasses(this.$target[0].className, 'mg_wrap');
+        if (this.lastSavedClasses !== classes) {
+            this.lastSavedClasses = classes;
+            if (id && classes) {
+                return rpc('/web/dataset/call_kw', {
+                    model: "membership.group",
+                    method: 'write',
+                    args: [[id], {'website_snippet_wrap_classes': classes}],
+                    kwargs: {},
+                });
+            }
+        }
+    },
+});
+
+options.registry.MemberLayoutOpts = options.Class.extend({
+    /**
+     * @override
+     * Triggered for Layout and Description toggles.
+     */
+     // eslint-disable-next-line no-unused-vars
+    selectClass: function (previewMode, value, $li) {
+        this._super(...arguments);
+        if (!previewMode) {
+            this._saveToDatabase();
+        }
+    },
+
+    _saveToDatabase: function () {
+        const id = parseInt(this.$target[0].dataset.oeId,10);
+        // Filter to keep only option classes, excluding 'mg_members_row'
+        const classes = filterMgClasses(this.$target[0].className, 'mg_members_row');
+
+        if (this.lastSavedClasses !== classes) {
+            this.lastSavedClasses = classes;
+            if (id && classes) {
+                return rpc('/web/dataset/call_kw', {
+                    model: "membership.group",
+                    method: 'write',
+                    args: [[id], {'website_snippet_members_classes': classes}],
+                    kwargs: {},
+                });
+            }
+        }
+    },
+});
+
+options.registry.MemberColOpts = options.Class.extend({
+    start: function () {
+        const self = this;
+        this._super(...arguments);
+
+        this.observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === "class") {
+                    self._saveToDatabase();
+                }
+            });
+        });
+
+        this.observer.observe(this.$target[0], {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+    },
+
+    destroy: function () {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        this._super(...arguments);
+    },
+
+    _saveToDatabase: function () {
+        const $row = this.$target.closest('#mg_members_row');
+        const id = parseInt($row[0]?.dataset.oeId, 10);
+        const classes = this.$target[0].className.split(/\s+/)
+            .filter(cls => cls.startsWith('mg_') || cls.startsWith('col-'))
+            .join(' ');
+
+        const field = this.$target.hasClass('mg_committee_col')
+            ? 'website_committee_col_classes'
+            : 'website_team_col_classes';
+
+        if (id && field && classes) {
+            if (this.lastSavedColClasses !== classes) {
+                this.lastSavedColClasses = classes;
+                return rpc('/web/dataset/call_kw', {
+                    model: "membership.group",
+                    method: 'write',
+                    args: [[id], {[field]: classes}],
+                    kwargs: {},
+                });
+            }
+        }
+    },
+});
diff --git a/website_membership_group/static/src/scss/membership_group.scss b/website_membership_group/static/src/scss/membership_group.scss
new file mode 100644
index 00000000..6722477c
--- /dev/null
+++ b/website_membership_group/static/src/scss/membership_group.scss
@@ -0,0 +1,183 @@
+/* =======================================================================
+   VISIBILITY TOGGLES (LAYOUT)
+   Controlled via classes applied to the #wrap element
+   ======================================================================= */
+.mg_wrap {
+    // Default: Hide all optional sections
+    .mg_image_col,
+    .mg_top_block,
+    .mg_bottom_block,
+    .mg_committee_col,
+    .mg_team_col {
+        display: none;
+    }
+
+    // Toggle display based on snippet option classes
+    &.mg_show_image .mg_image_col      { display: block; }
+    &.mg_show_top .mg_top_block        { display: block; }
+    &.mg_show_bottom .mg_bottom_block  { display: block; }
+    &.mg_show_committee .mg_committee_col { display: block; }
+    &.mg_show_team .mg_team_col        { display: block; }
+}
+
+/* =======================================================================
+   MEMBER DESCRIPTION VISIBILITY & COLLAPSIBLE SYSTEM
+   Tied to Committee Desc / Team Desc snippet options
+   ======================================================================= */
+
+/* Default: Hide descriptions and buttons for both sections */
+.mg_member_description,
+.mg_collapse_btn {
+    display: none !important;
+}
+
+// Show descriptions if the respective section toggle is ON
+.mg_show_team_desc .mg_team_col .mg_member_description,
+.mg_show_committee_desc .mg_committee_col .mg_member_description {
+    display: block !important;
+}
+
+/* Hide descriptions if collapsible is active and closed */
+#mg_members_row.mg_collapse_desc .mg_member_description.d-none {
+    display: none !important;
+}
+
+/* Animation for expanding descriptions */
+#mg_members_row.mg_collapse_desc:not(.mg_layout_grid) .mg_member_description:not(.d-none) {
+    display: block !important;
+    animation: slideDown 0.3s ease-in-out;
+}
+
+/* Show buttons ONLY if BOTH Collapsible AND the respective Section Toggle are ON */
+#mg_members_row:not(.mg_layout_grid).mg_collapse_desc.mg_show_committee_desc .mg_collapse_btn,
+#mg_members_row:not(.mg_layout_grid).mg_collapse_desc.mg_show_team_desc .mg_collapse_btn {
+    display: inline-flex !important;
+    padding: 0.25rem 0.5rem;
+    color: #6c757d;
+    font-size: 0.875rem;
+    transition: transform 0.3s ease-in-out, color 0.2s ease-in-out;
+}
+
+#mg_members_row.mg_collapse_desc .mg_collapse_btn:hover {
+    color: $primary;
+}
+
+#mg_members_row.mg_collapse_desc .mg_collapse_btn[aria-expanded="true"] {
+    transform: rotate(180deg);
+}
+
+#mg_members_row.mg_collapse_desc .mg_collapse_btn[aria-expanded="true"] i {
+    color: $primary;
+}
+
+@keyframes slideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* =======================================================================
+   MEMBER LAYOUT VARIANTS
+   ======================================================================= */
+
+/* --- GRID LAYOUT --- */
+#mg_members_row.mg_layout_grid {
+    .mg_member_list {
+        gap: 0;
+    }
+
+    /* 1 Column for Committee Section in Grid */
+    .mg_committee_col .mg_member_item {
+        flex: 0 0 100%;
+    }
+
+    /* 2 Columns for Team Section in Grid */
+    .mg_team_col .mg_member_item {
+        flex: 0 0 50%;
+    }
+
+    /* Force hide description and collapse buttons in Grid Layout */
+    .mg_member_description,
+    .mg_collapse_btn {
+        display: none !important;
+    }
+}
+
+/* --- CARDS LAYOUT --- */
+#mg_members_row.mg_layout_cards {
+    .mg_member_list {
+        gap: 0.75rem;
+        padding: 0.75rem;
+    }
+
+    .mg_member_item {
+        flex: 1 1 100% !important;
+        width: 100%;
+        min-width: 0;
+        border: 1px solid $border-color !important;
+        border-radius: $border-radius !important;
+        background: #fff;
+        box-shadow: $box-shadow-sm;
+        padding: 1rem !important;
+        transition: box-shadow 0.15s ease-in-out;
+
+        &:hover {
+            box-shadow: $box-shadow;
+        }
+    }
+
+    .mg_member_name {
+        text-align: left;
+    }
+}
+
+/* --- AVATARS LAYOUT --- */
+#mg_members_row.mg_layout_avatars {
+    .mg_member_list {
+        gap: 1rem;
+        padding: 1rem;
+    }
+
+    .mg_member_item {
+        flex: 1 1 100% !important;
+        width: 100%;
+        min-width: 0;
+        border: none !important;
+        border-radius: 0 !important;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding: 0.5rem 0.25rem !important;
+        background: transparent;
+    }
+
+    .mg_member_name {
+        font-size: 0.8125rem;
+        text-align: center;
+    }
+
+    .mg_collapse_btn {
+        margin: 0 auto;
+        display: block;
+        text-align: center;
+    }
+}
+
+/* =======================================================================
+   STYLING & THEMING
+   ======================================================================= */
+.mg_divider {
+    border-color: $primary;
+}
+
+/* =======================================================================
+   RESPONSIVE BREAKPOINTS
+   ======================================================================= */
+@include media-breakpoint-down(sm) {
+    #mg_members_row.mg_layout_avatars .mg_member_item { flex: 1 1 calc(50% - 0.5rem); }
+}
+
+@include media-breakpoint-down(md) {
+    #mg_members_row.mg_layout_cards .mg_member_item { flex: 1 1 100%; }
+    #mg_members_row.mg_layout_avatars .mg_member_item { flex: 1 1 calc(50% - 1rem); }
+}
diff --git a/website_membership_group/templates/website.xml b/website_membership_group/templates/website.xml
index 022301af..d90dc334 100644
--- a/website_membership_group/templates/website.xml
+++ b/website_membership_group/templates/website.xml
@@ -1,99 +1,123 @@
 <?xml version="1.0" encoding="UTF-8"?>
-
 <odoo>
-
     <template id="membership_group_page">
         <t t-call="website.layout">
             <t t-set="additional_title" t-value="title"/>
-            <div id="wrap">
+            <div id="wrap"
+                 t-att-data-oe-id="membership_group.id"
+                 t-attf-class="mg_wrap o_editable {{membership_group.website_snippet_wrap_classes or 'mg_show_image mg_show_top mg_show_bottom mg_show_committee mg_show_team'}}">
                 <div class="oe_structure" id="oe_structure_website_group_1"/>
-                <div class="container" name="membership_page">
-                    <div class="row" name="description_row">
-                        <h3 class="col-lg-12 text-center" id="membership_group_name"
-                            t-field="membership_group.name"/>
-                        <div class="col-lg-4">
-                            <div t-field="membership_group.image"
-                                 t-options='{"widget": "image", "class": "d-block mx-auto mb16"}'/>
+                <section class="mg_header_section pt-5 pb-4">
+                    <div class="container" name="membership_page">
+                        <div class="row" name="description_row">
+                            <div class="col-12 text-center mb-4">
+                                <h2 class="fw-bold text-primary" t-field="membership_group.name"/>
+                                <hr class="w-25 mx-auto mt-2 mb-0 mg_divider opacity-50"/>
+                            </div>
                         </div>
-                        <div class="col-lg-8 mt32">
-                            <t t-if="membership_group">
-                                <div t-field="membership_group.website_top"/>
-                                <div t-field="membership_group.website_bottom"/>
-                            </t>
+                        <div class="row align-items-start g-4">
+                            <div class="col-lg-4 text-center mg_image_col">
+                                <div t-field="membership_group.image"
+                                     t-options='{"widget": "image", "class": "img-fluid rounded shadow"}'/>
+                            </div>
+                            <div class="col-lg-8 mg_desc_col">
+                                <div class="mg_top_block" t-field="membership_group.website_top"/>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="container mt16">
-                    <div class="row o_web_membership_group_members_list_container">
-                        <t t-set="current_members"
-                           t-value="membership_group.membership_group_member_ids.filtered(lambda m:m.state=='current')"/>
-                        <div class="col-lg-4 col-md-4 mb48">
-                            <div class="col-lg-12">
-                                <div class="card card-body bg-light">
-                                    <div class="o_web_membership_group_committee_member">
-                                        <h4>Committee Members:</h4>
-                                        <t t-set="committee_members"
-                                           t-value="current_members.filtered(lambda m:m.type == 'committee').mapped('partner_id')"
-                                        />
-                                        <t t-if="committee_members">
-                                            <t t-call="website_membership_group.membership_group_member">
-                                                <t t-set="members"
-                                                   t-value="committee_members"/>
+                </section>
+
+                <section class="mg_members_section py-5">
+                    <div class="container">
+                        <div t-attf-class="row g-4 mg_members_row {{membership_group.website_snippet_members_classes or 'mg_layout_grid mg_show_committee_desc mg_show_team_desc'}}"
+                             id="mg_members_row"
+                             t-att-data-oe-id="membership_group.id"
+                        >
+                            <t t-set="current_members"
+                                               t-value="membership_group.membership_group_member_ids.filtered(lambda m: m.state == 'current')"/>
+                            <div t-attf-class="mg_committee_col {{membership_group.website_committee_col_classes or 'col-lg-4'}}">
+                                <div class="card h-100 shadow-sm border-0">
+                                    <div class="card-header border-0 py-3 bg-primary text-white"
+                                         data-name="Committee Header">
+                                        <h5 class="mb-0 fw-semibold">Committee Members</h5>
+                                    </div>
+                                    <div class="card-body p-0">
+                                        <div>
+                                            <t t-set="committee_members"
+                                               t-value="current_members.filtered(lambda m: m.type == 'committee').mapped('partner_id')"/>
+                                            <t t-call="website_membership_group.membership_group_member_list">
+                                                <t t-set="members" t-value="committee_members"/>
                                             </t>
-                                        </t>
-                                        <h5 t-else="">No Committee Members found.</h5>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="col-lg-8 col-md-8 mb48">
-                            <div class="col-lg-12">
-                                <h4>Team Members</h4>
+
+                            <div t-attf-class="mg_team_col {{membership_group.website_team_col_classes or 'col-lg-8'}}">
+                                <div class="card h-100 shadow-sm border-0">
+                                    <div class="card-header border-0 py-3 bg-primary text-white"
+                                         data-name="Team Header">
+                                        <h5 class="mb-0 fw-semibold">Team Members</h5>
+                                    </div>
+                                    <div class="card-body p-0">
+                                        <div>
+                                            <t t-set="team_members"
+                                               t-value="current_members.filtered(lambda m: m.type != 'committee').mapped('partner_id')"/>
+                                            <t t-call="website_membership_group.membership_group_member_list">
+                                                <t t-set="members" t-value="team_members"/>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <t t-set="team_members"
-                               t-value="current_members.filtered(lambda m:m.type != 'committee').mapped('partner_id')"/>
-                            <t t-if="team_members">
-                                <t t-call="website_membership_group.membership_group_member">
-                                    <t t-set="members" t-value="team_members"/>
-                                </t>
-                            </t>
-                            <h5 t-else="" class="col-lg-6">
-                                No Team Members found.
-                            </h5>
                         </div>
                     </div>
-                </div>
-
+                </section>
+                <section class="mg_bottom_block pt-3">
+                    <div class="container">
+                        <div class="row">
+                            <div class="mt-3" t-field="membership_group.website_bottom"/>
+                        </div>
+                    </div>
+                </section>
                 <div class="oe_structure" id="oe_structure_website_membership_group_2"/>
             </div>
         </t>
     </template>
 
-    <template id="membership_group_member">
-        <div class="row">
-            <div class="col-lg-6" t-foreach="members"
-                 t-as="member">
-                <div class="o_web_membership_group_member mb-3 align-items-center d-flex">
-                    <img
-                            class="me-4 rounded-2 border border-secondary"
-                            t-att-src="image_data_uri(member.image_128 or member.avatar_128)"
-                            t-att-alt="member.name or ''"
-                            height="48" width="48"
-
-                    />
-                    <t t-if="member.website_published">
-                        <a t-attf-href="/members/#{slug(member)}">
-                            <span t-esc="member"
-                                  t-options='{"widget": "contact","fields": ["name"]}'/>
-                        </a>
-                    </t>
-                    <t t-else="">
-                        <span t-esc="member"
-                              t-options='{"widget": "contact","fields": ["name"]}'/>
+    <template id="membership_group_member_list">
+        <div class="mg_member_list d-flex flex-wrap">
+            <t t-foreach="members" t-as="member">
+                <div class="mg_member_item p-3 border-bottom-0">
+                    <div class="d-flex align-items-center gap-3">
+                        <img class="rounded-circle shadow-sm object-fit-cover"
+                             t-att-src="image_data_uri(member.image_128 or member.avatar_128)" t-att-alt="member.name"/>
+                        <div class="flex-grow-1 min-w-0 mg_member_name">
+                            <t t-if="member.website_published">
+                                <a t-attf-href="/members/#{slug(member)}" class="text-decoration-none">
+                                    <span class="fw-bold text-dark d-block text-wrap text-break lh-sm" t-esc="member.name"/>
+                                </a>
+                            </t>
+                            <t t-else="">
+                                <span class="fw-bold text-dark d-block text-wrap text-break lh-sm" t-esc="member.name"/>
+                            </t>
+                        </div>
+                        <button t-if="member.website_description"
+                                class="btn btn-sm text-muted text-decoration-none mg_collapse_btn"
+                                type="button"
+                                aria-expanded="false"
+                                t-att-aria-controls="'mg_desc_%s' % member.id">
+                            <i class="fa fa-chevron-down"></i>
+                        </button>
+                    </div>
+                    <t t-if="member.website_description">
+                        <div t-attf-class="mg_member_description overflow-hidden lh-base w-100 mt-2 pt-2 border-top small text-muted d-none"
+                             t-attf-id="mg_desc_{{member.id}}">
+                            <t t-esc="member.website_description"/>
+                        </div>
                     </t>
                 </div>
-            </div>
+            </t>
         </div>
     </template>
-
 </odoo>
diff --git a/website_membership_group/views/snippets/snippet_options.xml b/website_membership_group/views/snippets/snippet_options.xml
new file mode 100644
index 00000000..b403ea56
--- /dev/null
+++ b/website_membership_group/views/snippets/snippet_options.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <template id="membership_group_page_options" inherit_id="website.snippet_options">
+                <xpath expr="." position="inside">
+            <div data-js="MembershipGroupPage" data-selector="body:has(#mg_members_row) #wrap" data-page-options="true">
+                <we-title>Visibility</we-title>
+                <we-checkbox string="Show Group Image" data-select-class="mg_show_image"/>
+                <we-checkbox string="Show Top Content" data-select-class="mg_show_top"/>
+                <we-checkbox string="Show Bottom Content" data-select-class="mg_show_bottom"/>
+                <we-checkbox string="Show Committee" data-select-class="mg_show_committee"/>
+                <we-checkbox string="Show Team" data-select-class="mg_show_team"/>
+            </div>
+
+            <div data-js="MemberLayoutOpts" data-selector="#mg_members_row">
+                <we-title>Member Layout and Descriptions</we-title>
+
+                <we-button-group string="Layout">
+                    <we-button data-select-class="mg_layout_grid" data-name="mg_layout_grid" title="Grid">
+                        <i class="fa fa-th-list"/>
+                    </we-button>
+                    <we-button data-select-class="mg_layout_cards" data-name="mg_layout_cards" title="Cards">
+                        <i class="fa fa-th-large"/>
+                    </we-button>
+                    <we-button data-select-class="mg_layout_avatars" data-name="mg_layout_avatars" title="Avatars">
+                        <i class="fa fa-th"/>
+                    </we-button>
+                </we-button-group>
+                <we-checkbox string="Committee Description" data-select-class="mg_show_committee_desc" data-dependencies="mg_layout_cards,mg_layout_avatars"/>
+                <we-checkbox string="Team Description" data-select-class="mg_show_team_desc" data-dependencies="mg_layout_cards,mg_layout_avatars"/>
+                <we-checkbox string="Collapsible" data-select-class="mg_collapse_desc" data-dependencies="mg_layout_cards,mg_layout_avatars"/>
+            </div>
+            <div data-js="MemberColOpts" data-selector="body:has(#mg_members_row) .mg_team_col, .mg_committee_col"/>
+        </xpath>
+    </template>
+</odoo>

From 64fb20e8e315d0eead6a01d48a945242ce992d9c Mon Sep 17 00:00:00 2001
From: abdel <abdelouzzine@gmail.com>
Date: Thu, 23 Apr 2026 17:09:19 +0200
Subject: [PATCH 2/5] [IMP] website_membership_group: unique editable pages per
 group + demo data + tests

- Each membership group now gets a unique website.page with isolated
  oe_structure IDs, preventing content from leaking across group pages.
- Auto-creates page on first publish; syncs publish status with group.
- Added public ir.rule restricting non-published groups.
- Fixed t-field on website_description for inline editing.
- Removed dead shared template to eliminate DRY violation.
- Added governance demo data (4 groups, 16 members).
- Added controller tests for page creation and access control.
- Improved exception handling in controller (log unexpected errors).
---
 website_membership_group/__manifest__.py      |   5 +
 website_membership_group/controllers/main.py  |  27 ++-
 .../data/governance_demo.xml                  |  19 ++
 .../data/governance_partners_demo.xml         | 183 ++++++++++++++++++
 .../models/membership_group.py                | 124 ++++++++++++
 .../website_membership_group_security.xml     |   9 +
 .../templates/website.xml                     |  96 +--------
 website_membership_group/tests/__init__.py    |   1 +
 .../tests/test_membership_group_page.py       |  39 ++++
 9 files changed, 412 insertions(+), 91 deletions(-)
 create mode 100644 website_membership_group/data/governance_demo.xml
 create mode 100644 website_membership_group/data/governance_partners_demo.xml
 create mode 100644 website_membership_group/security/website_membership_group_security.xml
 create mode 100644 website_membership_group/tests/__init__.py
 create mode 100644 website_membership_group/tests/test_membership_group_page.py

diff --git a/website_membership_group/__manifest__.py b/website_membership_group/__manifest__.py
index 187603fe..d3e8f6e4 100644
--- a/website_membership_group/__manifest__.py
+++ b/website_membership_group/__manifest__.py
@@ -13,10 +13,15 @@
         "website_membership",
     ],
     "data": [
+        "security/website_membership_group_security.xml",
         "views/membership_group_view.xml",
         "templates/website.xml",
         "views/snippets/snippet_options.xml",
     ],
+    "demo": [
+        "data/governance_demo.xml",
+        "data/governance_partners_demo.xml",
+    ],
     "assets": {
         "web.assets_frontend": [
             "website_membership_group/static/src/scss/membership_group.scss",
diff --git a/website_membership_group/controllers/main.py b/website_membership_group/controllers/main.py
index 3a73c91f..e140e97f 100644
--- a/website_membership_group/controllers/main.py
+++ b/website_membership_group/controllers/main.py
@@ -1,6 +1,10 @@
+import logging
+
 from odoo import http
 from odoo.http import request
 
+_logger = logging.getLogger(__name__)
+
 
 class MembershipGroupController(http.Controller):
     def _membership_group_page_render_vals(self, membership_group):
@@ -12,7 +16,7 @@ def _membership_group_page_render_vals(self, membership_group):
 
     @http.route(
         [
-            """/members/group/<model("membership.group","[('is_published', '=', True)]"):membership_group>"""
+            """/members/group/<model("membership.group"):membership_group>"""
         ],
         type="http",
         methods=["GET"],
@@ -29,9 +33,24 @@ def display_membership_group_page(self, membership_group):
         if not membership_group_sudo.is_published and not is_website_designer:
             return request.not_found()
 
-        if membership_group_sudo.page_id:
-            return request.redirect(membership_group_sudo.page_id.url)
+        # Ensure a unique page exists for this group
+        if not membership_group_sudo.page_id:
+            membership_group_sudo._create_membership_page()
+
+        # Sync page publication status with group
+        if membership_group_sudo.page_id.is_published != membership_group_sudo.is_published:
+            membership_group_sudo.page_id.is_published = membership_group_sudo.is_published
 
         vals = self._membership_group_page_render_vals(membership_group_sudo)
 
-        return request.render("website_membership_group.membership_group_page", vals)
+        view_key = membership_group_sudo.page_id.view_id.key
+        if not view_key:
+            return request.not_found()
+
+        try:
+            return request.render(view_key, vals)
+        except ValueError:
+            return request.not_found()
+        except Exception:
+            _logger.exception("Unexpected error rendering membership group page for view %s", view_key)
+            return request.not_found()
diff --git a/website_membership_group/data/governance_demo.xml b/website_membership_group/data/governance_demo.xml
new file mode 100644
index 00000000..e16665b7
--- /dev/null
+++ b/website_membership_group/data/governance_demo.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo noupdate="1">
+    <record id="demo_membership_group_board" model="membership.group">
+        <field name="name">Board of Directors</field>
+        <field name="voting_group" eval="True"/>
+    </record>
+
+    <record id="demo_membership_group_sponsors" model="membership.group">
+        <field name="name">Sponsors</field>
+    </record>
+
+    <record id="demo_membership_group_executive_committee" model="membership.group">
+        <field name="name">Executive Committee</field>
+    </record>
+
+    <record id="demo_membership_group_advisory_board" model="membership.group">
+        <field name="name">Advisory Board</field>
+    </record>
+</odoo>
\ No newline at end of file
diff --git a/website_membership_group/data/governance_partners_demo.xml b/website_membership_group/data/governance_partners_demo.xml
new file mode 100644
index 00000000..15c51af1
--- /dev/null
+++ b/website_membership_group/data/governance_partners_demo.xml
@@ -0,0 +1,183 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo noupdate="1">
+    <!-- Board of Directors Members -->
+    <record id="demo_partner_board_president" model="res.partner">
+        <field name="name">Dr. Sarah Mitchell</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">President of the Board with 15 years of experience in non-profit leadership.</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_board_vice_president" model="res.partner">
+        <field name="name">James Anderson</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Vice President focusing on strategic partnerships and community outreach.</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_board_secretary" model="res.partner">
+        <field name="name">Maria Garcia</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Secretary with expertise in governance and compliance.</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_board_treasurer" model="res.partner">
+        <field name="name">Robert Chen</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Treasurer with 20 years of financial management experience.</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <!-- Board Members (non-committee) -->
+    <record id="demo_partner_board_member_1" model="res.partner">
+        <field name="name">Emily Watson</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Board member specializing in marketing and communications.</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_board_member_2" model="res.partner">
+        <field name="name">Michael Brown</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Board member with background in technology and innovation.</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <!-- Sponsors -->
+    <record id="demo_partner_sponsor_gold" model="res.partner">
+        <field name="name">TechCorp Industries</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Gold Sponsor - Leading technology solutions provider</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'committee', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_sponsor_silver" model="res.partner">
+        <field name="name">Green Energy Solutions</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Silver Sponsor - Sustainable energy advocate</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_sponsor_bronze" model="res.partner">
+        <field name="name">Creative Design Studio</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Bronze Sponsor - Award-winning design agency</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_sponsor_startup" model="res.partner">
+        <field name="name">InnovateLab</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Startup Sponsor - Fostering innovation in the community</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_sponsor_individual" model="res.partner">
+        <field name="name">Patricia Johnson</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Individual Sponsor - Community advocate and supporter</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <!-- Executive Committee -->
+    <record id="demo_partner_exec_chair" model="res.partner">
+        <field name="name">David Thompson</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Executive Chair leading organizational strategy</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_executive_committee'), 'type': 'committee', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_exec_coordinator" model="res.partner">
+        <field name="name">Linda Martinez</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Program Coordinator managing daily operations</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_executive_committee'), 'type': 'committee', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <!-- Advisory Board -->
+    <record id="demo_partner_advisory_1" model="res.partner">
+        <field name="name">Prof. William Turner</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Academic advisor with expertise in public policy</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_advisory_board'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_advisory_2" model="res.partner">
+        <field name="name">Jennifer Lee</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Legal advisor specializing in non-profit law</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_advisory_board'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+
+    <record id="demo_partner_advisory_3" model="res.partner">
+        <field name="name">Christopher Davis</field>
+        <field name="free_member" eval="True"/>
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Financial advisor with expertise in investment management</field>
+        <field name="membership_group_member_ids" eval="[
+            (5, 0),
+            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_advisory_board'), 'type': 'member', 'state': 'current'})
+        ]"/>
+    </record>
+</odoo>
\ No newline at end of file
diff --git a/website_membership_group/models/membership_group.py b/website_membership_group/models/membership_group.py
index ac8c2f8e..194073e1 100644
--- a/website_membership_group/models/membership_group.py
+++ b/website_membership_group/models/membership_group.py
@@ -42,3 +42,127 @@ def _compute_website_url(self):
                 and membership_group.page_id.url
                 or "/members/group/%s" % slug(membership_group)
             )
+
+    def _create_membership_page(self):
+        """Create a unique website.page for this membership group."""
+        self.ensure_one()
+        if self.page_id:
+            return self.page_id
+
+        slug = self.env["ir.http"]._slug
+        page_url = "/members/group/%s" % slug(self)
+        view_key = "website_membership_group.membership_group_page_custom_%s" % self.id
+
+        # Create the view with unique oe_structure IDs
+        view = self.env["ir.ui.view"].create({
+            "name": "Membership Group: %s" % self.name,
+            "key": view_key,
+            "type": "qweb",
+            "arch": self._get_page_arch(),
+        })
+
+        # Create the website page
+        page = self.env["website.page"].create({
+            "url": page_url,
+            "website_published": True,
+            "view_id": view.id,
+        })
+
+        self.page_id = page
+        return page
+
+    def _get_page_arch(self):
+        """Return the page architecture with unique IDs for this group."""
+        return """<t t-call="website.layout">
+            <t t-set="additional_title" t-value="membership_group.name"/>
+            <div id="wrap"
+                 t-att-data-oe-id="membership_group.id"
+                 t-attf-class="mg_wrap o_editable {{membership_group.website_snippet_wrap_classes or 'mg_show_image mg_show_top mg_show_bottom mg_show_committee mg_show_team'}}">
+                <div class="oe_structure" id="oe_structure_mg_%s_1"/>
+                <section class="mg_header_section pt-5 pb-4">
+                    <div class="container" name="membership_page">
+                        <div class="row" name="description_row">
+                            <div class="col-12 text-center mb-4">
+                                <h2 class="fw-bold text-primary" t-field="membership_group.name"/>
+                                <hr class="w-25 mx-auto mt-2 mb-0 mg_divider opacity-50"/>
+                            </div>
+                        </div>
+                        <div class="row align-items-start g-4">
+                            <div class="col-lg-4 text-center mg_image_col">
+                                <div t-field="membership_group.image"
+                                     t-options='{"widget": "image", "class": "img-fluid rounded shadow"}'/>
+                            </div>
+                            <div class="col-lg-8 mg_desc_col">
+                                <div class="mg_top_block" t-field="membership_group.website_top"/>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="mg_members_section py-5">
+                    <div class="container">
+                        <div class="oe_structure" id="oe_structure_mg_%s_2"/>
+                        <div t-attf-class="row g-4 mg_members_row {{membership_group.website_snippet_members_classes or 'mg_layout_grid mg_show_committee_desc mg_show_team_desc'}}"
+                             id="mg_members_row"
+                             t-att-data-oe-id="membership_group.id"
+                        >
+                            <t t-set="current_members"
+                                               t-value="membership_group.membership_group_member_ids.filtered(lambda m: m.state == 'current')"/>
+                            <div t-attf-class="mg_committee_col {{membership_group.website_committee_col_classes or 'col-lg-4'}}">
+                                <div class="card h-100 shadow-sm border-0">
+                                    <div class="card-header border-0 py-3 bg-primary text-white"
+                                         data-name="Committee Header">
+                                        <h5 class="mb-0 fw-semibold">Committee Members</h5>
+                                    </div>
+                                    <div class="card-body p-0">
+                                        <div>
+                                            <t t-set="committee_members"
+                                               t-value="current_members.filtered(lambda m: m.type == 'committee').mapped('partner_id')"/>
+                                            <t t-call="website_membership_group.membership_group_member_list">
+                                                <t t-set="members" t-value="committee_members"/>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div t-attf-class="mg_team_col {{membership_group.website_team_col_classes or 'col-lg-8'}}">
+                                <div class="card h-100 shadow-sm border-0">
+                                    <div class="card-header border-0 py-3 bg-primary text-white"
+                                         data-name="Team Header">
+                                        <h5 class="mb-0 fw-semibold">Team Members</h5>
+                                    </div>
+                                    <div class="card-body p-0">
+                                        <div>
+                                            <t t-set="team_members"
+                                               t-value="current_members.filtered(lambda m: m.type != 'committee').mapped('partner_id')"/>
+                                            <t t-call="website_membership_group.membership_group_member_list">
+                                                <t t-set="members" t-value="team_members"/>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="oe_structure" id="oe_structure_mg_%s_3"/>
+                    </div>
+                </section>
+                <section class="mg_bottom_block pt-3">
+                    <div class="container">
+                        <div class="row">
+                            <div class="mt-3" t-field="membership_group.website_bottom"/>
+                        </div>
+                    </div>
+                </section>
+                <div class="oe_structure" id="oe_structure_mg_%s_4"/>
+            </div>
+        </t>""" % (self.id, self.id, self.id, self.id)
+
+    def write(self, vals):
+        """Auto-create page when published."""
+        res = super().write(vals)
+        if vals.get("is_published"):
+            for group in self:
+                if not group.page_id:
+                    group._create_membership_page()
+        return res
\ No newline at end of file
diff --git a/website_membership_group/security/website_membership_group_security.xml b/website_membership_group/security/website_membership_group_security.xml
new file mode 100644
index 00000000..441b2d63
--- /dev/null
+++ b/website_membership_group/security/website_membership_group_security.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="membership_group_public_rule" model="ir.rule">
+        <field name="name">Membership Group: website published only</field>
+        <field name="model_id" ref="membership_group.model_membership_group"/>
+        <field name="domain_force">[('is_published', '=', True)]</field>
+        <field name="groups" eval="[(4, ref('base.group_public')), (4, ref('base.group_portal'))]"/>
+    </record>
+</odoo>
\ No newline at end of file
diff --git a/website_membership_group/templates/website.xml b/website_membership_group/templates/website.xml
index d90dc334..b39edb13 100644
--- a/website_membership_group/templates/website.xml
+++ b/website_membership_group/templates/website.xml
@@ -1,89 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <odoo>
-    <template id="membership_group_page">
-        <t t-call="website.layout">
-            <t t-set="additional_title" t-value="title"/>
-            <div id="wrap"
-                 t-att-data-oe-id="membership_group.id"
-                 t-attf-class="mg_wrap o_editable {{membership_group.website_snippet_wrap_classes or 'mg_show_image mg_show_top mg_show_bottom mg_show_committee mg_show_team'}}">
-                <div class="oe_structure" id="oe_structure_website_group_1"/>
-                <section class="mg_header_section pt-5 pb-4">
-                    <div class="container" name="membership_page">
-                        <div class="row" name="description_row">
-                            <div class="col-12 text-center mb-4">
-                                <h2 class="fw-bold text-primary" t-field="membership_group.name"/>
-                                <hr class="w-25 mx-auto mt-2 mb-0 mg_divider opacity-50"/>
-                            </div>
-                        </div>
-                        <div class="row align-items-start g-4">
-                            <div class="col-lg-4 text-center mg_image_col">
-                                <div t-field="membership_group.image"
-                                     t-options='{"widget": "image", "class": "img-fluid rounded shadow"}'/>
-                            </div>
-                            <div class="col-lg-8 mg_desc_col">
-                                <div class="mg_top_block" t-field="membership_group.website_top"/>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-                <section class="mg_members_section py-5">
-                    <div class="container">
-                        <div t-attf-class="row g-4 mg_members_row {{membership_group.website_snippet_members_classes or 'mg_layout_grid mg_show_committee_desc mg_show_team_desc'}}"
-                             id="mg_members_row"
-                             t-att-data-oe-id="membership_group.id"
-                        >
-                            <t t-set="current_members"
-                                               t-value="membership_group.membership_group_member_ids.filtered(lambda m: m.state == 'current')"/>
-                            <div t-attf-class="mg_committee_col {{membership_group.website_committee_col_classes or 'col-lg-4'}}">
-                                <div class="card h-100 shadow-sm border-0">
-                                    <div class="card-header border-0 py-3 bg-primary text-white"
-                                         data-name="Committee Header">
-                                        <h5 class="mb-0 fw-semibold">Committee Members</h5>
-                                    </div>
-                                    <div class="card-body p-0">
-                                        <div>
-                                            <t t-set="committee_members"
-                                               t-value="current_members.filtered(lambda m: m.type == 'committee').mapped('partner_id')"/>
-                                            <t t-call="website_membership_group.membership_group_member_list">
-                                                <t t-set="members" t-value="committee_members"/>
-                                            </t>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div t-attf-class="mg_team_col {{membership_group.website_team_col_classes or 'col-lg-8'}}">
-                                <div class="card h-100 shadow-sm border-0">
-                                    <div class="card-header border-0 py-3 bg-primary text-white"
-                                         data-name="Team Header">
-                                        <h5 class="mb-0 fw-semibold">Team Members</h5>
-                                    </div>
-                                    <div class="card-body p-0">
-                                        <div>
-                                            <t t-set="team_members"
-                                               t-value="current_members.filtered(lambda m: m.type != 'committee').mapped('partner_id')"/>
-                                            <t t-call="website_membership_group.membership_group_member_list">
-                                                <t t-set="members" t-value="team_members"/>
-                                            </t>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                <section class="mg_bottom_block pt-3">
-                    <div class="container">
-                        <div class="row">
-                            <div class="mt-3" t-field="membership_group.website_bottom"/>
-                        </div>
-                    </div>
-                </section>
-                <div class="oe_structure" id="oe_structure_website_membership_group_2"/>
-            </div>
-        </t>
-    </template>
+    <!--
+        Note: the main group page template is now generated dynamically
+        per group via MembershipGroup._get_page_arch() so that each group
+        gets unique oe_structure IDs and isolated editable content.
+        This shared template was removed to eliminate the DRY violation.
+    -->
 
     <template id="membership_group_member_list">
         <div class="mg_member_list d-flex flex-wrap">
@@ -106,15 +28,15 @@
                                 class="btn btn-sm text-muted text-decoration-none mg_collapse_btn"
                                 type="button"
                                 aria-expanded="false"
+                                aria-label="Toggle description"
                                 t-att-aria-controls="'mg_desc_%s' % member.id">
                             <i class="fa fa-chevron-down"></i>
                         </button>
                     </div>
                     <t t-if="member.website_description">
                         <div t-attf-class="mg_member_description overflow-hidden lh-base w-100 mt-2 pt-2 border-top small text-muted d-none"
-                             t-attf-id="mg_desc_{{member.id}}">
-                            <t t-esc="member.website_description"/>
-                        </div>
+                             t-attf-id="mg_desc_{{member.id}}"
+                             t-field="member.website_description"/>
                     </t>
                 </div>
             </t>
diff --git a/website_membership_group/tests/__init__.py b/website_membership_group/tests/__init__.py
new file mode 100644
index 00000000..159d17e8
--- /dev/null
+++ b/website_membership_group/tests/__init__.py
@@ -0,0 +1 @@
+from . import test_membership_group_page
diff --git a/website_membership_group/tests/test_membership_group_page.py b/website_membership_group/tests/test_membership_group_page.py
new file mode 100644
index 00000000..43317592
--- /dev/null
+++ b/website_membership_group/tests/test_membership_group_page.py
@@ -0,0 +1,39 @@
+from odoo.tests import HttpCase, tagged
+
+
+@tagged("post_install", "-at_install")
+class TestMembershipGroupPage(HttpCase):
+    """Tests for the membership group unique page creation."""
+
+    @classmethod
+    def setUpClass(cls):
+        super().setUpClass()
+        cls.group = cls.env["membership.group"].create({
+            "name": "Page Test Group",
+        })
+
+    def test_page_created_on_publish(self):
+        """Publishing a group auto-creates a unique website.page."""
+        self.assertFalse(self.group.page_id)
+        self.group.is_published = True
+        self.assertTrue(self.group.page_id)
+        self.assertTrue(self.group.page_id.is_published)
+
+    def test_page_not_accessible_when_unpublished(self):
+        """Unpublished groups return 404 for public users."""
+        self.group.is_published = True
+        self.group.is_published = False
+        response = self.url_open(f"/members/group/{self.group.id}-page-test-group")
+        self.assertEqual(response.status_code, 404)
+
+    def test_page_is_unique_per_group(self):
+        """Each group gets its own page and view."""
+        self.group.write({"is_published": True})
+        group2 = self.env["membership.group"].create({
+            "name": "Another Group",
+        })
+        group2.write({"is_published": True})
+        self.assertTrue(self.group.page_id)
+        self.assertTrue(group2.page_id)
+        self.assertNotEqual(self.group.page_id, group2.page_id)
+        self.assertNotEqual(self.group.page_id.view_id, group2.page_id.view_id)

From a0b76f426d00f47fe5fff975a4636fbdaeb0d9dd Mon Sep 17 00:00:00 2001
From: abdel <abdelouzzine@gmail.com>
Date: Thu, 23 Apr 2026 17:09:31 +0200
Subject: [PATCH 3/5] [ADD] website_membership_snippet: reusable Members
 website snippet

- New snippet allowing editors to display membership group members
  on any website page with selectable group and layout (grid/list/avatars).
- Dynamic options panel populated from published groups via JSON endpoint.
- Frontend widget loads members via JSON-RPC with three layout modes.
- Added controller tests for group and member endpoints.
- Uses existing s_company_team.svg as snippet thumbnail.
---
 website_membership_snippet/__init__.py        |  4 +
 website_membership_snippet/__manifest__.py    | 25 +++++
 .../controllers/__init__.py                   |  1 +
 .../controllers/main.py                       | 35 +++++++
 .../snippets_thumbs/s_dynamic_member_list.svg | 12 +++
 .../static/src/js/membership_snippet.js       | 99 +++++++++++++++++++
 .../src/js/membership_snippet_options.js      | 50 ++++++++++
 website_membership_snippet/tests/__init__.py  |  1 +
 .../tests/test_membership_snippet.py          | 74 ++++++++++++++
 .../views/snippets/snippets.xml               | 42 ++++++++
 10 files changed, 343 insertions(+)
 create mode 100644 website_membership_snippet/__init__.py
 create mode 100644 website_membership_snippet/__manifest__.py
 create mode 100644 website_membership_snippet/controllers/__init__.py
 create mode 100644 website_membership_snippet/controllers/main.py
 create mode 100644 website_membership_snippet/static/src/img/snippets_thumbs/s_dynamic_member_list.svg
 create mode 100644 website_membership_snippet/static/src/js/membership_snippet.js
 create mode 100644 website_membership_snippet/static/src/js/membership_snippet_options.js
 create mode 100644 website_membership_snippet/tests/__init__.py
 create mode 100644 website_membership_snippet/tests/test_membership_snippet.py
 create mode 100644 website_membership_snippet/views/snippets/snippets.xml

diff --git a/website_membership_snippet/__init__.py b/website_membership_snippet/__init__.py
new file mode 100644
index 00000000..e033df50
--- /dev/null
+++ b/website_membership_snippet/__init__.py
@@ -0,0 +1,4 @@
+# Copyright 2026 Onestein (<https://www.onestein.nl>)
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+from . import controllers
\ No newline at end of file
diff --git a/website_membership_snippet/__manifest__.py b/website_membership_snippet/__manifest__.py
new file mode 100644
index 00000000..5dc32b79
--- /dev/null
+++ b/website_membership_snippet/__manifest__.py
@@ -0,0 +1,25 @@
+# Copyright 2026 Onestein (<https://www.onestein.nl>)
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+{
+    "name": "Website Membership Snippet",
+    "category": "Membership",
+    "version": "18.0.1.0.0",
+    "author": "Onestein",
+    "license": "AGPL-3",
+    "website": "https://www.onestein.nl",
+    "depends": [
+        "website_membership_group",
+    ],
+    "data": [
+        "views/snippets/snippets.xml",
+    ],
+    "assets": {
+        "web.assets_frontend": [
+            "website_membership_snippet/static/src/js/membership_snippet.js",
+        ],
+        "website.assets_wysiwyg": [
+            "website_membership_snippet/static/src/js/membership_snippet_options.js",
+        ],
+    },
+}
\ No newline at end of file
diff --git a/website_membership_snippet/controllers/__init__.py b/website_membership_snippet/controllers/__init__.py
new file mode 100644
index 00000000..deec4a8b
--- /dev/null
+++ b/website_membership_snippet/controllers/__init__.py
@@ -0,0 +1 @@
+from . import main
\ No newline at end of file
diff --git a/website_membership_snippet/controllers/main.py b/website_membership_snippet/controllers/main.py
new file mode 100644
index 00000000..c084c636
--- /dev/null
+++ b/website_membership_snippet/controllers/main.py
@@ -0,0 +1,35 @@
+from odoo import http
+from odoo.http import request
+
+
+class MembershipSnippetController(http.Controller):
+    @http.route("/membership/snippet/groups", type="json", auth="public", website=True)
+    def snippet_groups(self):
+        groups = request.env["membership.group"].sudo().search([
+            ("is_published", "=", True),
+        ], order="name")
+        return [{"id": g.id, "name": g.name} for g in groups]
+
+    @http.route("/membership/snippet/members", type="json", auth="public", website=True)
+    def snippet_members(self, group_id=None):
+        if not group_id:
+            return []
+        
+        group = request.env["membership.group"].sudo().browse(int(group_id))
+        if not group.exists():
+            return []
+        
+        members = group.membership_group_member_ids.filtered(
+            lambda m: m.state == "current"
+        ).mapped("partner_id")
+        
+        result = []
+        for member in members.filtered("website_published"):
+            result.append({
+                "id": member.id,
+                "name": member.name,
+                "description": member.website_description or "",
+                "image": f"/web/image/res.partner/{member.id}/image_128" if member.image_128 else "",
+                "url": f"/members/{request.env['ir.http']._slug(member)}" if member.website_published else "",
+            })
+        return result
diff --git a/website_membership_snippet/static/src/img/snippets_thumbs/s_dynamic_member_list.svg b/website_membership_snippet/static/src/img/snippets_thumbs/s_dynamic_member_list.svg
new file mode 100644
index 00000000..7d7d1bd9
--- /dev/null
+++ b/website_membership_snippet/static/src/img/snippets_thumbs/s_dynamic_member_list.svg
@@ -0,0 +1,12 @@
+<svg width="150" height="100" viewBox="0 0 150 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="150" height="100" fill="#007bff"/>
+  <circle cx="40" cy="30" r="15" fill="white"/>
+  <rect x="65" y="20" width="60" height="8" rx="2" fill="white"/>
+  <rect x="65" y="32" width="40" height="5" rx="1" fill="white" opacity="0.7"/>
+  <circle cx="40" cy="60" r="15" fill="white"/>
+  <rect x="65" y="50" width="60" height="8" rx="2" fill="white"/>
+  <rect x="65" y="62" width="40" height="5" rx="1" fill="white" opacity="0.7"/>
+  <circle cx="40" cy="90" r="15" fill="white"/>
+  <rect x="65" y="80" width="60" height="8" rx="2" fill="white"/>
+  <rect x="65" y="92" width="40" height="5" rx="1" fill="white" opacity="0.7"/>
+</svg>
\ No newline at end of file
diff --git a/website_membership_snippet/static/src/js/membership_snippet.js b/website_membership_snippet/static/src/js/membership_snippet.js
new file mode 100644
index 00000000..98421315
--- /dev/null
+++ b/website_membership_snippet/static/src/js/membership_snippet.js
@@ -0,0 +1,99 @@
+/** @odoo-module **/
+
+import publicWidget from "@web/legacy/js/public/public_widget";
+import { rpc } from "@web/core/network/rpc";
+
+publicWidget.registry.MembershipSnippet = publicWidget.Widget.extend({
+    selector: ".s_membership_members",
+    
+    async start() {
+        await this._super(...arguments);
+        const groupId = parseInt(this.el.dataset.groupId, 10);
+        if (groupId) {
+            await this._loadMembers(groupId);
+        }
+    },
+    
+    async _loadMembers(groupId) {
+        try {
+            const members = await rpc("/membership/snippet/members", {
+                group_id: groupId,
+            });
+            this._renderMembers(members);
+        } catch (error) {
+            console.error("Failed to load members:", error);
+        }
+    },
+    
+    _renderMembers(members) {
+        const container = this.el.querySelector(".s_membership_members_container");
+        if (!container || !members.length) {
+            this.el.classList.add("o_snippet_empty");
+            return;
+        }
+        
+        const layout = this.el.dataset.layout || "grid";
+        let html = "";
+        
+        if (layout === "list") {
+            html = this._renderList(members);
+        } else if (layout === "avatars") {
+            html = this._renderAvatars(members);
+        } else {
+            html = this._renderGrid(members);
+        }
+        
+        container.innerHTML = html;
+        this.el.classList.remove("o_snippet_empty");
+    },
+    
+    _renderGrid(members) {
+        return `<div class="row g-3">${members.map(m => `
+            <div class="col-md-4 col-lg-3">
+                <div class="card h-100 shadow-sm">
+                    <div class="card-body text-center">
+                        <img class="rounded-circle mb-3" 
+                             style="width: 80px; height: 80px; object-fit: cover;"
+                             src="${m.image || "/web/static/img/user_placeholder.jpg"}" 
+                             alt="${m.name}"/>
+                        <h5 class="card-title">${m.name}</h5>
+                        ${m.description ? `<p class="card-text text-muted small">${m.description}</p>` : ""}
+                        ${m.url ? `<a href="${m.url}" class="btn btn-sm btn-primary">View Profile</a>` : ""}
+                    </div>
+                </div>
+            </div>
+        `).join("")}</div>`;
+    },
+    
+    _renderList(members) {
+        return `<div class="row">${members.map(m => `
+            <div class="col-12 mb-3">
+                <div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
+                    <img class="rounded-circle" 
+                         style="width: 60px; height: 60px; object-fit: cover;"
+                         src="${m.image || "/web/static/img/user_placeholder.jpg"}" 
+                         alt="${m.name}"/>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-0">${m.name}</h6>
+                        ${m.description ? `<small class="text-muted">${m.description}</small>` : ""}
+                    </div>
+                    ${m.url ? `<a href="${m.url}" class="btn btn-sm btn-outline-primary">View</a>` : ""}
+                </div>
+            </div>
+        `).join("")}</div>`;
+    },
+    
+    _renderAvatars(members) {
+        return `<div class="d-flex flex-wrap justify-content-center gap-3">${members.map(m => `
+            <div class="text-center p-2">
+                <img class="rounded-circle mb-2" 
+                     style="width: 50px; height: 50px; object-fit: cover;"
+                     src="${m.image || "/web/static/img/user_placeholder.jpg"}" 
+                     alt="${m.name}"/>
+                <p class="small mb-0">${m.name}</p>
+            </div>
+        `).join("")}</div>`;
+    },
+});
+
+export default publicWidget.registry.MembershipSnippet;
\ No newline at end of file
diff --git a/website_membership_snippet/static/src/js/membership_snippet_options.js b/website_membership_snippet/static/src/js/membership_snippet_options.js
new file mode 100644
index 00000000..5101d424
--- /dev/null
+++ b/website_membership_snippet/static/src/js/membership_snippet_options.js
@@ -0,0 +1,50 @@
+/** @odoo-module **/
+
+import options from "@web_editor/js/editor/snippets.options";
+import { rpc } from "@web/core/network/rpc";
+
+options.registry.MembershipSnippetOptions = options.Class.extend({
+    /**
+     * @override
+     */
+    async _renderCustomXML(uiFragment) {
+        await this._super(...arguments);
+        const groups = await this._fetchGroups();
+        this._renderGroupSelector(uiFragment, groups);
+    },
+
+    /**
+     * @private
+     */
+    async _fetchGroups() {
+        try {
+            return await rpc("/membership/snippet/groups");
+        } catch (error) {
+            console.error("Failed to fetch groups:", error);
+            return [];
+        }
+    },
+
+    /**
+     * @private
+     */
+    _renderGroupSelector(uiFragment, groups) {
+        const selectEl = uiFragment.querySelector('[data-name="group_id_opt"]');
+        if (!selectEl || !groups.length) {
+            return;
+        }
+
+        // Remove existing buttons
+        selectEl.querySelectorAll('we-button').forEach(btn => btn.remove());
+
+        // Add group options directly to we-select (same pattern as dynamic snippets)
+        groups.forEach(group => {
+            const button = document.createElement('we-button');
+            button.dataset.selectDataAttribute = group.id;
+            button.textContent = group.name;
+            selectEl.appendChild(button);
+        });
+    },
+});
+
+export default options.registry.MembershipSnippetOptions;
\ No newline at end of file
diff --git a/website_membership_snippet/tests/__init__.py b/website_membership_snippet/tests/__init__.py
new file mode 100644
index 00000000..48936e34
--- /dev/null
+++ b/website_membership_snippet/tests/__init__.py
@@ -0,0 +1 @@
+from . import test_membership_snippet
diff --git a/website_membership_snippet/tests/test_membership_snippet.py b/website_membership_snippet/tests/test_membership_snippet.py
new file mode 100644
index 00000000..82ead82f
--- /dev/null
+++ b/website_membership_snippet/tests/test_membership_snippet.py
@@ -0,0 +1,74 @@
+from odoo.tests import HttpCase, tagged
+
+
+@tagged("post_install", "-at_install")
+class TestMembershipSnippet(HttpCase):
+    """Tests for the website membership snippet endpoints."""
+
+    @classmethod
+    def setUpClass(cls):
+        super().setUpClass()
+        cls.group = cls.env["membership.group"].create({
+            "name": "Test Group",
+            "is_published": True,
+        })
+        cls.partner = cls.env["res.partner"].create({
+            "name": "Test Member",
+            "website_published": True,
+        })
+        cls.env["membership.group.member"].create({
+            "group_id": cls.group.id,
+            "partner_id": cls.partner.id,
+            "type": "committee",
+            "state": "current",
+        })
+
+    def test_snippet_groups_endpoint(self):
+        """The /membership/snippet/groups endpoint returns published groups."""
+        result = self.url_open(
+            "/membership/snippet/groups",
+            data='{"jsonrpc": "2.0", "method": "call", "params": {}, "id": 1}',
+            headers={"Content-Type": "application/json"},
+        )
+        self.assertEqual(result.status_code, 200)
+        data = result.json()
+        self.assertIn("result", data)
+        group_names = [g["name"] for g in data["result"]]
+        self.assertIn("Test Group", group_names)
+
+    def test_snippet_members_endpoint(self):
+        """The /membership/snippet/members endpoint returns group members."""
+        result = self.url_open(
+            "/membership/snippet/members",
+            data='{"jsonrpc": "2.0", "method": "call", "params": {"group_id": %s}, "id": 1}' % self.group.id,
+            headers={"Content-Type": "application/json"},
+        )
+        self.assertEqual(result.status_code, 200)
+        data = result.json()
+        self.assertIn("result", data)
+        member_names = [m["name"] for m in data["result"]]
+        self.assertIn("Test Member", member_names)
+
+    def test_snippet_members_unpublished_group(self):
+        """Unpublished groups are not returned by the groups endpoint."""
+        self.group.is_published = False
+        result = self.url_open(
+            "/membership/snippet/groups",
+            data='{"jsonrpc": "2.0", "method": "call", "params": {}, "id": 1}',
+            headers={"Content-Type": "application/json"},
+        )
+        data = result.json()
+        group_names = [g["name"] for g in data["result"]]
+        self.assertNotIn("Test Group", group_names)
+
+    def test_snippet_members_unpublished_partner(self):
+        """Unpublished partners are not included in member results."""
+        self.partner.website_published = False
+        result = self.url_open(
+            "/membership/snippet/members",
+            data='{"jsonrpc": "2.0", "method": "call", "params": {"group_id": %s}, "id": 1}' % self.group.id,
+            headers={"Content-Type": "application/json"},
+        )
+        data = result.json()
+        member_names = [m["name"] for m in data["result"]]
+        self.assertNotIn("Test Member", member_names)
diff --git a/website_membership_snippet/views/snippets/snippets.xml b/website_membership_snippet/views/snippets/snippets.xml
new file mode 100644
index 00000000..ab9733b8
--- /dev/null
+++ b/website_membership_snippet/views/snippets/snippets.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <!-- Snippet Template -->
+    <template id="s_membership_members" name="Members">
+        <section class="s_membership_members pt32 pb32" data-group-id="">
+            <div class="container">
+                <div class="row s_nb_column_fixed">
+                    <div class="col-12">
+                        <h3 class="mb-3">Members</h3>
+                        <div class="s_membership_members_container">
+                            <div class="text-muted">Select a membership group in the snippet options.</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+
+    <!-- Register Snippet in Panel -->
+    <template id="snippets" inherit_id="website.snippets">
+        <xpath expr="//t[@id='installed_snippets_hook']" position="after">
+            <t t-snippet="website_membership_snippet.s_membership_members" 
+               string="Members" 
+               t-thumbnail="/website/static/src/img/snippets_thumbs/s_company_team.svg"/>
+        </xpath>
+    </template>
+
+    <!-- Snippet Options -->
+    <template id="s_membership_members_options" inherit_id="website.snippet_options">
+        <xpath expr="." position="inside">
+            <div data-js="MembershipSnippetOptions" data-selector=".s_membership_members">
+                <we-select string="Membership Group" data-name="group_id_opt" data-attribute-name="groupId" data-no-preview="true">
+                </we-select>
+                <we-select string="Layout" data-name="layout_opt" data-attribute-name="layout" data-no-preview="true">
+                    <we-button data-select-data-attribute="grid" title="Grid">Grid</we-button>
+                    <we-button data-select-data-attribute="list" title="List">List</we-button>
+                    <we-button data-select-data-attribute="avatars" title="Avatars">Avatars</we-button>
+                </we-select>
+            </div>
+        </xpath>
+    </template>
+</odoo>
\ No newline at end of file

From 9958ed2ea8132814625412ad0e8737c240b131c2 Mon Sep 17 00:00:00 2001
From: abdel <abdelouzzine@gmail.com>
Date: Fri, 24 Apr 2026 16:27:09 +0200
Subject: [PATCH 4/5] [IMP] website_membership_group: address PR review
 feedback + e2e tests

Fixes from code review:
- Restored domain filter in route for editor URL completion
- Moved page creation and publish sync from controller to model write()
- Moved demo data to base membership_group module
- Created QWeb template membership_group_page_base (eliminated inline string)
- Sync page publish status on both publish and unpublish transitions
- Removed mg_wrap from default to avoid class duplication
- Filter out structural mg_*_col classes in MemberColOpts
- Added e2e test suite with Playwright
---
 .../data/membership_group_demo.xml            |  17 ++
 membership_group/data/res_partner_demo.xml    | 148 +++++++++++
 website_membership_group/__manifest__.py      |   3 +-
 website_membership_group/controllers/main.py  |  10 +-
 .../data/governance_demo.xml                  |  19 --
 .../data/governance_partners_demo.xml         | 183 -------------
 .../demo/website_membership_group_demo.xml    | 100 +++++++
 .../models/membership_group.py                |  98 +------
 .../src/js/membership_group_options.esm.js    |   4 +-
 .../templates/website.xml                     |  92 ++++++-
 .../tests/test_e2e_membership.py              | 248 ++++++++++++++++++
 .../tests/test_membership_group_page.py       |   7 +
 website_membership_snippet/__manifest__.py    |   4 +-
 .../controllers/main.py                       |  24 --
 .../data/website_snippet_filter_data.xml      |  22 ++
 .../snippets_thumbs/s_dynamic_member_list.svg |  12 -
 .../static/src/js/membership_snippet.js       | 121 +++------
 .../src/js/membership_snippet_options.js      |  81 ++++--
 .../tests/test_membership_snippet.py          | 125 +++++----
 .../views/snippets/dynamic_templates.xml      |  59 +++++
 .../views/snippets/snippets.xml               |  54 ++--
 21 files changed, 890 insertions(+), 541 deletions(-)
 delete mode 100644 website_membership_group/data/governance_demo.xml
 delete mode 100644 website_membership_group/data/governance_partners_demo.xml
 create mode 100644 website_membership_group/demo/website_membership_group_demo.xml
 create mode 100644 website_membership_group/tests/test_e2e_membership.py
 create mode 100644 website_membership_snippet/data/website_snippet_filter_data.xml
 delete mode 100644 website_membership_snippet/static/src/img/snippets_thumbs/s_dynamic_member_list.svg
 create mode 100644 website_membership_snippet/views/snippets/dynamic_templates.xml

diff --git a/membership_group/data/membership_group_demo.xml b/membership_group/data/membership_group_demo.xml
index e4c2c83c..41466e33 100644
--- a/membership_group/data/membership_group_demo.xml
+++ b/membership_group/data/membership_group_demo.xml
@@ -22,4 +22,21 @@
             <field name="voting_group" eval="True" />
         </record>
 
+        <record id="demo_membership_group_board" model="membership.group">
+            <field name="name">Board of Directors</field>
+            <field name="voting_group" eval="True"/>
+        </record>
+
+        <record id="demo_membership_group_sponsors" model="membership.group">
+            <field name="name">Sponsors</field>
+        </record>
+
+        <record id="demo_membership_group_executive_committee" model="membership.group">
+            <field name="name">Executive Committee</field>
+        </record>
+
+        <record id="demo_membership_group_advisory_board" model="membership.group">
+            <field name="name">Advisory Board</field>
+        </record>
+
 </odoo>
diff --git a/membership_group/data/res_partner_demo.xml b/membership_group/data/res_partner_demo.xml
index 7cc2697f..7f88fa32 100644
--- a/membership_group/data/res_partner_demo.xml
+++ b/membership_group/data/res_partner_demo.xml
@@ -66,5 +66,153 @@
                 ]"
             />
         </record>
+
+        <!-- Board of Directors Members -->
+        <record id="demo_partner_board_president" model="res.partner">
+            <field name="name">Dr. Sarah Mitchell</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_board_vice_president" model="res.partner">
+            <field name="name">James Anderson</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_board_secretary" model="res.partner">
+            <field name="name">Maria Garcia</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_board_treasurer" model="res.partner">
+            <field name="name">Robert Chen</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_board_member_1" model="res.partner">
+            <field name="name">Emily Watson</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_board'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_board_member_2" model="res.partner">
+            <field name="name">Michael Brown</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_board'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <!-- Sponsors -->
+        <record id="demo_partner_sponsor_gold" model="res.partner">
+            <field name="name">TechCorp Industries</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_sponsors'), 'type': 'committee', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_sponsor_silver" model="res.partner">
+            <field name="name">Green Energy Solutions</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_sponsors'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_sponsor_bronze" model="res.partner">
+            <field name="name">Creative Design Studio</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_sponsors'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_sponsor_startup" model="res.partner">
+            <field name="name">InnovateLab</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_sponsors'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_sponsor_individual" model="res.partner">
+            <field name="name">Patricia Johnson</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_sponsors'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <!-- Executive Committee -->
+        <record id="demo_partner_exec_chair" model="res.partner">
+            <field name="name">David Thompson</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_executive_committee'), 'type': 'committee', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_exec_coordinator" model="res.partner">
+            <field name="name">Linda Martinez</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_executive_committee'), 'type': 'committee', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <!-- Advisory Board -->
+        <record id="demo_partner_advisory_1" model="res.partner">
+            <field name="name">Prof. William Turner</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_advisory_board'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_advisory_2" model="res.partner">
+            <field name="name">Jennifer Lee</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_advisory_board'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
+
+        <record id="demo_partner_advisory_3" model="res.partner">
+            <field name="name">Christopher Davis</field>
+            <field name="free_member" eval="True"/>
+            <field name="membership_group_member_ids" eval="[
+                (5, 0),
+                (0, 0, {'group_id': ref('membership_group.demo_membership_group_advisory_board'), 'type': 'collaborator', 'state': 'current'})
+            ]"/>
+        </record>
         </data>
 </odoo>
diff --git a/website_membership_group/__manifest__.py b/website_membership_group/__manifest__.py
index d3e8f6e4..64216693 100644
--- a/website_membership_group/__manifest__.py
+++ b/website_membership_group/__manifest__.py
@@ -19,8 +19,7 @@
         "views/snippets/snippet_options.xml",
     ],
     "demo": [
-        "data/governance_demo.xml",
-        "data/governance_partners_demo.xml",
+        "demo/website_membership_group_demo.xml",
     ],
     "assets": {
         "web.assets_frontend": [
diff --git a/website_membership_group/controllers/main.py b/website_membership_group/controllers/main.py
index e140e97f..aa2f32a2 100644
--- a/website_membership_group/controllers/main.py
+++ b/website_membership_group/controllers/main.py
@@ -16,7 +16,7 @@ def _membership_group_page_render_vals(self, membership_group):
 
     @http.route(
         [
-            """/members/group/<model("membership.group"):membership_group>"""
+            """/members/group/<model("membership.group","[('is_published', '=', True)]"):membership_group>"""
         ],
         type="http",
         methods=["GET"],
@@ -33,14 +33,6 @@ def display_membership_group_page(self, membership_group):
         if not membership_group_sudo.is_published and not is_website_designer:
             return request.not_found()
 
-        # Ensure a unique page exists for this group
-        if not membership_group_sudo.page_id:
-            membership_group_sudo._create_membership_page()
-
-        # Sync page publication status with group
-        if membership_group_sudo.page_id.is_published != membership_group_sudo.is_published:
-            membership_group_sudo.page_id.is_published = membership_group_sudo.is_published
-
         vals = self._membership_group_page_render_vals(membership_group_sudo)
 
         view_key = membership_group_sudo.page_id.view_id.key
diff --git a/website_membership_group/data/governance_demo.xml b/website_membership_group/data/governance_demo.xml
deleted file mode 100644
index e16665b7..00000000
--- a/website_membership_group/data/governance_demo.xml
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo noupdate="1">
-    <record id="demo_membership_group_board" model="membership.group">
-        <field name="name">Board of Directors</field>
-        <field name="voting_group" eval="True"/>
-    </record>
-
-    <record id="demo_membership_group_sponsors" model="membership.group">
-        <field name="name">Sponsors</field>
-    </record>
-
-    <record id="demo_membership_group_executive_committee" model="membership.group">
-        <field name="name">Executive Committee</field>
-    </record>
-
-    <record id="demo_membership_group_advisory_board" model="membership.group">
-        <field name="name">Advisory Board</field>
-    </record>
-</odoo>
\ No newline at end of file
diff --git a/website_membership_group/data/governance_partners_demo.xml b/website_membership_group/data/governance_partners_demo.xml
deleted file mode 100644
index 15c51af1..00000000
--- a/website_membership_group/data/governance_partners_demo.xml
+++ /dev/null
@@ -1,183 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo noupdate="1">
-    <!-- Board of Directors Members -->
-    <record id="demo_partner_board_president" model="res.partner">
-        <field name="name">Dr. Sarah Mitchell</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">President of the Board with 15 years of experience in non-profit leadership.</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_board_vice_president" model="res.partner">
-        <field name="name">James Anderson</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Vice President focusing on strategic partnerships and community outreach.</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_board_secretary" model="res.partner">
-        <field name="name">Maria Garcia</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Secretary with expertise in governance and compliance.</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_board_treasurer" model="res.partner">
-        <field name="name">Robert Chen</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Treasurer with 20 years of financial management experience.</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'committee', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <!-- Board Members (non-committee) -->
-    <record id="demo_partner_board_member_1" model="res.partner">
-        <field name="name">Emily Watson</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Board member specializing in marketing and communications.</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_board_member_2" model="res.partner">
-        <field name="name">Michael Brown</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Board member with background in technology and innovation.</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_board'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <!-- Sponsors -->
-    <record id="demo_partner_sponsor_gold" model="res.partner">
-        <field name="name">TechCorp Industries</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Gold Sponsor - Leading technology solutions provider</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'committee', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_sponsor_silver" model="res.partner">
-        <field name="name">Green Energy Solutions</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Silver Sponsor - Sustainable energy advocate</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_sponsor_bronze" model="res.partner">
-        <field name="name">Creative Design Studio</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Bronze Sponsor - Award-winning design agency</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_sponsor_startup" model="res.partner">
-        <field name="name">InnovateLab</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Startup Sponsor - Fostering innovation in the community</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_sponsor_individual" model="res.partner">
-        <field name="name">Patricia Johnson</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Individual Sponsor - Community advocate and supporter</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_sponsors'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <!-- Executive Committee -->
-    <record id="demo_partner_exec_chair" model="res.partner">
-        <field name="name">David Thompson</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Executive Chair leading organizational strategy</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_executive_committee'), 'type': 'committee', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_exec_coordinator" model="res.partner">
-        <field name="name">Linda Martinez</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Program Coordinator managing daily operations</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_executive_committee'), 'type': 'committee', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <!-- Advisory Board -->
-    <record id="demo_partner_advisory_1" model="res.partner">
-        <field name="name">Prof. William Turner</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Academic advisor with expertise in public policy</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_advisory_board'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_advisory_2" model="res.partner">
-        <field name="name">Jennifer Lee</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Legal advisor specializing in non-profit law</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_advisory_board'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-
-    <record id="demo_partner_advisory_3" model="res.partner">
-        <field name="name">Christopher Davis</field>
-        <field name="free_member" eval="True"/>
-        <field name="website_published" eval="True"/>
-        <field name="website_description">Financial advisor with expertise in investment management</field>
-        <field name="membership_group_member_ids" eval="[
-            (5, 0),
-            (0, 0, {'group_id': ref('website_membership_group.demo_membership_group_advisory_board'), 'type': 'member', 'state': 'current'})
-        ]"/>
-    </record>
-</odoo>
\ No newline at end of file
diff --git a/website_membership_group/demo/website_membership_group_demo.xml b/website_membership_group/demo/website_membership_group_demo.xml
new file mode 100644
index 00000000..c47e5630
--- /dev/null
+++ b/website_membership_group/demo/website_membership_group_demo.xml
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo noupdate="1">
+    <!-- Set website-specific fields on demo groups -->
+    <record id="membership_group.demo_membership_group_board" model="membership.group">
+        <field name="is_published" eval="True"/>
+    </record>
+
+    <record id="membership_group.demo_membership_group_sponsors" model="membership.group">
+        <field name="is_published" eval="True"/>
+    </record>
+
+    <record id="membership_group.demo_membership_group_executive_committee" model="membership.group">
+        <field name="is_published" eval="True"/>
+    </record>
+
+    <record id="membership_group.demo_membership_group_advisory_board" model="membership.group">
+        <field name="is_published" eval="True"/>
+    </record>
+
+    <!-- Set website-specific fields on demo partners -->
+    <record id="membership_group.demo_partner_board_president" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">President of the Board with 15 years of experience in non-profit leadership.</field>
+    </record>
+
+    <record id="membership_group.demo_partner_board_vice_president" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Vice President focusing on strategic partnerships and community outreach.</field>
+    </record>
+
+    <record id="membership_group.demo_partner_board_secretary" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Secretary with expertise in governance and compliance.</field>
+    </record>
+
+    <record id="membership_group.demo_partner_board_treasurer" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Treasurer with 20 years of financial management experience.</field>
+    </record>
+
+    <record id="membership_group.demo_partner_board_member_1" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Board member specializing in marketing and communications.</field>
+    </record>
+
+    <record id="membership_group.demo_partner_board_member_2" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Board member with background in technology and innovation.</field>
+    </record>
+
+    <record id="membership_group.demo_partner_sponsor_gold" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Gold Sponsor - Leading technology solutions provider</field>
+    </record>
+
+    <record id="membership_group.demo_partner_sponsor_silver" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Silver Sponsor - Sustainable energy advocate</field>
+    </record>
+
+    <record id="membership_group.demo_partner_sponsor_bronze" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Bronze Sponsor - Award-winning design agency</field>
+    </record>
+
+    <record id="membership_group.demo_partner_sponsor_startup" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Startup Sponsor - Fostering innovation in the community</field>
+    </record>
+
+    <record id="membership_group.demo_partner_sponsor_individual" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Individual Sponsor - Community advocate and supporter</field>
+    </record>
+
+    <record id="membership_group.demo_partner_exec_chair" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Executive Chair leading organizational strategy</field>
+    </record>
+
+    <record id="membership_group.demo_partner_exec_coordinator" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Program Coordinator managing daily operations</field>
+    </record>
+
+    <record id="membership_group.demo_partner_advisory_1" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Academic advisor with expertise in public policy</field>
+    </record>
+
+    <record id="membership_group.demo_partner_advisory_2" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Legal advisor specializing in non-profit law</field>
+    </record>
+
+    <record id="membership_group.demo_partner_advisory_3" model="res.partner">
+        <field name="website_published" eval="True"/>
+        <field name="website_description">Financial advisor with expertise in investment management</field>
+    </record>
+</odoo>
diff --git a/website_membership_group/models/membership_group.py b/website_membership_group/models/membership_group.py
index 194073e1..ca32ff11 100644
--- a/website_membership_group/models/membership_group.py
+++ b/website_membership_group/models/membership_group.py
@@ -17,7 +17,7 @@ class MembershipGroup(models.Model):
     website_url = fields.Char(compute="_compute_website_url", store=True)
     website_snippet_wrap_classes = fields.Char(
         string="Wrap Classes",
-        default="mg_wrap mg_show_image mg_show_top mg_show_bottom mg_show_committee mg_show_team",
+        default="mg_show_image mg_show_top mg_show_bottom mg_show_committee mg_show_team",
         help="Classes for the #wrap element (visibility options)",
     )
     website_snippet_members_classes = fields.Char(
@@ -72,97 +72,17 @@ def _create_membership_page(self):
         return page
 
     def _get_page_arch(self):
-        """Return the page architecture with unique IDs for this group."""
-        return """<t t-call="website.layout">
-            <t t-set="additional_title" t-value="membership_group.name"/>
-            <div id="wrap"
-                 t-att-data-oe-id="membership_group.id"
-                 t-attf-class="mg_wrap o_editable {{membership_group.website_snippet_wrap_classes or 'mg_show_image mg_show_top mg_show_bottom mg_show_committee mg_show_team'}}">
-                <div class="oe_structure" id="oe_structure_mg_%s_1"/>
-                <section class="mg_header_section pt-5 pb-4">
-                    <div class="container" name="membership_page">
-                        <div class="row" name="description_row">
-                            <div class="col-12 text-center mb-4">
-                                <h2 class="fw-bold text-primary" t-field="membership_group.name"/>
-                                <hr class="w-25 mx-auto mt-2 mb-0 mg_divider opacity-50"/>
-                            </div>
-                        </div>
-                        <div class="row align-items-start g-4">
-                            <div class="col-lg-4 text-center mg_image_col">
-                                <div t-field="membership_group.image"
-                                     t-options='{"widget": "image", "class": "img-fluid rounded shadow"}'/>
-                            </div>
-                            <div class="col-lg-8 mg_desc_col">
-                                <div class="mg_top_block" t-field="membership_group.website_top"/>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-                <section class="mg_members_section py-5">
-                    <div class="container">
-                        <div class="oe_structure" id="oe_structure_mg_%s_2"/>
-                        <div t-attf-class="row g-4 mg_members_row {{membership_group.website_snippet_members_classes or 'mg_layout_grid mg_show_committee_desc mg_show_team_desc'}}"
-                             id="mg_members_row"
-                             t-att-data-oe-id="membership_group.id"
-                        >
-                            <t t-set="current_members"
-                                               t-value="membership_group.membership_group_member_ids.filtered(lambda m: m.state == 'current')"/>
-                            <div t-attf-class="mg_committee_col {{membership_group.website_committee_col_classes or 'col-lg-4'}}">
-                                <div class="card h-100 shadow-sm border-0">
-                                    <div class="card-header border-0 py-3 bg-primary text-white"
-                                         data-name="Committee Header">
-                                        <h5 class="mb-0 fw-semibold">Committee Members</h5>
-                                    </div>
-                                    <div class="card-body p-0">
-                                        <div>
-                                            <t t-set="committee_members"
-                                               t-value="current_members.filtered(lambda m: m.type == 'committee').mapped('partner_id')"/>
-                                            <t t-call="website_membership_group.membership_group_member_list">
-                                                <t t-set="members" t-value="committee_members"/>
-                                            </t>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div t-attf-class="mg_team_col {{membership_group.website_team_col_classes or 'col-lg-8'}}">
-                                <div class="card h-100 shadow-sm border-0">
-                                    <div class="card-header border-0 py-3 bg-primary text-white"
-                                         data-name="Team Header">
-                                        <h5 class="mb-0 fw-semibold">Team Members</h5>
-                                    </div>
-                                    <div class="card-body p-0">
-                                        <div>
-                                            <t t-set="team_members"
-                                               t-value="current_members.filtered(lambda m: m.type != 'committee').mapped('partner_id')"/>
-                                            <t t-call="website_membership_group.membership_group_member_list">
-                                                <t t-set="members" t-value="team_members"/>
-                                            </t>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="oe_structure" id="oe_structure_mg_%s_3"/>
-                    </div>
-                </section>
-                <section class="mg_bottom_block pt-3">
-                    <div class="container">
-                        <div class="row">
-                            <div class="mt-3" t-field="membership_group.website_bottom"/>
-                        </div>
-                    </div>
-                </section>
-                <div class="oe_structure" id="oe_structure_mg_%s_4"/>
-            </div>
-        </t>""" % (self.id, self.id, self.id, self.id)
+        """Return the raw QWeb arch from the base template."""
+        view = self.env.ref("website_membership_group.membership_group_page_base")
+        return view.arch
 
     def write(self, vals):
-        """Auto-create page when published."""
+        """Auto-create page on publish, sync publish status on both transitions."""
         res = super().write(vals)
-        if vals.get("is_published"):
+        if "is_published" in vals:
             for group in self:
-                if not group.page_id:
+                if group.is_published and not group.page_id:
                     group._create_membership_page()
+                if group.page_id and group.page_id.is_published != group.is_published:
+                    group.page_id.is_published = group.is_published
         return res
\ No newline at end of file
diff --git a/website_membership_group/static/src/js/membership_group_options.esm.js b/website_membership_group/static/src/js/membership_group_options.esm.js
index 096a7bd8..5fd31568 100644
--- a/website_membership_group/static/src/js/membership_group_options.esm.js
+++ b/website_membership_group/static/src/js/membership_group_options.esm.js
@@ -104,8 +104,10 @@ options.registry.MemberColOpts = options.Class.extend({
     _saveToDatabase: function () {
         const $row = this.$target.closest('#mg_members_row');
         const id = parseInt($row[0]?.dataset.oeId, 10);
+        // Persist only user-configurable classes; exclude structural mg_*_col classes
+        const structuralClasses = ['mg_committee_col', 'mg_team_col'];
         const classes = this.$target[0].className.split(/\s+/)
-            .filter(cls => cls.startsWith('mg_') || cls.startsWith('col-'))
+            .filter(cls => !structuralClasses.includes(cls) && (cls.startsWith('mg_') || cls.startsWith('col-')))
             .join(' ');
 
         const field = this.$target.hasClass('mg_committee_col')
diff --git a/website_membership_group/templates/website.xml b/website_membership_group/templates/website.xml
index b39edb13..247e9979 100644
--- a/website_membership_group/templates/website.xml
+++ b/website_membership_group/templates/website.xml
@@ -1,11 +1,91 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <odoo>
-    <!--
-        Note: the main group page template is now generated dynamically
-        per group via MembershipGroup._get_page_arch() so that each group
-        gets unique oe_structure IDs and isolated editable content.
-        This shared template was removed to eliminate the DRY violation.
-    -->
+    <template id="membership_group_page_base">
+        <t t-call="website.layout">
+            <t t-set="additional_title" t-value="membership_group.name"/>
+            <div id="wrap"
+                 t-att-data-oe-id="membership_group.id"
+                 t-attf-class="mg_wrap o_editable {{membership_group.website_snippet_wrap_classes or 'mg_show_image mg_show_top mg_show_bottom mg_show_committee mg_show_team'}}">
+                <div class="oe_structure" t-att-id="'oe_structure_mg_%s_1' % membership_group.id"/>
+                <section class="mg_header_section pt-5 pb-4">
+                    <div class="container" name="membership_page">
+                        <div class="row" name="description_row">
+                            <div class="col-12 text-center mb-4">
+                                <h2 class="fw-bold text-primary" t-field="membership_group.name"/>
+                                <hr class="w-25 mx-auto mt-2 mb-0 mg_divider opacity-50"/>
+                            </div>
+                        </div>
+                        <div class="row align-items-start g-4">
+                            <div class="col-lg-4 text-center mg_image_col">
+                                <div t-field="membership_group.image"
+                                     t-options='{"widget": "image", "class": "img-fluid rounded shadow"}'/>
+                            </div>
+                            <div class="col-lg-8 mg_desc_col">
+                                <div class="mg_top_block" t-field="membership_group.website_top"/>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="mg_members_section py-5">
+                    <div class="container">
+                        <div class="oe_structure" t-att-id="'oe_structure_mg_%s_2' % membership_group.id"/>
+                        <div t-attf-class="row g-4 mg_members_row {{membership_group.website_snippet_members_classes or 'mg_layout_grid mg_show_committee_desc mg_show_team_desc'}}"
+                             id="mg_members_row"
+                             t-att-data-oe-id="membership_group.id"
+                        >
+                            <t t-set="current_members"
+                               t-value="membership_group.membership_group_member_ids.filtered(lambda m: m.state == 'current')"/>
+                            <div t-attf-class="mg_committee_col {{membership_group.website_committee_col_classes or 'col-lg-4'}}">
+                                <div class="card h-100 shadow-sm border-0">
+                                    <div class="card-header border-0 py-3 bg-primary text-white"
+                                         data-name="Committee Header">
+                                        <h5 class="mb-0 fw-semibold">Committee Members</h5>
+                                    </div>
+                                    <div class="card-body p-0">
+                                        <div>
+                                            <t t-set="committee_members"
+                                               t-value="current_members.filtered(lambda m: m.type == 'committee').mapped('partner_id')"/>
+                                            <t t-call="website_membership_group.membership_group_member_list">
+                                                <t t-set="members" t-value="committee_members"/>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div t-attf-class="mg_team_col {{membership_group.website_team_col_classes or 'col-lg-8'}}">
+                                <div class="card h-100 shadow-sm border-0">
+                                    <div class="card-header border-0 py-3 bg-primary text-white"
+                                         data-name="Team Header">
+                                        <h5 class="mb-0 fw-semibold">Team Members</h5>
+                                    </div>
+                                    <div class="card-body p-0">
+                                        <div>
+                                            <t t-set="team_members"
+                                               t-value="current_members.filtered(lambda m: m.type != 'committee').mapped('partner_id')"/>
+                                            <t t-call="website_membership_group.membership_group_member_list">
+                                                <t t-set="members" t-value="team_members"/>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="oe_structure" t-att-id="'oe_structure_mg_%s_3' % membership_group.id"/>
+                    </div>
+                </section>
+                <section class="mg_bottom_block pt-3">
+                    <div class="container">
+                        <div class="row">
+                            <div class="mt-3" t-field="membership_group.website_bottom"/>
+                        </div>
+                    </div>
+                </section>
+                <div class="oe_structure" t-att-id="'oe_structure_mg_%s_4' % membership_group.id"/>
+            </div>
+        </t>
+    </template>
 
     <template id="membership_group_member_list">
         <div class="mg_member_list d-flex flex-wrap">
diff --git a/website_membership_group/tests/test_e2e_membership.py b/website_membership_group/tests/test_e2e_membership.py
new file mode 100644
index 00000000..dcfd1614
--- /dev/null
+++ b/website_membership_group/tests/test_e2e_membership.py
@@ -0,0 +1,248 @@
+"""
+End-to-end usability tests for website_membership_group and website_membership_snippet.
+Run with: python3 test_e2e_membership.py
+"""
+
+import asyncio
+from playwright.async_api import async_playwright
+import json
+import sys
+
+BASE_URL = "http://localhost:8069"
+ADMIN_USER = "admin"
+ADMIN_PASS = "admin"
+DB_NAME = "main"
+
+
+async def login_admin(page):
+    """Log in as admin user."""
+    await page.goto(f"{BASE_URL}/web/login")
+    await page.wait_for_selector("input[name='login']", timeout=10000)
+    await page.fill("input[name='login']", ADMIN_USER)
+    await page.fill("input[name='password']", ADMIN_PASS)
+    # Click the submit button in the login form specifically
+    submit_btn = await page.query_selector("form button.btn-primary[type='submit']")
+    if not submit_btn:
+        submit_btn = await page.query_selector("form:has(input#login) button[type='submit']")
+    if not submit_btn:
+        submit_btn = await page.query_selector("button[type='submit']")
+    await submit_btn.click()
+    # Wait for navigation to complete (to /web or similar)
+    await page.wait_for_timeout(3000)
+    # Check if login succeeded
+    if "/web/login" in page.url:
+        raise Exception("Login failed — check credentials")
+    print("✓ Logged in as admin")
+
+
+async def test_membership_group_page_accessible(page):
+    """Test that a published membership group page is accessible."""
+    import xmlrpc.client
+    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
+    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
+    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
+    
+    # Find or create a published group
+    group_ids = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'search', [[['is_published', '=', True]]], {'limit': 1})
+    if group_ids:
+        group = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [group_ids], {'fields': ['name']})[0]
+        group_name = group['name']
+    else:
+        group_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
+            'name': 'E2E Test Group',
+            'is_published': True,
+        }])
+        group = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group_id]], {'fields': ['name']})[0]
+        group_name = group['name']
+    
+    # Navigate to the group's page using website_url
+    group_full = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group_ids[0] if group_ids else group_id]], {'fields': ['website_url']})[0]
+    page_url = group_full['website_url']
+    response = await page.goto(f"{BASE_URL}{page_url}")
+    await page.wait_for_timeout(2000)
+    
+    # Check page loaded successfully
+    assert response.status == 200, f"Expected 200, got {response.status}"
+    
+    # Check key elements are present
+    await page.wait_for_selector(".mg_members_row", timeout=5000)
+    
+    print(f"✓ Published membership group page '{group_name}' is accessible and renders correctly")
+
+
+async def test_unpublished_group_returns_404(page):
+    """Test that an unpublished group returns 404."""
+    # Create an unpublished group via RPC first
+    import xmlrpc.client
+    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
+    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
+    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
+    
+    group_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
+        'name': 'Test Unpublished Group 404',
+        'is_published': False,
+    }])
+    
+    # Try to access it as public user (no session)
+    context = await page.context.browser.new_context()
+    public_page = await context.new_page()
+    response = await public_page.goto(f"{BASE_URL}/members/group/{group_id}-test-unpublished-group-404")
+    
+    assert response.status == 404, f"Expected 404 for unpublished group, got {response.status}"
+    await context.close()
+    
+    # Clean up
+    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'unlink', [[group_id]])
+    
+    print("✓ Unpublished group correctly returns 404")
+
+
+async def test_snippet_groups_endpoint(page):
+    """Test the JSON endpoint for published groups."""
+    # JSON-RPC endpoint needs POST with proper body
+    response = await page.request.post(
+        f"{BASE_URL}/membership/snippet/groups",
+        data=json.dumps({"jsonrpc": "2.0", "method": "call", "params": {}, "id": 1}),
+        headers={"Content-Type": "application/json"}
+    )
+    body = await response.body()
+    data = json.loads(body.decode())
+    
+    assert 'result' in data, "Response should have 'result' key"
+    groups = data['result']
+    assert len(groups) > 0, "Should return at least one published group"
+    
+    print(f"✓ Snippet groups endpoint returns {len(groups)} published groups")
+
+
+async def test_dynamic_filter_renders_members(page):
+    """Test that the dynamic filter renders members correctly."""
+    # This tests the dynamic snippet filter by calling the internal endpoint
+    import xmlrpc.client
+    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
+    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
+    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
+    
+    # Find the Board of Directors group
+    group_ids = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'search', [[['name', '=', 'Board of Directors']]])
+    assert group_ids, "Board of Directors group not found"
+    group_id = group_ids[0]
+    
+    # Call the dynamic filter endpoint via the website controller
+    # We test this by visiting a page with the snippet
+    response = await page.goto(f"{BASE_URL}")
+    await page.wait_for_load_state("networkidle")
+    
+    # Check the website is up
+    assert response.status == 200, f"Website homepage should be accessible, got {response.status}"
+    
+    print("✓ Dynamic filter infrastructure is working")
+
+
+async def test_page_unique_per_group(page):
+    """Test that two groups have different pages."""
+    import xmlrpc.client
+    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
+    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
+    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
+    
+    # Create two groups, then publish them separately to trigger write()
+    group1_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
+        'name': 'Unique Page Test Group 1',
+    }])
+    group2_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
+        'name': 'Unique Page Test Group 2',
+    }])
+    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'write', [[group1_id, group2_id], {'is_published': True}])
+    
+    # Get their pages
+    group1 = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group1_id]], {'fields': ['page_id']})
+    group2 = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group2_id]], {'fields': ['page_id']})
+    
+    page1_id = group1[0]['page_id'][0] if group1[0]['page_id'] else None
+    page2_id = group2[0]['page_id'][0] if group2[0]['page_id'] else None
+    
+    assert page1_id, "Group 1 should have a page"
+    assert page2_id, "Group 2 should have a page"
+    assert page1_id != page2_id, "Groups should have different pages"
+    
+    # Get views
+    page1 = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'website.page', 'read', [[page1_id]], {'fields': ['view_id']})
+    page2 = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'website.page', 'read', [[page2_id]], {'fields': ['view_id']})
+    
+    view1_id = page1[0]['view_id'][0]
+    view2_id = page2[0]['view_id'][0]
+    
+    assert view1_id != view2_id, "Groups should have different views"
+    
+    # Clean up
+    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'unlink', [[group1_id, group2_id]])
+    
+    print("✓ Each group gets a unique page and view")
+
+
+async def test_publish_unpublish_sync(page):
+    """Test that publish/unpublish syncs the page status."""
+    import xmlrpc.client
+    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
+    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
+    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
+    
+    # Create a group, then publish it separately to trigger write()
+    group_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
+        'name': 'Publish Sync Test Group',
+    }])
+    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'write', [[group_id], {'is_published': True}])
+    
+    group = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group_id]], {'fields': ['page_id', 'is_published']})
+    page_id = group[0]['page_id'][0]
+    assert page_id, "Page should be created on publish"
+    
+    page = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'website.page', 'read', [[page_id]], {'fields': ['is_published']})
+    assert page[0]['is_published'], "Page should be published when group is published"
+    
+    # Unpublish
+    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'write', [[group_id], {'is_published': False}])
+    
+    page = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'website.page', 'read', [[page_id]], {'fields': ['is_published']})
+    assert not page[0]['is_published'], "Page should be unpublished when group is unpublished"
+    
+    # Clean up
+    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'unlink', [[group_id]])
+    
+    print("✓ Publish/unpublish status syncs correctly")
+
+
+async def run_tests():
+    """Run all e2e tests."""
+    async with async_playwright() as p:
+        browser = await p.chromium.launch(headless=True)
+        context = await browser.new_context()
+        page = await context.new_page()
+        
+        try:
+            print("\n=== End-to-End Usability Tests ===\n")
+            
+            await login_admin(page)
+            await test_membership_group_page_accessible(page)
+            await test_unpublished_group_returns_404(page)
+            await test_snippet_groups_endpoint(page)
+            await test_dynamic_filter_renders_members(page)
+            await test_page_unique_per_group(page)
+            await test_publish_unpublish_sync(page)
+            
+            print("\n=== All e2e tests passed! ===\n")
+            return 0
+            
+        except Exception as e:
+            print(f"\n✗ Test failed: {e}")
+            import traceback
+            traceback.print_exc()
+            return 1
+        finally:
+            await browser.close()
+
+
+if __name__ == "__main__":
+    result = asyncio.run(run_tests())
+    sys.exit(result)
diff --git a/website_membership_group/tests/test_membership_group_page.py b/website_membership_group/tests/test_membership_group_page.py
index 43317592..ec5b4e95 100644
--- a/website_membership_group/tests/test_membership_group_page.py
+++ b/website_membership_group/tests/test_membership_group_page.py
@@ -37,3 +37,10 @@ def test_page_is_unique_per_group(self):
         self.assertTrue(group2.page_id)
         self.assertNotEqual(self.group.page_id, group2.page_id)
         self.assertNotEqual(self.group.page_id.view_id, group2.page_id.view_id)
+
+    def test_page_unpublish_sync(self):
+        """Unpublishing a group also unpublishes its page."""
+        self.group.write({"is_published": True})
+        self.assertTrue(self.group.page_id.is_published)
+        self.group.write({"is_published": False})
+        self.assertFalse(self.group.page_id.is_published)
diff --git a/website_membership_snippet/__manifest__.py b/website_membership_snippet/__manifest__.py
index 5dc32b79..88a4cfb6 100644
--- a/website_membership_snippet/__manifest__.py
+++ b/website_membership_snippet/__manifest__.py
@@ -12,6 +12,8 @@
         "website_membership_group",
     ],
     "data": [
+        "data/website_snippet_filter_data.xml",
+        "views/snippets/dynamic_templates.xml",
         "views/snippets/snippets.xml",
     ],
     "assets": {
@@ -22,4 +24,4 @@
             "website_membership_snippet/static/src/js/membership_snippet_options.js",
         ],
     },
-}
\ No newline at end of file
+}
diff --git a/website_membership_snippet/controllers/main.py b/website_membership_snippet/controllers/main.py
index c084c636..d7e2d63f 100644
--- a/website_membership_snippet/controllers/main.py
+++ b/website_membership_snippet/controllers/main.py
@@ -9,27 +9,3 @@ def snippet_groups(self):
             ("is_published", "=", True),
         ], order="name")
         return [{"id": g.id, "name": g.name} for g in groups]
-
-    @http.route("/membership/snippet/members", type="json", auth="public", website=True)
-    def snippet_members(self, group_id=None):
-        if not group_id:
-            return []
-        
-        group = request.env["membership.group"].sudo().browse(int(group_id))
-        if not group.exists():
-            return []
-        
-        members = group.membership_group_member_ids.filtered(
-            lambda m: m.state == "current"
-        ).mapped("partner_id")
-        
-        result = []
-        for member in members.filtered("website_published"):
-            result.append({
-                "id": member.id,
-                "name": member.name,
-                "description": member.website_description or "",
-                "image": f"/web/image/res.partner/{member.id}/image_128" if member.image_128 else "",
-                "url": f"/members/{request.env['ir.http']._slug(member)}" if member.website_published else "",
-            })
-        return result
diff --git a/website_membership_snippet/data/website_snippet_filter_data.xml b/website_membership_snippet/data/website_snippet_filter_data.xml
new file mode 100644
index 00000000..548c4ec1
--- /dev/null
+++ b/website_membership_snippet/data/website_snippet_filter_data.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data>
+        <!-- Filter for Dynamic Snippet -->
+        <record id="dynamic_snippet_membership_members_filter" model="ir.filters">
+            <field name="name">Membership Members</field>
+            <field name="model_id">res.partner</field>
+            <field name="user_id" eval="False"/>
+            <field name="domain">[('website_published', '=', True), ('membership_group_member_ids.state', '=', 'current')]</field>
+            <field name="sort">["name asc"]</field>
+            <field name="action_id" ref="website.action_website"/>
+        </record>
+
+        <!-- Dynamic Filter -->
+        <record id="dynamic_filter_membership_members" model="website.snippet.filter">
+            <field name="name">Membership Members</field>
+            <field name="filter_id" ref="website_membership_snippet.dynamic_snippet_membership_members_filter"/>
+            <field name="field_names">name,image_128,website_description</field>
+            <field name="limit" eval="16"/>
+        </record>
+    </data>
+</odoo>
diff --git a/website_membership_snippet/static/src/img/snippets_thumbs/s_dynamic_member_list.svg b/website_membership_snippet/static/src/img/snippets_thumbs/s_dynamic_member_list.svg
deleted file mode 100644
index 7d7d1bd9..00000000
--- a/website_membership_snippet/static/src/img/snippets_thumbs/s_dynamic_member_list.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="150" height="100" viewBox="0 0 150 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="150" height="100" fill="#007bff"/>
-  <circle cx="40" cy="30" r="15" fill="white"/>
-  <rect x="65" y="20" width="60" height="8" rx="2" fill="white"/>
-  <rect x="65" y="32" width="40" height="5" rx="1" fill="white" opacity="0.7"/>
-  <circle cx="40" cy="60" r="15" fill="white"/>
-  <rect x="65" y="50" width="60" height="8" rx="2" fill="white"/>
-  <rect x="65" y="62" width="40" height="5" rx="1" fill="white" opacity="0.7"/>
-  <circle cx="40" cy="90" r="15" fill="white"/>
-  <rect x="65" y="80" width="60" height="8" rx="2" fill="white"/>
-  <rect x="65" y="92" width="40" height="5" rx="1" fill="white" opacity="0.7"/>
-</svg>
\ No newline at end of file
diff --git a/website_membership_snippet/static/src/js/membership_snippet.js b/website_membership_snippet/static/src/js/membership_snippet.js
index 98421315..9249e041 100644
--- a/website_membership_snippet/static/src/js/membership_snippet.js
+++ b/website_membership_snippet/static/src/js/membership_snippet.js
@@ -1,99 +1,40 @@
 /** @odoo-module **/
 
 import publicWidget from "@web/legacy/js/public/public_widget";
-import { rpc } from "@web/core/network/rpc";
+import DynamicSnippet from "@website/snippets/s_dynamic_snippet/000";
 
-publicWidget.registry.MembershipSnippet = publicWidget.Widget.extend({
-    selector: ".s_membership_members",
-    
-    async start() {
-        await this._super(...arguments);
-        const groupId = parseInt(this.el.dataset.groupId, 10);
-        if (groupId) {
-            await this._loadMembers(groupId);
-        }
-    },
-    
-    async _loadMembers(groupId) {
-        try {
-            const members = await rpc("/membership/snippet/members", {
-                group_id: groupId,
-            });
-            this._renderMembers(members);
-        } catch (error) {
-            console.error("Failed to load members:", error);
-        }
-    },
-    
-    _renderMembers(members) {
-        const container = this.el.querySelector(".s_membership_members_container");
-        if (!container || !members.length) {
-            this.el.classList.add("o_snippet_empty");
-            return;
-        }
-        
-        const layout = this.el.dataset.layout || "grid";
-        let html = "";
-        
-        if (layout === "list") {
-            html = this._renderList(members);
-        } else if (layout === "avatars") {
-            html = this._renderAvatars(members);
-        } else {
-            html = this._renderGrid(members);
+const DynamicSnippetMembers = DynamicSnippet.extend({
+    selector: ".s_dynamic_snippet_members",
+    disabledInEditableMode: false,
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     * @private
+     */
+    _getSearchDomain: function () {
+        const searchDomain = this._super.apply(this, arguments);
+        const filterByGroupId = parseInt(this.$el.get(0).dataset.filterByGroupId);
+        if (filterByGroupId >= 0) {
+            searchDomain.push(
+                ["membership_group_member_ids.group_id", "=", filterByGroupId],
+                ["membership_group_member_ids.state", "=", "current"]
+            );
         }
-        
-        container.innerHTML = html;
-        this.el.classList.remove("o_snippet_empty");
-    },
-    
-    _renderGrid(members) {
-        return `<div class="row g-3">${members.map(m => `
-            <div class="col-md-4 col-lg-3">
-                <div class="card h-100 shadow-sm">
-                    <div class="card-body text-center">
-                        <img class="rounded-circle mb-3" 
-                             style="width: 80px; height: 80px; object-fit: cover;"
-                             src="${m.image || "/web/static/img/user_placeholder.jpg"}" 
-                             alt="${m.name}"/>
-                        <h5 class="card-title">${m.name}</h5>
-                        ${m.description ? `<p class="card-text text-muted small">${m.description}</p>` : ""}
-                        ${m.url ? `<a href="${m.url}" class="btn btn-sm btn-primary">View Profile</a>` : ""}
-                    </div>
-                </div>
-            </div>
-        `).join("")}</div>`;
+        return searchDomain;
     },
-    
-    _renderList(members) {
-        return `<div class="row">${members.map(m => `
-            <div class="col-12 mb-3">
-                <div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
-                    <img class="rounded-circle" 
-                         style="width: 60px; height: 60px; object-fit: cover;"
-                         src="${m.image || "/web/static/img/user_placeholder.jpg"}" 
-                         alt="${m.name}"/>
-                    <div class="flex-grow-1">
-                        <h6 class="mb-0">${m.name}</h6>
-                        ${m.description ? `<small class="text-muted">${m.description}</small>` : ""}
-                    </div>
-                    ${m.url ? `<a href="${m.url}" class="btn btn-sm btn-outline-primary">View</a>` : ""}
-                </div>
-            </div>
-        `).join("")}</div>`;
-    },
-    
-    _renderAvatars(members) {
-        return `<div class="d-flex flex-wrap justify-content-center gap-3">${members.map(m => `
-            <div class="text-center p-2">
-                <img class="rounded-circle mb-2" 
-                     style="width: 50px; height: 50px; object-fit: cover;"
-                     src="${m.image || "/web/static/img/user_placeholder.jpg"}" 
-                     alt="${m.name}"/>
-                <p class="small mb-0">${m.name}</p>
-            </div>
-        `).join("")}</div>`;
+    /**
+     * @override
+     * @private
+     */
+    _getMainPageUrl() {
+        return "/members";
     },
 });
 
-export default publicWidget.registry.MembershipSnippet;
\ No newline at end of file
+publicWidget.registry.dynamic_snippet_members = DynamicSnippetMembers;
+
+export default DynamicSnippetMembers;
diff --git a/website_membership_snippet/static/src/js/membership_snippet_options.js b/website_membership_snippet/static/src/js/membership_snippet_options.js
index 5101d424..e65b4e6e 100644
--- a/website_membership_snippet/static/src/js/membership_snippet_options.js
+++ b/website_membership_snippet/static/src/js/membership_snippet_options.js
@@ -1,50 +1,73 @@
 /** @odoo-module **/
 
 import options from "@web_editor/js/editor/snippets.options";
+import dynamicSnippetOptions from "@website/snippets/s_dynamic_snippet/options";
 import { rpc } from "@web/core/network/rpc";
 
-options.registry.MembershipSnippetOptions = options.Class.extend({
+const dynamicSnippetMembersOptions = dynamicSnippetOptions.extend({
     /**
      * @override
      */
-    async _renderCustomXML(uiFragment) {
-        await this._super(...arguments);
-        const groups = await this._fetchGroups();
-        this._renderGroupSelector(uiFragment, groups);
+    init: function () {
+        this._super.apply(this, arguments);
+        this.modelNameFilter = "res.partner";
+        this.groups = {};
     },
 
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
     /**
+     * @override
      * @private
      */
-    async _fetchGroups() {
-        try {
-            return await rpc("/membership/snippet/groups");
-        } catch (error) {
-            console.error("Failed to fetch groups:", error);
-            return [];
-        }
+    _computeWidgetVisibility: function (widgetName, params) {
+        return this._super.apply(this, arguments);
     },
-
     /**
+     * Fetches published membership groups.
      * @private
+     * @returns {Promise}
      */
-    _renderGroupSelector(uiFragment, groups) {
-        const selectEl = uiFragment.querySelector('[data-name="group_id_opt"]');
-        if (!selectEl || !groups.length) {
-            return;
+    _fetchGroups: function () {
+        return rpc("/membership/snippet/groups");
+    },
+    /**
+     * @override
+     * @private
+     */
+    _renderCustomXML: async function (uiFragment) {
+        await this._super.apply(this, arguments);
+        await this._renderGroupSelector(uiFragment);
+    },
+    /**
+     * Renders the group option selector content into the provided uiFragment.
+     * @private
+     * @param {HTMLElement} uiFragment
+     */
+    _renderGroupSelector: async function (uiFragment) {
+        if (!Object.keys(this.groups).length) {
+            const groupsList = await this._fetchGroups();
+            this.groups = {};
+            for (let index in groupsList) {
+                this.groups[groupsList[index].id] = groupsList[index];
+            }
         }
-
-        // Remove existing buttons
-        selectEl.querySelectorAll('we-button').forEach(btn => btn.remove());
-
-        // Add group options directly to we-select (same pattern as dynamic snippets)
-        groups.forEach(group => {
-            const button = document.createElement('we-button');
-            button.dataset.selectDataAttribute = group.id;
-            button.textContent = group.name;
-            selectEl.appendChild(button);
-        });
+        const groupSelectorEl = uiFragment.querySelector('[data-name="group_opt"]');
+        return this._renderSelectUserValueWidgetButtons(groupSelectorEl, this.groups);
+    },
+    /**
+     * Sets default options values.
+     * @override
+     * @private
+     */
+    _setOptionsDefaultValues: function () {
+        this._setOptionValue("filterByGroupId", -1);
+        this._super.apply(this, arguments);
     },
 });
 
-export default options.registry.MembershipSnippetOptions;
\ No newline at end of file
+options.registry.dynamic_snippet_members = dynamicSnippetMembersOptions;
+
+export default dynamicSnippetMembersOptions;
diff --git a/website_membership_snippet/tests/test_membership_snippet.py b/website_membership_snippet/tests/test_membership_snippet.py
index 82ead82f..22b4c835 100644
--- a/website_membership_snippet/tests/test_membership_snippet.py
+++ b/website_membership_snippet/tests/test_membership_snippet.py
@@ -3,28 +3,34 @@
 
 @tagged("post_install", "-at_install")
 class TestMembershipSnippet(HttpCase):
-    """Tests for the website membership snippet endpoints."""
+    """Tests for the website membership dynamic snippet."""
 
-    @classmethod
-    def setUpClass(cls):
-        super().setUpClass()
-        cls.group = cls.env["membership.group"].create({
-            "name": "Test Group",
-            "is_published": True,
-        })
-        cls.partner = cls.env["res.partner"].create({
-            "name": "Test Member",
-            "website_published": True,
-        })
-        cls.env["membership.group.member"].create({
-            "group_id": cls.group.id,
-            "partner_id": cls.partner.id,
-            "type": "committee",
-            "state": "current",
-        })
+    def test_snippet_filter_exists(self):
+        """The dynamic snippet filter record exists."""
+        filter_record = self.env.ref(
+            "website_membership_snippet.dynamic_filter_membership_members",
+            raise_if_not_found=False,
+        )
+        self.assertTrue(filter_record)
+        self.assertEqual(filter_record.model_name, "res.partner")
+        self.assertEqual(filter_record.limit, 16)
+
+    def test_snippet_templates_exist(self):
+        """All layout templates are registered."""
+        for template_key in [
+            "website_membership_snippet.dynamic_filter_template_res_partner_grid",
+            "website_membership_snippet.dynamic_filter_template_res_partner_list",
+            "website_membership_snippet.dynamic_filter_template_res_partner_avatars",
+        ]:
+            view = self.env.ref(template_key, raise_if_not_found=False)
+            self.assertTrue(view, f"Template {template_key} not found")
 
     def test_snippet_groups_endpoint(self):
         """The /membership/snippet/groups endpoint returns published groups."""
+        group = self.env["membership.group"].create({
+            "name": "Test Group",
+            "is_published": True,
+        })
         result = self.url_open(
             "/membership/snippet/groups",
             data='{"jsonrpc": "2.0", "method": "call", "params": {}, "id": 1}',
@@ -36,39 +42,58 @@ def test_snippet_groups_endpoint(self):
         group_names = [g["name"] for g in data["result"]]
         self.assertIn("Test Group", group_names)
 
-    def test_snippet_members_endpoint(self):
-        """The /membership/snippet/members endpoint returns group members."""
-        result = self.url_open(
-            "/membership/snippet/members",
-            data='{"jsonrpc": "2.0", "method": "call", "params": {"group_id": %s}, "id": 1}' % self.group.id,
-            headers={"Content-Type": "application/json"},
-        )
-        self.assertEqual(result.status_code, 200)
-        data = result.json()
-        self.assertIn("result", data)
-        member_names = [m["name"] for m in data["result"]]
-        self.assertIn("Test Member", member_names)
+    def test_dynamic_filter_renders_members(self):
+        """The dynamic filter renders members for a published group."""
+        group = self.env["membership.group"].create({
+            "name": "Dynamic Test Group",
+            "is_published": True,
+        })
+        partner = self.env["res.partner"].create({
+            "name": "Dynamic Test Member",
+            "website_published": True,
+        })
+        self.env["membership.group.member"].create({
+            "group_id": group.id,
+            "partner_id": partner.id,
+            "type": "committee",
+            "state": "current",
+        })
 
-    def test_snippet_members_unpublished_group(self):
-        """Unpublished groups are not returned by the groups endpoint."""
-        self.group.is_published = False
-        result = self.url_open(
-            "/membership/snippet/groups",
-            data='{"jsonrpc": "2.0", "method": "call", "params": {}, "id": 1}',
-            headers={"Content-Type": "application/json"},
+        filter_record = self.env.ref(
+            "website_membership_snippet.dynamic_filter_membership_members"
         )
-        data = result.json()
-        group_names = [g["name"] for g in data["result"]]
-        self.assertNotIn("Test Group", group_names)
+        fragments = filter_record._render(
+            "website_membership_snippet.dynamic_filter_template_res_partner_grid",
+            limit=16,
+            search_domain=[("membership_group_member_ids.group_id", "=", group.id)],
+        )
+        self.assertTrue(fragments)
+        self.assertIn("Dynamic Test Member", fragments[0])
 
-    def test_snippet_members_unpublished_partner(self):
-        """Unpublished partners are not included in member results."""
-        self.partner.website_published = False
-        result = self.url_open(
-            "/membership/snippet/members",
-            data='{"jsonrpc": "2.0", "method": "call", "params": {"group_id": %s}, "id": 1}' % self.group.id,
-            headers={"Content-Type": "application/json"},
+    def test_dynamic_filter_hides_unpublished_members(self):
+        """Unpublished partners are not rendered."""
+        group = self.env["membership.group"].create({
+            "name": "Hidden Member Group",
+            "is_published": True,
+        })
+        partner = self.env["res.partner"].create({
+            "name": "Hidden Member",
+            "website_published": False,
+        })
+        self.env["membership.group.member"].create({
+            "group_id": group.id,
+            "partner_id": partner.id,
+            "type": "committee",
+            "state": "current",
+        })
+
+        filter_record = self.env.ref(
+            "website_membership_snippet.dynamic_filter_membership_members"
         )
-        data = result.json()
-        member_names = [m["name"] for m in data["result"]]
-        self.assertNotIn("Test Member", member_names)
+        fragments = filter_record._render(
+            "website_membership_snippet.dynamic_filter_template_res_partner_grid",
+            limit=16,
+            search_domain=[("membership_group_member_ids.group_id", "=", group.id)],
+        )
+        # Should be empty because partner is not website_published
+        self.assertFalse(any("Hidden Member" in f for f in fragments))
diff --git a/website_membership_snippet/views/snippets/dynamic_templates.xml b/website_membership_snippet/views/snippets/dynamic_templates.xml
new file mode 100644
index 00000000..9629c0cc
--- /dev/null
+++ b/website_membership_snippet/views/snippets/dynamic_templates.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Grid Layout -->
+    <template id="dynamic_filter_template_res_partner_grid" name="Grid">
+        <div t-foreach="records" t-as="data" class="s_membership_members_item w-100"
+             data-extra-classes="g-3" data-column-classes="col-md-4 col-lg-3">
+            <t t-set="record" t-value="data['_record']"/>
+            <div class="card h-100 shadow-sm">
+                <div class="card-body text-center">
+                    <img class="rounded-circle mb-3"
+                         style="width: 80px; height: 80px; object-fit: cover;"
+                         t-att-src="data['image_128'] or '/web/static/img/user_placeholder.jpg'"
+                         t-att-alt="data['name']"/>
+                    <h5 class="card-title" t-field="record.name"/>
+                    <p t-if="data['website_description']" class="card-text text-muted small"
+                       t-field="record.website_description"/>
+                    <a t-if="data['call_to_action_url']" t-att-href="data['call_to_action_url']"
+                       class="btn btn-sm btn-primary">View Profile</a>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <!-- List Layout -->
+    <template id="dynamic_filter_template_res_partner_list" name="List">
+        <div t-foreach="records" t-as="data" class="s_membership_members_item w-100"
+             data-extra-classes="g-3" data-column-classes="col-12">
+            <t t-set="record" t-value="data['_record']"/>
+            <div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
+                <img class="rounded-circle"
+                     style="width: 60px; height: 60px; object-fit: cover;"
+                     t-att-src="data['image_128'] or '/web/static/img/user_placeholder.jpg'"
+                     t-att-alt="data['name']"/>
+                <div class="flex-grow-1">
+                    <h6 class="mb-0" t-field="record.name"/>
+                    <small t-if="data['website_description']" class="text-muted"
+                           t-field="record.website_description"/>
+                </div>
+                <a t-if="data['call_to_action_url']" t-att-href="data['call_to_action_url']"
+                   class="btn btn-sm btn-outline-primary">View</a>
+            </div>
+        </div>
+    </template>
+
+    <!-- Avatars Layout -->
+    <template id="dynamic_filter_template_res_partner_avatars" name="Avatars">
+        <div t-foreach="records" t-as="data" class="s_membership_members_item w-100"
+             data-extra-classes="g-3" data-column-classes="col-6 col-md-3 col-lg-2">
+            <t t-set="record" t-value="data['_record']"/>
+            <div class="text-center p-2">
+                <img class="rounded-circle mb-2"
+                     style="width: 50px; height: 50px; object-fit: cover;"
+                     t-att-src="data['image_128'] or '/web/static/img/user_placeholder.jpg'"
+                     t-att-alt="data['name']"/>
+                <p class="small mb-0" t-field="record.name"/>
+            </div>
+        </div>
+    </template>
+</odoo>
diff --git a/website_membership_snippet/views/snippets/snippets.xml b/website_membership_snippet/views/snippets/snippets.xml
index ab9733b8..f2ab0105 100644
--- a/website_membership_snippet/views/snippets/snippets.xml
+++ b/website_membership_snippet/views/snippets/snippets.xml
@@ -1,42 +1,44 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <odoo>
-    <!-- Snippet Template -->
+    <!-- Snippet -->
     <template id="s_membership_members" name="Members">
-        <section class="s_membership_members pt32 pb32" data-group-id="">
-            <div class="container">
-                <div class="row s_nb_column_fixed">
-                    <div class="col-12">
-                        <h3 class="mb-3">Members</h3>
-                        <div class="s_membership_members_container">
-                            <div class="text-muted">Select a membership group in the snippet options.</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
+        <t t-call="website.s_dynamic_snippet_template">
+            <t t-set="snippet_name" t-value="'s_membership_members'"/>
+            <t t-set="snippet_classes" t-value="'s_dynamic_snippet_members'"/>
+            <t t-set="custom_template_data" t-value="'{}'"/>
+        </t>
     </template>
 
     <!-- Register Snippet in Panel -->
     <template id="snippets" inherit_id="website.snippets">
         <xpath expr="//t[@id='installed_snippets_hook']" position="after">
-            <t t-snippet="website_membership_snippet.s_membership_members" 
-               string="Members" 
+            <t t-snippet="website_membership_snippet.s_membership_members"
+               string="Members"
                t-thumbnail="/website/static/src/img/snippets_thumbs/s_company_team.svg"/>
         </xpath>
     </template>
 
-    <!-- Snippet Options -->
+    <!-- Options -->
     <template id="s_membership_members_options" inherit_id="website.snippet_options">
         <xpath expr="." position="inside">
-            <div data-js="MembershipSnippetOptions" data-selector=".s_membership_members">
-                <we-select string="Membership Group" data-name="group_id_opt" data-attribute-name="groupId" data-no-preview="true">
-                </we-select>
-                <we-select string="Layout" data-name="layout_opt" data-attribute-name="layout" data-no-preview="true">
-                    <we-button data-select-data-attribute="grid" title="Grid">Grid</we-button>
-                    <we-button data-select-data-attribute="list" title="List">List</we-button>
-                    <we-button data-select-data-attribute="avatars" title="Avatars">Avatars</we-button>
-                </we-select>
-            </div>
+            <t t-call="website.s_dynamic_snippet_options_template">
+                <t t-set="snippet_name" t-value="'dynamic_snippet_members'"/>
+                <t t-set="snippet_selector" t-value="'.s_dynamic_snippet_members'"/>
+            </t>
         </xpath>
     </template>
-</odoo>
\ No newline at end of file
+
+    <!-- Extra options for membership group selector -->
+    <template id="s_dynamic_snippet_members_options_template" inherit_id="website.s_dynamic_snippet_options_template">
+        <xpath expr="//we-select[@data-name='template_opt']" position="after">
+            <we-select t-if="snippet_name == 'dynamic_snippet_members'"
+                string="Membership Group"
+                data-no-preview="true"
+                data-name="group_opt"
+                data-attribute-name="filterByGroupId">
+                <we-button data-select-data-attribute="-1">All groups</we-button>
+                <!-- group list generated in JS -->
+            </we-select>
+        </xpath>
+    </template>
+</odoo>

From 9fd7aa4f295bd5fb524c3b72e7a28df6406a753c Mon Sep 17 00:00:00 2001
From: abdel <abdelouzzine@gmail.com>
Date: Tue, 5 May 2026 16:35:22 +0200
Subject: [PATCH 5/5] [FIX] website_membership: address PR #138 review feedback
 + CI failures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes for reviewer feedback (tarteo):

1. controllers/main.py:19 — Restored domain filter in route converter
   for proper URL completion in website editor.

2. controllers/main.py:38-41 — Moved page creation and publish sync
   from controller to model write() method.

3. demo/website_membership_group_demo.xml — Moved demo data from
   website_membership_group to membership_group module, keeping only
   website-specific fields (is_published, website_description).

4. models/membership_group.py:74-77 — Eliminated inline Python string
   template (DRY violation). Now uses QWeb template
   membership_group_page_base and returns view.arch.

5. models/membership_group.py:79-91 — write() now syncs page_id.is_published
   on both publish AND unpublish transitions. Remove mg_wrap from
   default to avoid class duplication.

6. membership_group_options.esm.js:108 — Filter out structural
   mg_committee_col / mg_team_col classes from MemberColOpts
   persistence to prevent duplication.

7. website_membership_snippet — Rewrote to use Odoo's DynamicSnippet
   architecture (website.snippet.filter + QWeb templates) instead
   of custom JSON endpoints and manual rendering.

8. Fixed XSS risks in snippet JS by switching to DynamicSnippet
   which renders via properly escaped QWeb templates.

9. membership_group_demo.xml:27 — Fixed 'Only one voting group
   is allowed' constraint violation. Removed voting_group=True
   from Board of Directors (only demo_membership_vote_group
   should be a voting group).

CI fixes (pre-commit):

10. Ran black on all Python files (7 files reformatted).
11. Ran isort to fix import ordering.
12. Fixed flake8 F841 (unused variable) in test_membership_snippet.py.
13. Fixed eslint: renamed JS files to .esm.js extension; added
    /* global MutationObserver */ to membership_group_options.esm.js.
14. Removed test_e2e_membership.py from Odoo test directory
    (standalone Playwright script, not an Odoo unit test).

Testing:
- All 9 Odoo unit tests pass (EXIT_CODE=0)
- All 7 Playwright e2e tests pass
- Clean DB install verified: no constraint violation, demo loads
---
 .../data/membership_group_demo.xml            |   1 -
 website_membership_group/__init__.py          |   3 +-
 website_membership_group/controllers/main.py  |   4 +-
 .../models/membership_group.py                |  28 +-
 .../src/js/membership_group_options.esm.js    |   1 +
 .../tests/test_e2e_membership.py              | 248 ------------------
 .../tests/test_membership_group_page.py       |  16 +-
 website_membership_snippet/__init__.py        |   2 +-
 website_membership_snippet/__manifest__.py    |   4 +-
 .../controllers/__init__.py                   |   2 +-
 .../controllers/main.py                       |  13 +-
 ...p_snippet.js => membership_snippet.esm.js} |   0
 ...s.js => membership_snippet_options.esm.js} |   0
 .../tests/test_membership_snippet.py          |  78 +++---
 14 files changed, 91 insertions(+), 309 deletions(-)
 delete mode 100644 website_membership_group/tests/test_e2e_membership.py
 rename website_membership_snippet/static/src/js/{membership_snippet.js => membership_snippet.esm.js} (100%)
 rename website_membership_snippet/static/src/js/{membership_snippet_options.js => membership_snippet_options.esm.js} (100%)

diff --git a/membership_group/data/membership_group_demo.xml b/membership_group/data/membership_group_demo.xml
index 41466e33..dcfc3e39 100644
--- a/membership_group/data/membership_group_demo.xml
+++ b/membership_group/data/membership_group_demo.xml
@@ -24,7 +24,6 @@
 
         <record id="demo_membership_group_board" model="membership.group">
             <field name="name">Board of Directors</field>
-            <field name="voting_group" eval="True"/>
         </record>
 
         <record id="demo_membership_group_sponsors" model="membership.group">
diff --git a/website_membership_group/__init__.py b/website_membership_group/__init__.py
index 91c5580f..72d3ea60 100644
--- a/website_membership_group/__init__.py
+++ b/website_membership_group/__init__.py
@@ -1,2 +1 @@
-from . import controllers
-from . import models
+from . import controllers, models
diff --git a/website_membership_group/controllers/main.py b/website_membership_group/controllers/main.py
index aa2f32a2..7a874c5b 100644
--- a/website_membership_group/controllers/main.py
+++ b/website_membership_group/controllers/main.py
@@ -44,5 +44,7 @@ def display_membership_group_page(self, membership_group):
         except ValueError:
             return request.not_found()
         except Exception:
-            _logger.exception("Unexpected error rendering membership group page for view %s", view_key)
+            _logger.exception(
+                "Unexpected error rendering membership group page for view %s", view_key
+            )
             return request.not_found()
diff --git a/website_membership_group/models/membership_group.py b/website_membership_group/models/membership_group.py
index ca32ff11..d063a874 100644
--- a/website_membership_group/models/membership_group.py
+++ b/website_membership_group/models/membership_group.py
@@ -54,19 +54,23 @@ def _create_membership_page(self):
         view_key = "website_membership_group.membership_group_page_custom_%s" % self.id
 
         # Create the view with unique oe_structure IDs
-        view = self.env["ir.ui.view"].create({
-            "name": "Membership Group: %s" % self.name,
-            "key": view_key,
-            "type": "qweb",
-            "arch": self._get_page_arch(),
-        })
+        view = self.env["ir.ui.view"].create(
+            {
+                "name": "Membership Group: %s" % self.name,
+                "key": view_key,
+                "type": "qweb",
+                "arch": self._get_page_arch(),
+            }
+        )
 
         # Create the website page
-        page = self.env["website.page"].create({
-            "url": page_url,
-            "website_published": True,
-            "view_id": view.id,
-        })
+        page = self.env["website.page"].create(
+            {
+                "url": page_url,
+                "website_published": True,
+                "view_id": view.id,
+            }
+        )
 
         self.page_id = page
         return page
@@ -85,4 +89,4 @@ def write(self, vals):
                     group._create_membership_page()
                 if group.page_id and group.page_id.is_published != group.is_published:
                     group.page_id.is_published = group.is_published
-        return res
\ No newline at end of file
+        return res
diff --git a/website_membership_group/static/src/js/membership_group_options.esm.js b/website_membership_group/static/src/js/membership_group_options.esm.js
index 5fd31568..a0bb612e 100644
--- a/website_membership_group/static/src/js/membership_group_options.esm.js
+++ b/website_membership_group/static/src/js/membership_group_options.esm.js
@@ -1,5 +1,6 @@
 import options from "@web_editor/js/editor/snippets.options";
 import { rpc } from "@web/core/network/rpc";
+/* global MutationObserver */
 /**
  * Helper to filter for module-specific option classes.
  * Excludes base structural classes to prevent duplication in templates.
diff --git a/website_membership_group/tests/test_e2e_membership.py b/website_membership_group/tests/test_e2e_membership.py
deleted file mode 100644
index dcfd1614..00000000
--- a/website_membership_group/tests/test_e2e_membership.py
+++ /dev/null
@@ -1,248 +0,0 @@
-"""
-End-to-end usability tests for website_membership_group and website_membership_snippet.
-Run with: python3 test_e2e_membership.py
-"""
-
-import asyncio
-from playwright.async_api import async_playwright
-import json
-import sys
-
-BASE_URL = "http://localhost:8069"
-ADMIN_USER = "admin"
-ADMIN_PASS = "admin"
-DB_NAME = "main"
-
-
-async def login_admin(page):
-    """Log in as admin user."""
-    await page.goto(f"{BASE_URL}/web/login")
-    await page.wait_for_selector("input[name='login']", timeout=10000)
-    await page.fill("input[name='login']", ADMIN_USER)
-    await page.fill("input[name='password']", ADMIN_PASS)
-    # Click the submit button in the login form specifically
-    submit_btn = await page.query_selector("form button.btn-primary[type='submit']")
-    if not submit_btn:
-        submit_btn = await page.query_selector("form:has(input#login) button[type='submit']")
-    if not submit_btn:
-        submit_btn = await page.query_selector("button[type='submit']")
-    await submit_btn.click()
-    # Wait for navigation to complete (to /web or similar)
-    await page.wait_for_timeout(3000)
-    # Check if login succeeded
-    if "/web/login" in page.url:
-        raise Exception("Login failed — check credentials")
-    print("✓ Logged in as admin")
-
-
-async def test_membership_group_page_accessible(page):
-    """Test that a published membership group page is accessible."""
-    import xmlrpc.client
-    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
-    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
-    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
-    
-    # Find or create a published group
-    group_ids = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'search', [[['is_published', '=', True]]], {'limit': 1})
-    if group_ids:
-        group = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [group_ids], {'fields': ['name']})[0]
-        group_name = group['name']
-    else:
-        group_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
-            'name': 'E2E Test Group',
-            'is_published': True,
-        }])
-        group = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group_id]], {'fields': ['name']})[0]
-        group_name = group['name']
-    
-    # Navigate to the group's page using website_url
-    group_full = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group_ids[0] if group_ids else group_id]], {'fields': ['website_url']})[0]
-    page_url = group_full['website_url']
-    response = await page.goto(f"{BASE_URL}{page_url}")
-    await page.wait_for_timeout(2000)
-    
-    # Check page loaded successfully
-    assert response.status == 200, f"Expected 200, got {response.status}"
-    
-    # Check key elements are present
-    await page.wait_for_selector(".mg_members_row", timeout=5000)
-    
-    print(f"✓ Published membership group page '{group_name}' is accessible and renders correctly")
-
-
-async def test_unpublished_group_returns_404(page):
-    """Test that an unpublished group returns 404."""
-    # Create an unpublished group via RPC first
-    import xmlrpc.client
-    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
-    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
-    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
-    
-    group_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
-        'name': 'Test Unpublished Group 404',
-        'is_published': False,
-    }])
-    
-    # Try to access it as public user (no session)
-    context = await page.context.browser.new_context()
-    public_page = await context.new_page()
-    response = await public_page.goto(f"{BASE_URL}/members/group/{group_id}-test-unpublished-group-404")
-    
-    assert response.status == 404, f"Expected 404 for unpublished group, got {response.status}"
-    await context.close()
-    
-    # Clean up
-    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'unlink', [[group_id]])
-    
-    print("✓ Unpublished group correctly returns 404")
-
-
-async def test_snippet_groups_endpoint(page):
-    """Test the JSON endpoint for published groups."""
-    # JSON-RPC endpoint needs POST with proper body
-    response = await page.request.post(
-        f"{BASE_URL}/membership/snippet/groups",
-        data=json.dumps({"jsonrpc": "2.0", "method": "call", "params": {}, "id": 1}),
-        headers={"Content-Type": "application/json"}
-    )
-    body = await response.body()
-    data = json.loads(body.decode())
-    
-    assert 'result' in data, "Response should have 'result' key"
-    groups = data['result']
-    assert len(groups) > 0, "Should return at least one published group"
-    
-    print(f"✓ Snippet groups endpoint returns {len(groups)} published groups")
-
-
-async def test_dynamic_filter_renders_members(page):
-    """Test that the dynamic filter renders members correctly."""
-    # This tests the dynamic snippet filter by calling the internal endpoint
-    import xmlrpc.client
-    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
-    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
-    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
-    
-    # Find the Board of Directors group
-    group_ids = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'search', [[['name', '=', 'Board of Directors']]])
-    assert group_ids, "Board of Directors group not found"
-    group_id = group_ids[0]
-    
-    # Call the dynamic filter endpoint via the website controller
-    # We test this by visiting a page with the snippet
-    response = await page.goto(f"{BASE_URL}")
-    await page.wait_for_load_state("networkidle")
-    
-    # Check the website is up
-    assert response.status == 200, f"Website homepage should be accessible, got {response.status}"
-    
-    print("✓ Dynamic filter infrastructure is working")
-
-
-async def test_page_unique_per_group(page):
-    """Test that two groups have different pages."""
-    import xmlrpc.client
-    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
-    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
-    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
-    
-    # Create two groups, then publish them separately to trigger write()
-    group1_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
-        'name': 'Unique Page Test Group 1',
-    }])
-    group2_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
-        'name': 'Unique Page Test Group 2',
-    }])
-    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'write', [[group1_id, group2_id], {'is_published': True}])
-    
-    # Get their pages
-    group1 = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group1_id]], {'fields': ['page_id']})
-    group2 = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group2_id]], {'fields': ['page_id']})
-    
-    page1_id = group1[0]['page_id'][0] if group1[0]['page_id'] else None
-    page2_id = group2[0]['page_id'][0] if group2[0]['page_id'] else None
-    
-    assert page1_id, "Group 1 should have a page"
-    assert page2_id, "Group 2 should have a page"
-    assert page1_id != page2_id, "Groups should have different pages"
-    
-    # Get views
-    page1 = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'website.page', 'read', [[page1_id]], {'fields': ['view_id']})
-    page2 = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'website.page', 'read', [[page2_id]], {'fields': ['view_id']})
-    
-    view1_id = page1[0]['view_id'][0]
-    view2_id = page2[0]['view_id'][0]
-    
-    assert view1_id != view2_id, "Groups should have different views"
-    
-    # Clean up
-    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'unlink', [[group1_id, group2_id]])
-    
-    print("✓ Each group gets a unique page and view")
-
-
-async def test_publish_unpublish_sync(page):
-    """Test that publish/unpublish syncs the page status."""
-    import xmlrpc.client
-    sock = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/common')
-    uid = sock.authenticate(DB_NAME, ADMIN_USER, ADMIN_PASS, {})
-    sock_exec = xmlrpc.client.ServerProxy(f'{BASE_URL}/xmlrpc/2/object')
-    
-    # Create a group, then publish it separately to trigger write()
-    group_id = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'create', [{
-        'name': 'Publish Sync Test Group',
-    }])
-    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'write', [[group_id], {'is_published': True}])
-    
-    group = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'read', [[group_id]], {'fields': ['page_id', 'is_published']})
-    page_id = group[0]['page_id'][0]
-    assert page_id, "Page should be created on publish"
-    
-    page = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'website.page', 'read', [[page_id]], {'fields': ['is_published']})
-    assert page[0]['is_published'], "Page should be published when group is published"
-    
-    # Unpublish
-    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'write', [[group_id], {'is_published': False}])
-    
-    page = sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'website.page', 'read', [[page_id]], {'fields': ['is_published']})
-    assert not page[0]['is_published'], "Page should be unpublished when group is unpublished"
-    
-    # Clean up
-    sock_exec.execute_kw(DB_NAME, uid, ADMIN_PASS, 'membership.group', 'unlink', [[group_id]])
-    
-    print("✓ Publish/unpublish status syncs correctly")
-
-
-async def run_tests():
-    """Run all e2e tests."""
-    async with async_playwright() as p:
-        browser = await p.chromium.launch(headless=True)
-        context = await browser.new_context()
-        page = await context.new_page()
-        
-        try:
-            print("\n=== End-to-End Usability Tests ===\n")
-            
-            await login_admin(page)
-            await test_membership_group_page_accessible(page)
-            await test_unpublished_group_returns_404(page)
-            await test_snippet_groups_endpoint(page)
-            await test_dynamic_filter_renders_members(page)
-            await test_page_unique_per_group(page)
-            await test_publish_unpublish_sync(page)
-            
-            print("\n=== All e2e tests passed! ===\n")
-            return 0
-            
-        except Exception as e:
-            print(f"\n✗ Test failed: {e}")
-            import traceback
-            traceback.print_exc()
-            return 1
-        finally:
-            await browser.close()
-
-
-if __name__ == "__main__":
-    result = asyncio.run(run_tests())
-    sys.exit(result)
diff --git a/website_membership_group/tests/test_membership_group_page.py b/website_membership_group/tests/test_membership_group_page.py
index ec5b4e95..e28bfdd3 100644
--- a/website_membership_group/tests/test_membership_group_page.py
+++ b/website_membership_group/tests/test_membership_group_page.py
@@ -8,9 +8,11 @@ class TestMembershipGroupPage(HttpCase):
     @classmethod
     def setUpClass(cls):
         super().setUpClass()
-        cls.group = cls.env["membership.group"].create({
-            "name": "Page Test Group",
-        })
+        cls.group = cls.env["membership.group"].create(
+            {
+                "name": "Page Test Group",
+            }
+        )
 
     def test_page_created_on_publish(self):
         """Publishing a group auto-creates a unique website.page."""
@@ -29,9 +31,11 @@ def test_page_not_accessible_when_unpublished(self):
     def test_page_is_unique_per_group(self):
         """Each group gets its own page and view."""
         self.group.write({"is_published": True})
-        group2 = self.env["membership.group"].create({
-            "name": "Another Group",
-        })
+        group2 = self.env["membership.group"].create(
+            {
+                "name": "Another Group",
+            }
+        )
         group2.write({"is_published": True})
         self.assertTrue(self.group.page_id)
         self.assertTrue(group2.page_id)
diff --git a/website_membership_snippet/__init__.py b/website_membership_snippet/__init__.py
index e033df50..610fabab 100644
--- a/website_membership_snippet/__init__.py
+++ b/website_membership_snippet/__init__.py
@@ -1,4 +1,4 @@
 # Copyright 2026 Onestein (<https://www.onestein.nl>)
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
 
-from . import controllers
\ No newline at end of file
+from . import controllers
diff --git a/website_membership_snippet/__manifest__.py b/website_membership_snippet/__manifest__.py
index 88a4cfb6..513b31f6 100644
--- a/website_membership_snippet/__manifest__.py
+++ b/website_membership_snippet/__manifest__.py
@@ -18,10 +18,10 @@
     ],
     "assets": {
         "web.assets_frontend": [
-            "website_membership_snippet/static/src/js/membership_snippet.js",
+            "website_membership_snippet/static/src/js/membership_snippet.esm.js",
         ],
         "website.assets_wysiwyg": [
-            "website_membership_snippet/static/src/js/membership_snippet_options.js",
+            "website_membership_snippet/static/src/js/membership_snippet_options.esm.js",
         ],
     },
 }
diff --git a/website_membership_snippet/controllers/__init__.py b/website_membership_snippet/controllers/__init__.py
index deec4a8b..12a7e529 100644
--- a/website_membership_snippet/controllers/__init__.py
+++ b/website_membership_snippet/controllers/__init__.py
@@ -1 +1 @@
-from . import main
\ No newline at end of file
+from . import main
diff --git a/website_membership_snippet/controllers/main.py b/website_membership_snippet/controllers/main.py
index d7e2d63f..021995fd 100644
--- a/website_membership_snippet/controllers/main.py
+++ b/website_membership_snippet/controllers/main.py
@@ -5,7 +5,14 @@
 class MembershipSnippetController(http.Controller):
     @http.route("/membership/snippet/groups", type="json", auth="public", website=True)
     def snippet_groups(self):
-        groups = request.env["membership.group"].sudo().search([
-            ("is_published", "=", True),
-        ], order="name")
+        groups = (
+            request.env["membership.group"]
+            .sudo()
+            .search(
+                [
+                    ("is_published", "=", True),
+                ],
+                order="name",
+            )
+        )
         return [{"id": g.id, "name": g.name} for g in groups]
diff --git a/website_membership_snippet/static/src/js/membership_snippet.js b/website_membership_snippet/static/src/js/membership_snippet.esm.js
similarity index 100%
rename from website_membership_snippet/static/src/js/membership_snippet.js
rename to website_membership_snippet/static/src/js/membership_snippet.esm.js
diff --git a/website_membership_snippet/static/src/js/membership_snippet_options.js b/website_membership_snippet/static/src/js/membership_snippet_options.esm.js
similarity index 100%
rename from website_membership_snippet/static/src/js/membership_snippet_options.js
rename to website_membership_snippet/static/src/js/membership_snippet_options.esm.js
diff --git a/website_membership_snippet/tests/test_membership_snippet.py b/website_membership_snippet/tests/test_membership_snippet.py
index 22b4c835..0db2a8a8 100644
--- a/website_membership_snippet/tests/test_membership_snippet.py
+++ b/website_membership_snippet/tests/test_membership_snippet.py
@@ -27,10 +27,12 @@ def test_snippet_templates_exist(self):
 
     def test_snippet_groups_endpoint(self):
         """The /membership/snippet/groups endpoint returns published groups."""
-        group = self.env["membership.group"].create({
-            "name": "Test Group",
-            "is_published": True,
-        })
+        self.env["membership.group"].create(
+            {
+                "name": "Test Group",
+                "is_published": True,
+            }
+        )
         result = self.url_open(
             "/membership/snippet/groups",
             data='{"jsonrpc": "2.0", "method": "call", "params": {}, "id": 1}',
@@ -44,20 +46,26 @@ def test_snippet_groups_endpoint(self):
 
     def test_dynamic_filter_renders_members(self):
         """The dynamic filter renders members for a published group."""
-        group = self.env["membership.group"].create({
-            "name": "Dynamic Test Group",
-            "is_published": True,
-        })
-        partner = self.env["res.partner"].create({
-            "name": "Dynamic Test Member",
-            "website_published": True,
-        })
-        self.env["membership.group.member"].create({
-            "group_id": group.id,
-            "partner_id": partner.id,
-            "type": "committee",
-            "state": "current",
-        })
+        group = self.env["membership.group"].create(
+            {
+                "name": "Dynamic Test Group",
+                "is_published": True,
+            }
+        )
+        partner = self.env["res.partner"].create(
+            {
+                "name": "Dynamic Test Member",
+                "website_published": True,
+            }
+        )
+        self.env["membership.group.member"].create(
+            {
+                "group_id": group.id,
+                "partner_id": partner.id,
+                "type": "committee",
+                "state": "current",
+            }
+        )
 
         filter_record = self.env.ref(
             "website_membership_snippet.dynamic_filter_membership_members"
@@ -72,20 +80,26 @@ def test_dynamic_filter_renders_members(self):
 
     def test_dynamic_filter_hides_unpublished_members(self):
         """Unpublished partners are not rendered."""
-        group = self.env["membership.group"].create({
-            "name": "Hidden Member Group",
-            "is_published": True,
-        })
-        partner = self.env["res.partner"].create({
-            "name": "Hidden Member",
-            "website_published": False,
-        })
-        self.env["membership.group.member"].create({
-            "group_id": group.id,
-            "partner_id": partner.id,
-            "type": "committee",
-            "state": "current",
-        })
+        group = self.env["membership.group"].create(
+            {
+                "name": "Hidden Member Group",
+                "is_published": True,
+            }
+        )
+        partner = self.env["res.partner"].create(
+            {
+                "name": "Hidden Member",
+                "website_published": False,
+            }
+        )
+        self.env["membership.group.member"].create(
+            {
+                "group_id": group.id,
+                "partner_id": partner.id,
+                "type": "committee",
+                "state": "current",
+            }
+        )
 
         filter_record = self.env.ref(
             "website_membership_snippet.dynamic_filter_membership_members"