From 166d69f57831137eb9935cf19228d238179b812e Mon Sep 17 00:00:00 2001
From: Celestino Rey <creylopez@yahoo.es>
Date: Thu, 20 Jun 2024 17:05:28 +0200
Subject: [PATCH] Lista de canciones en tabla

---
 LyricsPy/static/style.css      | 32 ++++++++++++++++++++++++++++++++
 LyricsPy/templates/index.html  | 29 ++++++++++++++++++++++-------
 LyricsPy/templates/search.html | 25 ++++++++++++++++++-------
 3 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/LyricsPy/static/style.css b/LyricsPy/static/style.css
index 7257314..9754aa0 100644
--- a/LyricsPy/static/style.css
+++ b/LyricsPy/static/style.css
@@ -117,3 +117,35 @@ pre {
 .tabcontent.active {
     display: block;
 }
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+}
+
+table, th, td {
+    border: 1px solid #ddd;
+}
+
+th, td {
+    padding: 10px;
+    text-align: left;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+a {
+    color: #007BFF;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
\ No newline at end of file
diff --git a/LyricsPy/templates/index.html b/LyricsPy/templates/index.html
index 1dac9b7..82736fc 100644
--- a/LyricsPy/templates/index.html
+++ b/LyricsPy/templates/index.html
@@ -8,13 +8,28 @@
 
 <div id="Songs" class="tabcontent">
     <h2>Song List</h2>
-    <ul>
-        {% for song in songs %}
-        <li>
-            <a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }} by {{ song.author }}</a>
-        </li>
-        {% endfor %}
-    </ul>
+    {% if songs %}
+    <table>
+        <thead>
+            <tr>
+                <th>Title</th>
+                <th>Author</th>
+                <th>Album</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for song in songs %}
+            <tr>
+                <td><a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }}</a></td>
+                <td>{{ song.author }}</td>
+                <td><a href="{{ url_for('album', album_id=song.album.id) }}">{{ song.album.name }}</a></td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    {% else %}
+        <p>No songs found.</p>
+    {% endif %}
 </div>
 
 <div id="Albums" class="tabcontent">
diff --git a/LyricsPy/templates/search.html b/LyricsPy/templates/search.html
index 9062a1d..2031564 100644
--- a/LyricsPy/templates/search.html
+++ b/LyricsPy/templates/search.html
@@ -4,13 +4,24 @@
 <h2>Search Results for "{{ query }}"</h2>
 
 {% if songs %}
-    <ul>
-        {% for song in songs %}
-        <li>
-            <a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }} by {{ song.author }}</a>
-        </li>
-        {% endfor %}
-    </ul>
+    <table>
+        <thead>
+            <tr>
+                <th>Title</th>
+                <th>Author</th>
+                <th>Album</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for song in songs %}
+            <tr>
+                <td><a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }}</a></td>
+                <td>{{ song.author }}</td>
+                <td><a href="{{ url_for('album', album_id=song.album.id) }}">{{ song.album.name }}</a></td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
 {% else %}
     <p>No songs found matching your query.</p>
 {% endif %}