Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karaoke Song Selection</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="font-sans bg-gray-100">
<div class="container mx-auto my-8">
<h1 class="text-3xl font-bold mb-4">Song List</h1>
<!-- Search Form -->
<form action="{{ url_for('index') }}" method="get" class="mb-4">
<label for="search" class="sr-only">Search</label>
<input type="text" id="search" name="search" placeholder="Search by title or artist"
class="p-2 border border-gray-300 rounded">
<button type="submit" class="bg-blue-500 text-white p-2 rounded">Search</button>
</form>
<!-- Song List -->
<ul class="list-disc pl-4">
{% for song in songs %}
<li class="mb-2">
<strong>{{ song[1] }}</strong> by {{ song[2 ]}} - Play Count: {{ song[3] }}
{% if song[4] %}
{% if song[4] == 'Queued' %}
<span class="text-green-500"> - Already Queued</span>
{% elif song[4] == 'Played' %}
<span class="text-blue-500"> - Already Played</span>
{% elif song[4] == 'Rejected' %}
<span class="text-red-500"> - Rejected</span>
{% endif %}
{% endif %}
<form action="{{ url_for('add_to_queue', song_id=song[0]) }}" method="post" style="display:inline;">
<button type="submit" class="bg-green-500 text-white p-1 rounded ml-2">Add</button>
</form>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>