{
	"name": "Button", // Displayed in the blocks grid [required]
	"handle": "button", // A unique handle for the block [required]
	"author": "alpacapp", // Must be lowercase and only contain letters, numbers an the dash character [required]
	"category": "basic", // values: basic, media, advanced, header, footer [required]
	"description": "",
	"entry": "block.liquid", // Name of the html file of the block [required]
	"placeholder": "placeholder.liquid", // Name of the html file of the block for preview mode [optional]
	"stylesheet": "style.css", // Name of the CSS stylesheet if necessary [optional]
	"script": "script.js", // Name of the JS script if necessary [optional]
	"icon": "smart_button" // Block icon (as definied in the Material Symbols Icon pack: https://fonts.google.com/icons) [required]
}

{
	"resizable": true, // Whether the height of the block can be resizable [default: false]
	"manageNarrowWidth": false, // Whether the narrow width feature is managed directly by the block [default: false]
	"elements": [ // [optional]
		// See next sections
	],
	"properties":[
		// See next sections
	]
}

[
	{ // Text Field
		"name": "Text", // Title that displays above the field in the editor [required]
		"variable": "text", // Variable that this field sets [required]
		"type": "text", // Type of field [required]
		"maxLength": 15, // Maximum number of characters allowed [optional]
		"multiline": false, // Whether this is a multiline text field or not [default: false]
		"default": "Lorem ipsum", // Default value [default: ""]
		"cssVariable": true, // Whether to generate a CSS variable for this field (for easy CSS integration) [default: false]
		"showWhen": { // Conditionally show this field [optional]
			"variable": "number", // Variable to check [required]
			"comparator": ">", // values: ==, !=, >, <, >=, <= [default: ==]
			"value": 0 // Value that the variable needs to satisfy for this field to show. Either a string or a number. [required]
		}
	},
	{ // Rich Text (HTML Formatting) Field
		"name": "Rich Text",
		"variable": "text",
		"type": "richText",
		"default": "Lorem <b>ipsum</b>", // [default: ""]
		// Other optional fields: showWhen
	},
	{ // Instruction field (notice box)
		"name"			: "Type a text value in the field above.",
		"type"			: "instruction",
		"level"			: "error" // value: error, info, warning, success [default: info]
		// Other optional fields: showWhen
	},
	{ // Number Input
		"name"			: "Type a number",
		"variable"		: "number",
		"type"			: "number",
		"default"		: 10, // [default: 0]
		"min"		: 0, // Minimum value [optional]
		"max"		: 100,// Maximum value [optional]
		"unit"			: "em", // [optional]
		"integer"			: true // Whether to only allow integer values
		// Other optional fields: cssVariable, showWhen
	},
	{ // Dropdown Menu
		"name": "Dropdown Menu",
		"variable": "option",
		"type": "dropdown",
		"options": [ // List of possible options [required]
			{
				"name": "Cover", // Name that displays in the dropdown
				"value": "cover" // Value when selected
			},
			{
				"name": "Fill",
				"value": "fill"
			}
		],
		"default": "cover" // One of the possible values [required]
		// Other optional fields: cssVariable, showWhen
	},
	{ // Section
		"name": "Collection of fields",
		"type": "section",
		"collapsed": false, // Whether the section is collapsed by default
		"fields"		: [ // Fields [required]
			{
				"name": "Text",
				"variable": "anothertext",
				"type": "text"
			},
			{
				"name": "Type a number",
				"variable": "sectionnumber",
				"type": "number",
				"default": 10
			}
		]
		// Other optional fields: showWhen
	},
	{ // Image Uploader
		"name": "Image",
		"variable": "img",
		"type": "image",
		"default": "https://..." // Default image URL [optional]
		// Other optional fields: cssVariable, showWhen
	},
	{ // Image Gallery field
		"name": "Upload many images",
		"variable": "imgs",
		"type": "image-gallery",
		"maxImages": 4, // Number of images to allow [optional]
		"default": ["https://..."] // Array of default images [optional]
		// Other optional fields: showWhen
	},
	{ // URL Text input
		"name": "Url",
		"variable": "url",
		"type": "url"
		// Other optional fields: default, cssVariable, showWhen
	},
	{ // Number Slider
		"name": "Slide Value",
		"variable": "slider",
		"type": "slider",
		"default": 1, // [required]
		"min": 0, // [required]
		"max": 1 // [required]
		// Other optional fields: integer, unit, cssVariable, showWhen
	},
	{ // Color picker
		"name": "Color",
		"variable": "color",
		"type": "color",
		"default": "#FF000055", // HEX or HEXA color value (HEXA is HEX with alpha appended to it) OR preset color: =primaryColor, =primaryColorAccent, =primaryColorContrast... [default: #000000]
		"alpha": true // Whether to allow transparency [default: true]
		// Other optional fields: cssVariable, showWhen
	},
	{ // Font picker
		"name": "Font",
		"variable": "font",
		"type": "font",
		"default": {
			"family": "Cairo", // A Google Fonts name
			"size": "1em", // supported units: em, px, 
			"weight": 600, // from 100 to 1000
			"style": "italic" // value: normal, italic [default: normal]
		}, // Should be a font name string if all disableWeight, disableSize and disableStyle are true

		"disableWeight": false, // Whether or not to disable the weight field [default: false]
		"disableSize": false, // Whether or not to disable the size field [default: false]
		"disableStyle": false // Whether or not to disable the style field [default: false]
		// Other optional fields: cssVariable, showWhen
	}
]

