45 lines
1.7 KiB
HTML
45 lines
1.7 KiB
HTML
<div class="col" id="item-id-{{ item.id }}">
|
|
<div class="card shadow 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;">
|
|
<a href="/playlist/view/{{ item.id }}?provider={{provider_id}}">
|
|
|
|
<img src="{{ item.image }}" class="card-img-top" alt="{{ item.name }}">
|
|
</a>
|
|
</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">
|
|
<a href="/playlist/view/{{ item.id }}?provider={{provider_id}}" class="btn btn-primary" data-bs-toggle="tooltip"
|
|
title="View Playlist details">
|
|
<i class="fa-solid fa-eye"></i>
|
|
</a>
|
|
{% include 'partials/_add_remove_button.html' %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div> |