let currentDraggedItem = null;

const lisAndBody = document.querySelectorAll('li, body');
for(const element of lisAndBody){
	element.addEventListener('dragstart', (event)=>{
		currentDraggedItem = event.target;
	})
	element.addEventListener('dragover', (event)=>{
		event.preventDefault()
		event.target.classList.add('dragging');
	})
	element.addEventListener('dragleave', (event)=>{
		event.target.classList.remove('dragging');
	})
	element.addEventListener('drop', (event)=>{
		event.stopPropagation()
		event.target.classList.remove('dragging');
		event.target.children[0].appendChild(currentDraggedItem)
	})
}

const deleteItem = (event)=>{
	event.target.parentNode.remove()
}

const deleteButtons = document.querySelectorAll('button.delete');
for (const deleteButton of deleteButtons) {
	deleteButton.addEventListener('click', deleteItem)
}

const createNewItem = (event)=>{
	const template = document.querySelector('template').content.children[0];
	const newItem = template.cloneNode(true)
	newItem.children[1].addEventListener('click',createNewItem); 
	newItem.children[3].addEventListener('click',deleteItem); 
	event.target.parentNode.children[0].appendChild(newItem)
}

const addButtons = document.querySelectorAll('button.add');
for (const addButton of addButtons) {
	addButton.addEventListener('click',createNewItem); 
}