wtf

templates/album/show.html.twig

@@ -11,7 +11,19 @@
         <div class="card-body">
           <h5 class="card-title mb-1">{{ album.name }}</h5>
           <div class="text-secondary mb-2">{{ album.artists|map(a => a.name)|join(', ') }}</div>
-          <p class="text-secondary mb-2">Released {{ album.release_date }} • {{ album.total_tracks }} tracks</p>
+          {% set release_text = album.release_date is defined and album.release_date ? album.release_date : 'Not provided' %}
+          {% set track_count = album.total_tracks is defined and album.total_tracks ? album.total_tracks : 0 %}
+          {% set track_text = track_count > 0 ? track_count ~ ' tracks' : 'Track count unknown' %}
+          <p class="text-secondary mb-2">
+            Released {{ release_text }} • {{ track_text }}
+            {% if album.source is defined and album.source == 'user' %}
+              <br>
+              <small>
+                Added{{ albumOwner ? ' by ' ~ (albumOwner.displayName ?? albumOwner.userIdentifier) : '' }}
+                {% if albumCreatedAt %}on {{ albumCreatedAt|date('Y-m-d') }}{% endif %}
+              </small>
+            {% endif %}
+          </p>
           <p class="mb-2"><strong>User score:</strong> {{ avg }}/10 ({{ count }})</p>
           {% if album.external_urls.spotify %}
             <a class="btn btn-outline-success btn-sm" href="{{ album.external_urls.spotify }}" target="_blank" rel="noopener">Open in Spotify</a>
@@ -38,6 +50,46 @@
       </div>
     </div>
     <div class="col-md-8">
+      {% if tracks is defined and tracks is not empty %}
+        <div class="card mb-4">
+          <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <h2 class="h5 mb-0">Tracklist</h2>
+              <span class="text-secondary">{{ tracks|length }} tracks</span>
+            </div>
+            <div class="mui-table-wrapper w-100">
+              <table class="mui-table mui-table--compact mui-table--striped mb-0">
+                <thead>
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Title</th>
+                    <th scope="col" class="text-end">Duration</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for track in tracks %}
+                    <tr>
+                      <td class="mui-table__number">{{ track.disc > 1 ? track.disc ~ '.' : '' }}{{ track.track }}</td>
+                      <td>
+                        <div class="d-flex align-items-center gap-2">
+                          <div class="mui-table__title">{{ track.name }}</div>
+                          {% if track.preview_url %}
+                            <a class="mui-icon-button" href="{{ track.preview_url }}" target="_blank" rel="noopener" title="Preview track">
+                              &#9658;
+                            </a>
+                          {% endif %}
+                        </div>
+                      </td>
+                      <td class="text-end mui-table__metric">{{ track.duration_label }}</td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      {% endif %}
+
       <div class="d-flex justify-content-between align-items-center mb-2">
         <h2 class="h5 mb-0">Reviews</h2>
       </div>