Newer
Older
<!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 Queue</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">Karaoke Song Queue</h1>
<ul class="list-disc pl-4">
{% for song in queue %}
<li class="mb-2">
<strong>{{ song[1] }}</strong> by {{ song[2] }} - Play Count: {{ song[3] }} - Status: {{ song[4] }}
<form action="{{ url_for('remove_from_queue', queue_id=song[0]) }}" method="post" style="display:inline;">
<button type="submit" class="bg-red-500 text-white p-1 rounded ml-2">Remove</button>
</form>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>