(function (wp) {
     const { registerBlockType } = wp.blocks;
     const { createElement: el, Fragment } = wp.element;
     const { InspectorControls } = wp.blockEditor || wp.editor;
     const { PanelBody, RangeControl } = wp.components;
     registerBlockType("allspice/inline-overview-style-2", {
         title: "Allspice Inline Overview Style 2",
         icon: "search",
         category: "widgets",
         attributes: {
             pad_top: { type: "number", default: 16 },
             pad_bottom: { type: "number", default: 16 },
         },
         edit: function (props) {
             const { attributes, setAttributes } = props;
             const padTop = typeof attributes.pad_top === "number" ? attributes.pad_top : 16;
             const padBottom = typeof attributes.pad_bottom === "number" ? attributes.pad_bottom : 16;
             return el(
                       Fragment,
                       {},
                       el(
                          InspectorControls,
                          {},
                          el(
                             PanelBody,
                             { title: "Spacing", initialOpen: true },
                             el(RangeControl, {
                                 label: "Top padding (px)",
                                 value: padTop,
                                 min: 0,
                                 max: 80,
                                 step: 1,
                                 onChange: function (v) {
                                     setAttributes({ pad_top: v });
                                 },
                             }),
                             el(RangeControl, {
                                 label: "Bottom padding (px)",
                                 value: padBottom,
                                 min: 0,
                                 max: 80,
                                 step: 1,
                                 onChange: function (v) {
                                     setAttributes({ pad_bottom: v });
                                 },
                             })
                             )
                          ),
                       el(
                          "div",
                          {
                              style: {
                                  border: "1px dashed #ddd",
                                  padding: "12px",
                                  borderRadius: "6px",
                              },
                          },
                          el("strong", {}, "Allspice Inline Overview Style 2"),
                          el(
                             "div",
                             { style: { marginTop: "8px", opacity: 0.75 } },
                             "Renders the Inline Overview Style 2 section (premade)."
                             ),
                          el(
                             "div",
                             {
                                 style: {
                                     marginTop: "12px",
                                     background: "#fafafa",
                                     border: "1px solid #eee",
                                     paddingTop: padTop + "px",
                                     paddingBottom: padBottom + "px",
                                     paddingLeft: "12px",
                                     paddingRight: "12px",
                                     borderRadius: "6px",
                                     opacity: 0.9,
                                 },
                             },
                             el("div", { style: { fontSize: "12px", opacity: 0.8 } }, "Preview spacing"),
                             el("div", { style: { marginTop: "6px" } }, "Overview will render on the front-end.")
                             )
                          )
                       );
         },
         save: function () {
             return null;
         },
     });
 })(window.wp);