{% 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">Álbumes</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_album' %}">Añadir álbum</a>
                  </div>
               </div><!--//row-->
            </div><!--//table-utilities-->
         </div><!--//col-auto-->

         <nav id="orders-table-tab" class="orders-table-tab app-nav-tabs nav shadow-sm flex-column flex-sm-row mb-4">
            <a class="flex-sm-fill text-sm-center nav-link"  id="albumes-tab" data-bs-toggle="tab" href="#albumes" role="tab" aria-controls="albumes" aria-selected="false">Álbumes</a>
         </nav>
         <div class="tab-content" id="orders-table-tab-content">
            <div class="tab-pane fade show active" id="albumes" role="tabpanel" aria-labelledby="albumes-tab">
               <div class="app-card app-card-orders-table shadow-sm mb-5">
                  <div class="app-card-body">
                     <div class="table-responsive">
                        <table class="table app-table-hover mb-0 text-left">
                           <thead>
                              <tr>

                                 <th class="cell">Cover</th>
                                 <th class="cell">Nombre</th>
                                 <th class="cell">Artista</th>
                                 <th class="cell">Año</th>
                              </tr>
                           </thead>
                           
                           <tbody>
                              {% for album in albumes %}
                              <tr>
                                 <td  class="cell">
                                    {% if album.cover_image %}
                                    <img src="{{ album.cover_image.url }}" alt="{{ album.name }}" style="width:50px;height:50px;">
                                    {% else %}
                                    Sin imágen
                                    {% endif %}
                                 </td>
                                 <td class="cell"><a href="{% url 'lyrics:detalle_album' album_id=album.id %}">{{ album.name }}</a></td>
                                 <td class="cell">{{ album.artist }}</td>
                                 <td class="cell">{{ album.year }}</td>
                              </tr>
                              {% endfor %}
                           </tbody>
                        </table>
                     </div><!--//table-responsive-->
                   </div><!--//app-card-body-->
               </div><!--//app-card-->
           </div><!--//tab-pane-->
         </div><!--//tab-content-->
      </div><!--//container-fluid-->
{% endblock %}