{% extends "base_main.html" %}
{% block title %}{{ recipe.title }}{% endblock %}
{% block main %}
<form action="" method="post" id="add-version-form">
	{%csrf_token %}
	{{ recipe_form.as_div }}
	<table>
		{{ version_form.as_table }}
	</table>
	{{ ingredients_formset.management_form }}
	{% for ingredient_form in ingredients_formset %}
		{{ ingredient_form.as_div }}
	{% endfor %}
	<button id="add-ingredient" type="button">Add Ingredient</button>
	<input type="submit" value="Submit">
</form>

<script>
	let firstIngredientDiv = document.querySelector("input[id^=id_ingredient][id$=text]").parentElement;
	let addIngredientButton = document.querySelector("#add-ingredient");
	let form = document.querySelector("#add-version-form");
	let totalIngredientFormsInput = document.querySelector("#id_ingredient-TOTAL_FORMS");

	addIngredientButton.addEventListener('click', addIngredient);

	function addIngredient(e) {
		let nextIngredientIndex = document.querySelectorAll("input[id^=id_ingredient][id$=text]").length
		e.preventDefault();

		let newIngredientDiv = firstIngredientDiv.cloneNode(true);
		let formRegex = new RegExp('ingredient-(\\d){1}-', 'g');

		newIngredientDiv.innerHTML = newIngredientDiv.innerHTML.replace(formRegex, `ingredient-${nextIngredientIndex}-`);

		form.insertBefore(newIngredientDiv, addIngredientButton);
		totalIngredientFormsInput.setAttribute('value', `${nextIngredientIndex + 1}`);
	}

</script>

{% endblock %}