<script data-o-ads-config type="application/json">
	{
		"gpt": {
			"network": {{network}},
			"site": "{{site}}",
			"zone": "{{zone}}"
		},
		"lazyLoad": {
			"viewportMargin": "{{viewportMargin}}"
		}
	}
</script>
<script>
	let nextSlotId = 0

	// Generate next slot name
	const generateNextSlotName = () =>
		"{{basename}}" + ++nextSlotId

	// Create and add fake content
	const addFakeContent = (text) => (parent) => {
		const h2 = document.createElement("H2")
		const textNode = document.createTextNode(text)
		h2.appendChild(textNode)
		parent.appendChild(h2)
	}

	// Create and add an Ad Slot
	const addAdSlot = (slotName, formats) => (parent) => {
		const adSlot = document.createElement('div')
		adSlot.setAttribute('data-o-ads-name', slotName)
		adSlot.setAttribute('data-o-ads-formats', formats)

		parent.appendChild(adSlot)
	}

	const findAdSlotsByName = (slotName) => (parent) =>
		Array.from(parent.querySelectorAll(`div[data-o-ads-name=${slotName}]`)) 

	const initAdSlots = (slots, oAds) =>
		slots.forEach(oAds.slots.initSlot.bind(oAds.slots))

	const createAdSlot = (slotName, formats) => (parentDoc) => {
		addAdSlot(slotName, formats)(parentDoc.body)
		const slots = findAdSlotsByName(slotName)(parentDoc)
		initAdSlots(slots, oAds)
	}

	const moreContent = () => {
		// Generate next slot name
		const slotName = generateNextSlotName()

		// Create a div for the slot
		const slotDiv = document.createElement('div')
		slotDiv.id = slotName // Id must be the same as slotName
		document.body.appendChild(slotDiv)

		// Add some dynamic fake content
		addFakeContent('Dynamic Fake Content 1')(document.body)
		addFakeContent('Dynamic Fake Content 2')(document.body)

		// Create and add the Ad Slot itself
		createAdSlot(slotName, '{{formats}}')(document)
	}
</script>

<div
	data-o-ads-name="{{basename}}"
	data-o-ads-formats="{{formats}}"
></div>

<!-- Button to load more content dynamically. -->
<button onclick="moreContent()">More Content</button>
