v0.1.0

templates/partials/_spotify_item.html

@@ -0,0 +1,49 @@
+<div class="col">
+  <div class="card h-100 d-flex flex-column position-relative">
+
+    <!-- Badge: Only show if status is available (i.e., playlist has been requested) -->
+    {% if item.status %}
+    <span style="z-index: 99;" class="badge position-absolute top-0 end-0 m-2 
+        {% if item.status == 'green' %} bg-success 
+        {% elif item.status == 'yellow' %} bg-warning text-dark 
+        {% else %} bg-danger {% endif %}" data-bs-toggle="tooltip" title="{% if item.track_count > 0 %}
+        {{ item.tracks_available }} Track Available / {{ item.tracks_linked}} Tracks linked/ {{ item.track_count}} Total
+        {%endif%}
+        ">
+      {% if item.track_count > 0 %}
+      {{ item.tracks_available }} / {{ item.tracks_linked}} / {{ item.track_count}}
+      {% else %}
+      not Available
+      {% endif %}
+    </span>
+    {% endif %}
+
+    <!-- Card Image -->
+    <div style="position: relative;">
+      <img src="{{ item.image }}" class="card-img-top" alt="{{ item.name }}">
+    </div>
+
+    <!-- Card Body -->
+    <div class="card-body d-flex flex-column justify-content-between">
+      <div>
+        <h5 class="card-title">{{ item.name }}</h5>
+        <p class="card-text">{{ item.description }}</p>
+      </div>
+      <div class="mt-auto pt-3">
+        {% if item.type == 'category'%}
+        <a href="{{ item.url }}" class="btn btn-primary" data-bs-toggle="tooltip" title="View Playlists">
+          <i class="fa-solid fa-eye"></i>
+        </a>
+        {%else%}
+
+        <a href="/playlist/view/{{ item.id }}" class="btn btn-primary" data-bs-toggle="tooltip"
+          title="View Playlist details">
+          <i class="fa-solid fa-eye"></i>
+        </a>
+        {%endif%}
+        {% include 'partials/_add_remove_button.html' %}
+      </div>
+    </div>
+
+  </div>
+</div>