{
	"variable": "size",
  "comparator": ">", // Possible comparators: ==, !=, >, <, >=, <= [default: ==]
	"value": 5// String or number
}

[
	{ // A
		"variable": "size",
	  "comparator": ">",
		"value": 5
	},
	{ // B
		"variable": "size",
	  "comparator": "<",
		"value": 10
	}
]

[
	[
		{ // A
			"variable": "size",
		  "comparator": ">",
			"value": 5
		},
		{ // B
			"variable": "size",
		  "comparator": "<",
			"value": 10
		}
	],
	[
		{ // C
			"variable": "size",
		  "comparator": "==",
			"value": 2
		}
	]
}

{
	"name": "Block of text", // Name of the element
	"handle": "text", // Handle of the element that is used in the alpacapp-element HTML attribute
	"customizations": [ // Array of CSS properties that are allowed to be customized. Supported properties:
		"color",
		"background-color",
		"font-family",
		"font-size",
		"font-weight",
		"font-style",
		"text-transform",
		"text-decoration",
		"letter-spacing",
		"line-height",
		"text-align",
		"padding",
		"margin",
		"opacity",
		"border",
		"border-radius",
		"transform-scale",
		"filter",
		"transition"
	], // Instead of an Array, you can also use one of the presets: "all", "text", "box", "basic", "image"
	"hoverCustomizations": true, // Whether to allow customizing the hover state [default: false]
	"activeCustomizations": false, // Whether to allow customizing the active (clicked) state [default: false]
	"defaults": { // Default style for this element [optional]
		"color"				: "#000000",
		"background-color"	: "#FFFFFF33",
		"font-family"		: "Cairo",
		"font-size"			: 1, // in em units
		"font-weight"		: 400, // 100 to 1000
		"font-style"		: "italic", // normal, italic 
		"text-transform"	: "uppercase", // none, uppercase, lowercase
		"text-decoration"	: "underline", // none, underline
		"letter-spacing"	: 0, // -0.2 to 2
		"line-height"		: 0, // 0 to 2
		"text-align"		: "center", // left, center, right, justify
		"padding"			: [5, 0, 5, 0], // px: [Top, Right, Bottom, Left] or Number
		"margin"			: 10, // px: [Top, Right, Bottom, Left] or Number
		"opacity"			: 100, // 0 to 100
		"border-width"		: 2, // px: [Top, Right, Bottom, Left] or Number
		"border-color"		: "#000000",
		"border-style"		: "solid", // solid, dashed, dotted
		"border-radius"		: 5, // 0 to 200
		"transform"			: {
			"scale"		: 100,// 0 to 300
		},
		"filter"			: 
			"blur"		: 0,// 0 to 20
			"grayscale"	: 0,// 0 to 100
			"invert"	: 0,// 0 to 100
		"transition"		: 0.25 // seconds: 0 to 2
	},
	"defaultsHover": {}, // same as defaults but without the transition property [optional]
	"defaultsActive": {} // same as defaults but without the transition property [optional]
}

