{% extends 'base.html' %}

{% block content %}
<div class="column is-4 is-offset-4">
    <h3>Añadir nuevo libro para autor '{{ autor.apellido }}, {{ autor.nombre}}'</h3>
    <div class="box">
        <form method="POST"  enctype="multipart/form-data" action=" {{ url_for('paginas.add_libro2autor', autor_id=autor_id) }}"> 
            <div class="text mb-3">
                <label for="anno">Año:</label>
                <textarea class="form-control" id="anno" name="anno" required></textarea>
            </div>
            
            <div class="text mb-3">
                <label for="titulo">Título:</label>
                <input class="form-control" type="text" id="titulo" name="titulo" required>
            </div>

            <div class="text mb-3">
                <label for="portada">Portada</label>
                <input class="form-control" type="file" id="portada" name="portada" required>
            </div>
            
            <div class="text mb-3">
                <label for="epub">Fichero epub</label>
                <input class="form-control" type="file" id="epub" name="epub" required>
            </div>

            <div class="text mb-3">
                  <button type="submit" class="btn app-btn-primary w-100 theme-btn mx-auto">Añadir canción</button>
            </div>
        </form>
    </div>
    
    <script>
        function updateAuthor() {
            var autorSelect = document.getElementById("autor_id");
            var selectedautor = autorSelect.options[autorSelect.selectedIndex];
            var artist = selectedautor.getAttribute("data-artist");
            document.getElementById("author").value = artist;
        }

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