{% extends 'base.html' %}

{% block content %}
<div class="column is-4 is-offset-4">
    <h3>Añadir nueva receta</h3>
    <div class="box">
        <form method="POST" action="{{ url_for('paginas.anade_receta') }}"> 
            <div class="text mb-3">
                <label for="title">Título:</label>
                <input class="form-control" type="text" id="title" name="title" required>
            </div>

            <div class="text mb-3">
                <label for="descripcion">Descripción:</label>
                <input class="form-control" type="text" id="descripcion" name="descripcion" required>
            </div>
            
            <h2>Ingredients</h2>

            <div class="text mb-3">
                <input class="form-control" type="text" name="ingredient" placeholder="Ingrediente" required>
                <input class="form-control" type="text" name="quantity" placeholder="Cantidad" required>
                <button type="button" onclick="addIngredient()">Añadir ingrediente</button>
            </div>

            <h2>Instructions</h2>
            
            <div class="text mb-3">
                <textarea name="step_description" placeholder="Descripción del paso" required></textarea>
            </div>

            <div class="text mb-3">
                <label for="recetas">Letra:</label>
                <textarea class="form-control" id="recetas" name="recetas" required></textarea>
            </div>
            <button type="button" onclick="addInstruction()">Añade paso</button>


            <div class="text mb-3">
                  <button type="submit" class="btn app-btn-primary w-100 theme-btn mx-auto">Añadir receta</button>
            </div>
        </form>
    </div>
    
    <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 = '<textarea name="step_description" placeholder="Step Description" required></textarea>';
            instructionsDiv.appendChild(newInstructionDiv);
        }
        
        /*
        function updateAuthor() {
            var albumSelect = document.getElementById("album_id");
            var selectedAlbum = albumSelect.options[albumSelect.selectedIndex];
            var artist = selectedAlbum.getAttribute("data-artist");
            document.getElementById("author").value = artist;
        }
        */

        // Initialize the author field with the artist of the first album
        document.addEventListener('DOMContentLoaded', function() {
            updateAuthor();
        });
    </script>
</div>
{% endblock %}