{% extends "base.html" %}

{% block title %}heartbeats | manage playlists{% endblock %}

{% block extrahead %}
<style>
.playlists * {
	padding: 0.5em;
}

.playlist {
	display: flex;
	justify-content: space-between;
	align-content: last baseline;
}

.playlist .name {
	width: 50%;
}

.playlist .actions a { padding: 0; }
.playlist .actions {
	display: flex;
	justify-content: space-between;
	flex-grow: 1;
}

.playlist:nth-child(even) {
  background-color: var(--bg-lc);
}

.playlists .actions a { padding: 0; }

span {
	height: fit-content;
}
</style>
{% endblock %}

{% block body %}
<h1><span style="color: #1db954">manage</span> playlists</h1>
<div class="playlists">
{% for playlist in playlists %}
<div class="playlist">
	<span class="name" title="{{playlist['name']}} ({{playlist['id']}})">{{playlist['name']}}</span>
	<div class="actions">
		<a href="?playlist_id={{playlist['id']}}&playlist_name={{playlist['name']}}&action=delete">delete</a>
		<a href="?playlist_id={{playlist['id']}}&playlist_name={{playlist['name']}}&action=unlink">unlink without deleting</a>
	</div>
</div>
{% endfor %}
</div>

<!--a href="..">home</a-->

{% endblock %}