{% extends 'base.html' %}

{% block menuapp %}

{% include 'lyrics/_menu-lyrics.html' %}

{% endblock menuapp %}

{% block content %}
		    <div class="container-xl">
			    <div class="row g-3 mb-4 align-items-center justify-content-between">
				    <div class="col-auto">
			            <h1 class="app-page-title mb-0">Canciones</h1>
				    </div>
			    </div><!--//row-->				
				<div class="col-auto">
					<div class="page-utilities">
					    <div class="row g-4 justify-content-start justify-content-md-end align-items-center">
						    <div class="col-auto">
							   <a class="btn app-btn-primary" href="{% url 'lyrics:nuevo_song' %}">Añadir canción</a>
						    </div>
					    </div><!--//row-->
				    </div><!--//table-utilities-->
			    </div><!--//col-auto-->


				<div class="app-card app-card-notification shadow-sm mb-4">
					<div class="app-card-body p-4">
									<table class="table app-table-hover mb-0 text-left">
										<thead>
											<tr>
												<th class="cell">Título</th>
												<th class="cell">Autor</th>
												<th class="cell">Álbum</th>
											</tr>
										</thead>
										<tbody>
											{% for song in songs %}
											<tr>
												<td class="cell"><a href="{% url 'lyrics:detalle_song'  song_id=song.id %}">{{ song.title }}</a></td>
												<td class="cell">{{ song.artist }}</td>
												<td class="cell"><a href="{% url 'lyrics:detalle_album' album_id=song.album.id %}">{{ song.album.name }}</a></td>
											</tr>
											{% endfor %}		
										</tbody>		
									</table>
				</div>
		    </div><!--//container-fluid-->
{% endblock %}