<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playlists – libredeck</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div class="container">
    <header>
        <h1 class="logo"><a th:href="@{/}">libre<span>deck</span></a></h1>
        <div class="header-actions">
            <span th:text="${provider}" class="provider-badge"></span>
            <a th:href="@{/auth/logout}" class="btn btn-sm">Abmelden</a>
        </div>
    </header>

    <main>
        <h2>Deine Playlists</h2>
        <p class="hint">Wähle eine Playlist aus, um ein druckfertiges PDF zu generieren.</p>

        <div class="playlist-grid">
            <div th:each="pl : ${playlists}" class="playlist-card">
                <img th:if="${pl.coverUrl != null and !pl.coverUrl.isEmpty()}"
                     th:src="${pl.coverUrl}" alt="Cover" class="playlist-cover">
                <div th:unless="${pl.coverUrl != null and !pl.coverUrl.isEmpty()}"
                     class="playlist-cover placeholder"></div>

                <div class="playlist-info">
                    <h3 th:text="${pl.title}">Playlist Name</h3>
                    <p th:text="${pl.trackCount} + ' Titel'" class="track-count"></p>
                </div>

                <a th:href="@{/generate(playlistId=${pl.id}, playlistTitle=${pl.title})}"
                   class="btn btn-generate"
                   th:title="'PDF für ' + ${pl.title} + ' generieren'">
                    PDF generieren
                </a>
            </div>
        </div>

        <div th:if="${#lists.isEmpty(playlists)}" class="empty-state">
            <p>Keine Playlists gefunden.</p>
        </div>
    </main>
</div>

<div id="loading-overlay" style="display:none">
    <div class="spinner"></div>
    <p>PDF wird generiert…</p>
</div>

<script>
    document.querySelectorAll('.btn-generate').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('loading-overlay').style.display = 'flex';
        });
    });
</script>
</body>
</html>
