function TemplateSectionsPanel({ sections = [], value, onChange, disabled = false }) {
    const options = window.EverafterTemplateOptions;
    const enabled = sections.map(section => options.sectionEnabled({ sections: value }, section.id, section.defaultEnabled !== false));
    const included = enabled.filter(Boolean).length;
    return React.createElement("details", { className: "template-section-choices" },
        React.createElement("summary", { className: "template-section-choices-summary" },
            React.createElement("span", { className: "template-section-choices-title" }, "Included sections"),
            React.createElement("span", { className: "template-section-choices-count", "aria-live": "polite" }, included ? `${included} of ${sections.length} included` : 'No sections shown'),
            React.createElement("svg", { className: "template-section-choices-chevron", viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false" },
                React.createElement("path", { d: "m4 6 4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))),
        React.createElement("div", { className: "template-section-choices-body" },
            React.createElement("p", null, "Choose what guests see. Hidden content is kept."),
            React.createElement("fieldset", { disabled: disabled },
                React.createElement("legend", { className: "template-section-choices-legend" }, "Section visibility"),
                sections.map((section, index) => React.createElement("label", { className: "template-section-choice", key: section.id },
                    React.createElement("span", { className: "template-section-choice-label" }, section.label),
                    React.createElement("select", { "aria-label": `${section.label} visibility`, value: enabled[index] ? 'show' : 'hide', onChange: event => {
                            if (!disabled)
                                onChange({ ...(options.normalizeSections(value) || {}), [section.id]: event.target.value === 'show' });
                        } },
                        React.createElement("option", { value: "show" }, "Show"),
                        React.createElement("option", { value: "hide" }, "Hide")))))));
}