(function () {
    const OrgPortal = (window.OrgPortal = window.OrgPortal || {});
    const { h } = OrgPortal.runtime;
    const store = OrgPortal.store;
    const permissions = OrgPortal.permissions;
    const actions = OrgPortal.actions;

    OrgPortal.componentFns = OrgPortal.componentFns || {};

    OrgPortal.componentFns.MembersCard = function MembersCard() {
        const members = store.getMembers();
        const allowMemberManagement = permissions.canManageMembers();

        return h(
            "section",
            { className: "card org-panel org-scroll-panel org-span-5" },
            h(
                "div",
                { className: "org-panel-head" },
                h(
                    "div",
                    null,
                    h("h2", { className: "org-panel-title" }, "Members"),
                    h(
                        "p",
                        { className: "org-panel-subtitle" },
                        "Current roster listing with member removal controls.",
                    ),
                ),
            ),
            h(
                "div",
                { className: "org-name-list" },
                ...members.map((member) =>
                    h(
                        "article",
                        { className: "org-name-row" },
                        h("strong", null, member.name),
                        allowMemberManagement
                            ? h(
                                  "button",
                                  {
                                      type: "button",
                                      className: "org-danger-btn org-icon-btn",
                                      title: `Remove ${member.name}`,
                                      "aria-label": `Remove ${member.name}`,
                                      onClick: () =>
                                          actions.removeMember(member.name),
                                  },
                                  h(
                                      "svg",
                                      {
                                          className: "org-icon",
                                          viewBox: "0 0 24 24",
                                          fill: "none",
                                          stroke: "currentColor",
                                          "stroke-width": "2",
                                          "stroke-linecap": "round",
                                          "stroke-linejoin": "round",
                                          "aria-hidden": "true",
                                      },
                                      h("path", { d: "M9 3h6" }),
                                      h("path", { d: "M4 7h16" }),
                                      h("path", { d: "M6 7l1 13h10l1-13" }),
                                      h("path", { d: "M10 11v6" }),
                                      h("path", { d: "M14 11v6" }),
                                  ),
                              )
                            : null,
                    ),
                ),
            ),
        );
    };
})();