{% extends 'base.html' %}

{% block content %}
<div class="column is-4 is-offset-4">
    <h3>Añadir nueva canción</h3>
    <div class="box">
        <form method="POST" action="{{ url_for('paginas.edit_song', song_id=song.id) }}"> 
            <div class="text mb-3">
                <label for="pista">Nº de pista:</label>
                <input class="form-control" type="number" id="pista" name="pista" value="{{ song.pista }}" required>
            </div>

            <div class="text mb-3">
                <label for="title">Título:</label>
                <input class="form-control" type="text" id="title" name="title" value="{{ song.title }}" required>
            </div>

            <div class="text mb-3">
                <label for="author">Autor:</label>
                <input class="form-control" type="text" id="author" name="author" value="{{ song.author }}" required>
            </div>
            
            <div class="text mb-3">
                <label for="album_id">Álbum:</label>
                <select class="form-control" id="album_id" name="album_id" required>
                    {% for album in albums %}
                    <option value="{{ album.id }}" {% if song.album_id == album.id %}selected{% endif %}>{{ album.name }}</option>
                    <!--
                    <option value="{{ album.id }}" data-artist="{{ album.artist }}">{{ album.name }} by {{ album.artist }}</option>
                    -->
                    {% endfor %}
                </select>
            </div>

            <div class="text mb-3">
                <label for="lyrics">Letra:</label>
                <textarea class="form-control" id="lyrics" name="lyrics" required>{{ song.lyrics }}</textarea>
            </div>

            <div class="text mb-3">
                  <button type="submit" class="btn app-btn-primary w-100 theme-btn mx-auto">Guardar cambios</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}