{% extends "base.html" %}

{%block content%}

<div class="container">

    <div class="header">
        <img src="/static/images/favicon-32x32.png" alt="Weatherify logo">
        <h1>Weatherify</h1>
    </div>

    <hr>

    <div class="box">
        <div class="meta-row">
            <span class="meta-label">Playlist</span>
            <span class="meta-value">{{ playlist_name }}</span>
        </div>

        <form method="POST" action="{{ url_for('playlist.update', id=playlist_id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="open-btn" aria-label="Refresh tracks">🔄 Refresh tracks</button>
        </form>
            <!-- DELETE (CRUD DELETE) -->
         <form method="POST" action="{{ url_for('playlist.delete',id=playlist_id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="delete-btn" aria-label="delete playlist"> Delete playlist</button>
        </form>

        <a href="{{ playlist_url }}" target="_blank" class="open-btn">
            Open in Spotify
        </a>

        <div class="tracks">
            <span class="tracks-label">Tracks ({{ tracks_count }})</span>
            <ul>
                {% for name in track_names %}
                    <li>{{ name }}</li>
                {% endfor %}
            </ul>
        </div>

        <a href="{{ url_for('playlist.home') }}" class="open-btn">
            ← Back
        </a>
    </div> 
</div>

{% endblock %}