{% extends "layouts/base.html" %}

{% load static %} 

{% block title %}Playlist Not Found{% endblock %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Playlist Not Found</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'playlists:list_playlist' %}">Playlists</a></li>
            <li class="breadcrumb-item active" aria-current="page">Not Found</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-6 col-md-8">
        <div class="card">
            <div class="card-body text-center py-5">
                <div class="mb-4">
                    <i class="fe fe-search display-1 text-muted"></i>
                </div>
                <h1 class="display-4 text-muted mb-3">404</h1>
                <h4>Playlist Not Found</h4>
                <p class="text-muted mb-4">
                    The playlist you're looking for doesn't exist or you don't have permission to view it.
                </p>
                
                <div class="d-flex justify-content-center gap-3 flex-wrap">
                    <a href="{% url 'playlists:list_playlist' %}" class="btn btn-primary">
                        <i class="fe fe-list me-2"></i>
                        View All Playlists
                    </a>
                    <a href="{% url 'playlists:new_playlist' %}" class="btn btn-success">
                        <i class="fe fe-plus me-2"></i>
                        Create New Playlist
                    </a>
                    <a href="{% url 'core:dashboard' %}" class="btn btn-secondary">
                        <i class="fe fe-home me-2"></i>
                        Go to Dashboard
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Helpful suggestions -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fe fe-help-circle me-2"></i>
                    What you can do:
                </h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="fe fe-check-circle text-success me-2"></i>
                        Check if the playlist ID is correct
                    </li>
                    <li class="mb-2">
                        <i class="fe fe-check-circle text-success me-2"></i>
                        Verify you have permission to access this playlist
                    </li>
                    <li class="mb-2">
                        <i class="fe fe-check-circle text-success me-2"></i>
                        Browse all your playlists to find the one you need
                    </li>
                    <li class="mb-0">
                        <i class="fe fe-check-circle text-success me-2"></i>
                        Create a new playlist if the old one was deleted
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}