{
	"properties":[
		{
			{
				"name": "Text",
				"variable": "variablename",
				"type": "text"
			}
		}
	]
}

_blockSettings = {
	placeholderMode			: false, // Whether the block is being rendered in the preview frame or in the live site
	id						: '', // ID of the current block
	depth					: 0, // Depth of the block. 1 when the block is in a row of blocks and 0 otherwise
	fullWidth				: true, // Whether the block is full-width or narrow-width.
	span					: 6, // Number of columns the block takes when it's in a row of blocks. You need to divide by 12 to get the proportion of the width this block takes
	height					: false, // Height of the block. A number if it's defined (pixels) or false when the block takes it's natural height
	hideDesktop				: false, // Whether this block should be hidden for desktop devices
	hideTablet				: false, // Whether this block should be hidden for tablet devices
	hideMobile				: false, // Whether this block should be hidden for mobile devices
	narrowWidthDimension	: 1200 // The value of the narrowWidth dimension setting of the site
}

_notionPage = {
	blocks	: [
		// Array of blocks in the page
		// This is a simplified version of the blocks returned by the Notion API
		// https://developers.notion.com/reference/block
		// You can refer to the official API for a list of blocks types and structure
		{
			id: '170cb5c6-28db-4cb1-a7d2-8b4bc580ddb8',
			type: 'heading_1',
			hasChildren: false,
			content: 'Page title',
			toggleable: false
		},
		{
			id: '6cf2ae45-9dbc-4a0e-8dd1-3f15abd844cd',
			type: 'paragraph',
			hasChildren: false,
			content: 'Hello <b>world.</b>'
		}
		// ...
	],
	page		: { // Information about the Notion page
		id: '4368f3dc-c421-431c-a740-c4932c3c0595',	// Notion page ID
		title: 'AlpacApp + Notion',// Title
		url: 'alpacapp-notion-Q2jz3MQhQxynQMSTLDwFlQ',// Handle (url) of the page
		cover: false,// Cover image of the page
		dateCreated: '2023-03-05T18:44:00.000Z',
		dateModified: '2023-03-06T04:22:00.000Z',
		parent: 'e440d5fc-0b3c-42e3-a9af-e901d2d2aaa7' // Parent ID of the Notion page
	},
	subPages	: [
		// List of pages that are direct children of the current page.
	]
}

<div alpacapp-editable="content">{{ content | multilineText }}</div>

<div alpacapp-editable="content" alpacapp-richText>{{ content | richText }}</div>

<div alpacapp-element="customizable">Hello world</div>

document.querySelector('#_BLOCK_ .button').addEventListener('click', ()=>alert('Clicked!'));

// A helper function that takes a form DOM element as an input and returns an object with name-value pairs for each input present in the form.
var formData = ALPACAPP.serializeForm(formElement, {
	asArray		: true, // Return the data as an array of fields: {key, value}, otherwise returns the data as an object
	validate	: true, // Validate the form fields while retrieving the values. If a field doesn't validate, the function returns false
});

// Asynchronous helper that allows you to send an email to the website owner. This can be used for a contact form as an example.
var {success, message} = await ALPACAPP.sendEmail([
	{
		key		: "name",
		value	: "John Doe"
	},
	{
		key		: "message",
		value	: "Hey there"
	},
]);



// Liquid filters:
// These helpers provide the same functionality as they liquid filter equivalents:
ALPACAPP.escapeHtml(...);
ALPACAPP.trim(...);
ALPACAPP.image_srcset(...);
ALPACAPP.image_url(...);
ALPACAPP.css_var(...);
ALPACAPP.uppercase(...);
ALPACAPP.lowercase(...);
ALPACAPP.relative_time(...);
ALPACAPP.money(...);
ALPACAPP.date(...);