{% extends 'base.html' %}

{% block content %}
<h2>Añadir nueva canción</h2>
<form method="POST">
    <label for="pista">Nº de pista:</label>  <!-- Nuevo campo -->
    <input type="number" id="pista" name="pista" required>

    <label for="title">Título:</label>
    <input type="text" id="title" name="title" required>
    
    <label for="author">Autor:</label>
    <input type="text" id="author" name="author" required>
    
    <label for="album_id">Álbum:</label>
    <select id="album_id" name="album_id" required>
        {% for album in albums %}
        <option value="{{ album.id }}" data-artist="{{ album.artist }}">{{ album.name }} by {{ album.artist }}</option>
        {% endfor %}
    </select>
    
    <label for="lyrics">Letra:</label>
    <textarea id="lyrics" name="lyrics" required></textarea>
    
    <button type="submit">Añadir canción</button>
</form>

<script>
    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>
{% endblock %}
