{% extends 'base.html' %}

{% block title %}New Recipe{% endblock %}

{% block content %}
<h1>New Recipe</h1>
<form action="{{ url_for('paginas.new_recipe') }}" method="post">
    <label for="title">Title:</label>
    <input type="text" id="title" name="title" required>
    <label for="description">Description:</label>
    <textarea id="description" name="description" required></textarea>
    <h2>Ingredients</h2>
    <div id="ingredients">
        <div class="ingredient">
            <input type="text" name="ingredient" placeholder="Ingredient" required>
            <input type="text" name="quantity" placeholder="Quantity" required>
        </div>
    </div>
    <button type="button" onclick="addIngredient()">Add Ingredient</button>
    <h2>Instructions</h2>
    <div id="instructions">
        <div class="instruction">
            <input type="text" name="step" placeholder="Step Number" required>
            <textarea name="step_description" placeholder="Step Description" required></textarea>
        </div>
    </div>
    <button type="button" onclick="addInstruction()">Add Instruction</button>
    <button type="submit">Create Recipe</button>
</form>

<script>
function addIngredient() {
    var ingredientsDiv = document.getElementById('ingredients');
    var newIngredientDiv = document.createElement('div');
    newIngredientDiv.className = 'ingredient';
    newIngredientDiv.innerHTML = '<input type="text" name="ingredient" placeholder="Ingredient" required> <input type="text" name="quantity" placeholder="Quantity" required>';
    ingredientsDiv.appendChild(newIngredientDiv);
}

function addInstruction() {
    var instructionsDiv = document.getElementById('instructions');
    var newInstructionDiv = document.createElement('div');
    newInstructionDiv.className = 'instruction';
    newInstructionDiv.innerHTML = '<input type="text" name="step" placeholder="Step Number" required> <textarea name="step_description" placeholder="Step Description" required></textarea>';
    instructionsDiv.appendChild(newInstructionDiv);
}
</script>
{% endblock %}