const cookbook = document.getElementById("cookbook");

fetch("./cms.json")
	.then((response) => {
		return response.json();
	})
	.then((data) => populateContents(data));



function populateContents(data) {
	data.recipes.forEach((recipe) => addRecipe(recipe));
}

function addRecipe(recipe) {
	let card = document.createElement('div')
	card.classList.add('recipe')

	// INFO
	let info = document.createElement('div')
	info.classList.add('info')
	card.appendChild(info)
	
	let title = document.createElement('h2')
	title.classList.add('title')
	title.innerHTML = recipe.title //si prende recipe come contenitore e ci butta dentro title
	info.appendChild(title) //aggiungi title alle info
	
	let description = document.createElement('div')
	description.classList.add('description')
	description.innerHTML = recipe.description
	info.appendChild(description)

	let chef = document.createElement('div')
	chef.classList.add('chef')
	chef.innerHTML = recipe.chef
	info.appendChild(chef)
	

	// INGREDIENTS
	let ingredients = document.createElement('div')
	
	let ingredientsTitle = document.createElement('h3')
	ingredientsTitle.innerHTML = 'Ingredients'
	ingredients.appendChild(ingredientsTitle)

	let ingredientsList = document.createElement('ul')
	recipe.ingredients.forEach(item => {
		let ingredient = document.createElement('li')
		ingredient.innerHTML = item
		ingredientsList.appendChild(ingredient)
	})
	ingredients.appendChild(ingredientsList)
	card.appendChild(ingredients)


	// INSTRUCTIONS
	let instructions = document.createElement('div')
	
	let instructionsTitle = document.createElement('h3')
	instructionsTitle.innerHTML = 'Instructions'
	instructions.appendChild(instructionsTitle)

	let instructionsList = document.createElement('ol')
	recipe.instructions.forEach(item => {
		let instruction = document.createElement('li')
		instruction.innerHTML = item
		instructionsList.appendChild(instruction)
	})
	instructions.appendChild(instructionsList)
	card.appendChild(instructions)
	
	cookbook.appendChild(card)
}