{% extends 'base/form.html' %}

{% block title %}Create A Workout{% endblock %}

{% block form %}
<div class="field is-horizontal">
	<div class="field-body">
		<div class="field">
			<p class="control is-expanded has-icons-left">
			<input class="input" type="text" placeholder="Workout Name">
			<span class="icon is-small is-left">
				<i class="fa fa-tag"></i>
			</span>
			</p>
		</div>
	</div>
</div>
<div id="rows" class="field">
	<div class="field is-horizontal">
		<div class="field-body">
			<div class="field">
				<p class="control is-expanded has-icons-left">
					<input class="input" name='exercise-0' type="text" placeholder="Exercise Name">
					<span class="icon is-small is-left">
						<i class="fa fa-tag"></i>
					</span>
				</p>
			</div>
			<div class="field">
				<p class="control is-expanded has-icons-left">
					<input class="input" name='reps-0' type="number" placeholder="Reps" min="1" max="100">
					<span class="icon is-small is-left">
						<i class="fa fa-calculator"></i>
					</span>
				</p>
			</div>
			<p class="button is-danger" onclick="handleDel(this)">
				<span class="icon is-small">
					<i class="fa fa-minus"></i>
				</span>
			</p>
		</div>
	</div>
</div>
<div class="field is-grouped is-grouped-right">
	<p class="buttons">
		<p id="add" class="button is-primary">
			<span class="icon is-small">
				<i class="fa fa-plus"></i>
			</span>
			<span>Add Exercise</span>
		</p>

		<button class="button is-success ">
			<span class="icon is-small">
				<i class="fa fa-check"></i>
			</span>
			<span>Create Workout</span>
		</button>
	</p>
</div>

<script>
	var rowId = 0;

	function handleAdd() {
		rowsDiv = document.getElementById("rows");
		newRow = rowsDiv.children[0].cloneNode(true);

		rowId++;
		exerciseNameInput = newRow.children[0].children[0].children[0].children[0];
		exerciseNameInput.value = '';
		exerciseNameInput.name = 'exercise-' + rowId;

		exerciseRepInput = newRow.children[0].children[1].children[0].children[0];
		exerciseRepInput.value = '';
		exerciseRepInput.name = 'reps-' + rowId;

		rowsDiv.append(newRow);
	}

	function handleDel(elem) {
		// TODO: Make sure this isn't the last row
		elem.parentNode.parentNode.remove();
	}
	document.getElementById("add").onclick = handleAdd;
</script>
{% endblock %}