{% extends 'base.html' %}
{% block title %}{{ playlist.name }} · Playlist · KALYMATT® YT{% endblock %}
{% block content %}
<section class="page-head"><div><span class="eyebrow">PLAYLIST</span><h1>{{ playlist.name }}</h1><p>{{ playlist.description or 'Musique et vidéo dans une même séquence.' }}</p></div><a class="secondary" href="{{ url_for('playlists_center') }}">Toutes les playlists</a></section>
<section class="playlist-editor-grid">
  <div class="panel">
    <h2>Paramètres</h2><form method="post" action="{{ url_for('playlist_update', playlist_id=playlist.id) }}" class="playlist-form"><input type="hidden" name="_csrf" value="{{ csrf }}"><label>Nom<input name="name" value="{{ playlist.name }}" maxlength="180" required></label><label>Description<textarea name="description" maxlength="500" rows="3">{{ playlist.description }}</textarea></label><button class="primary" type="submit">Enregistrer</button></form>
    <hr><form method="post" action="{{ url_for('playlist_delete', playlist_id=playlist.id) }}" onsubmit="return confirm('Supprimer cette playlist ?');"><input type="hidden" name="_csrf" value="{{ csrf }}"><button class="danger-text" type="submit">Supprimer la playlist</button></form>
  </div>
  <div class="panel"><h2>Ajouter un média</h2><form method="post" action="{{ url_for('playlist_add_item', playlist_id=playlist.id) }}" class="playlist-form"><input type="hidden" name="_csrf" value="{{ csrf }}"><label>Fichier<select name="video_id" required><option value="">Choisir…</option>{% for m in media %}<option value="{{ m.id }}">{{ m.title }} · {{ m.extension|upper }}</option>{% endfor %}</select></label><button class="primary" type="submit">Ajouter à la fin</button></form></div>
</section>

<section class="panel playlist-player" data-playlist-player>
  <div class="playlist-player-head"><div><span class="eyebrow">LECTEUR PLAYLIST</span><h2>Lecture enchaînée</h2></div><div class="playlist-player-controls"><button type="button" class="primary" data-playlist-play>Lire depuis le début</button><button type="button" class="secondary" data-playlist-stop>Arrêter</button></div></div>
  <div class="playlist-stage" data-playlist-stage><div class="playlist-screen" data-playlist-slot="a"></div><div class="playlist-screen" data-playlist-slot="b"></div><div class="playlist-now" data-playlist-now>Prêt</div></div>
  <div class="playlist-progress"><span data-playlist-index>0 / {{ items|length }}</span><span data-playlist-transition></span></div>
</section>

<section class="panel"><div class="section-head"><div><span class="eyebrow">ORDRE DE LECTURE</span><h2>{{ items|length }} élément{% if items|length != 1 %}s{% endif %}</h2></div></div>
<div class="playlist-items" data-playlist-items>
{% for item in items %}<article class="playlist-item" data-playlist-item data-title="{{ item.title|e }}" data-ext="{{ item.extension|lower }}" data-stream="{{ url_for('stream_saved', video_id=item.video_id) }}" data-transition="{{ item.transition_type }}" data-transition-seconds="{{ item.transition_seconds }}">
  <div class="playlist-position">{{ loop.index }}</div><div class="playlist-item-main"><strong>{{ item.title }}</strong><span>{{ item.extension|upper }} · {{ (item.size_bytes / 1048576)|round(1) }} Mo</span></div>
  <div class="playlist-item-order"><form method="post" action="{{ url_for('playlist_item_move', playlist_id=playlist.id, item_id=item.id) }}"><input type="hidden" name="_csrf" value="{{ csrf }}"><input type="hidden" name="direction" value="up"><button type="submit" title="Monter">↑</button></form><form method="post" action="{{ url_for('playlist_item_move', playlist_id=playlist.id, item_id=item.id) }}"><input type="hidden" name="_csrf" value="{{ csrf }}"><input type="hidden" name="direction" value="down"><button type="submit" title="Descendre">↓</button></form></div>
  <form method="post" action="{{ url_for('playlist_item_transition', playlist_id=playlist.id, item_id=item.id) }}" class="playlist-transition-form"><input type="hidden" name="_csrf" value="{{ csrf }}"><label>Transition vers le suivant<select name="transition_type"><option value="none" {% if item.transition_type=='none' %}selected{% endif %}>Aucune</option><option value="fade" {% if item.transition_type=='fade' %}selected{% endif %}>Fondu sortie/entrée</option><option value="crossfade" {% if item.transition_type=='crossfade' %}selected{% endif %}>Fondu enchaîné</option></select></label><label>Durée<input type="number" name="transition_seconds" value="{{ item.transition_seconds }}" min="0" max="10" step="0.5"> s</label><button type="submit">Appliquer</button></form>
  <form method="post" action="{{ url_for('playlist_item_delete', playlist_id=playlist.id, item_id=item.id) }}"><input type="hidden" name="_csrf" value="{{ csrf }}"><button class="danger-text" type="submit">Retirer</button></form>
</article>{% else %}<div class="empty-state"><h3>Playlist vide</h3><p>Ajoutez un fichier audio ou vidéo.</p></div>{% endfor %}
</div></section>
{% endblock %}
{% block scripts %}<script src="{{ url_for('static', filename='playlist.js') }}?v=20260911r42" defer></script>{% endblock %}