{% extends "base.html" %}

{% block title %}Create Playlist{% endblock %}

{% block extra_css %}
<style>
    .form-page {
        max-width: 560px;
        margin: 0 auto;
    }

    .form-page h1 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 6px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100%;
        padding: 10px 14px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        color: var(--text-primary);
        font-size: 14px;
        font-family: inherit;
    }

    .form-group textarea {
        min-height: 80px;
        resize: vertical;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
        outline: none;
        border-color: var(--accent);
    }

    .form-group small {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: var(--text-muted);
    }

    .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
    }

    .btn-submit {
        padding: 10px 28px;
        background: var(--accent);
        color: #000;
        border: none;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .btn-submit:hover { background: var(--accent-hover); }

    .btn-cancel {
        padding: 10px 20px;
        background: var(--bg-card);
        color: var(--text-secondary);
        border: 1px solid var(--border);
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
    }

    .btn-cancel:hover { border-color: var(--text-muted); }
</style>
{% endblock %}

{% block content %}
<div class="form-page">
    <h1>Create Playlist</h1>

    <form method="POST" action="{{ P }}/playlists/new">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" id="title" name="title" maxlength="200" required placeholder="My Awesome Playlist">
        </div>

        <div class="form-group">
            <label for="description">Description</label>
            <textarea id="description" name="description" maxlength="2000" placeholder="What's this playlist about?"></textarea>
        </div>

        <div class="form-group">
            <label for="visibility">Visibility</label>
            <select id="visibility" name="visibility">
                <option value="public">Public - Anyone can see it</option>
                <option value="unlisted">Unlisted - Only people with the link</option>
                <option value="private">Private - Only you can see it</option>
            </select>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-submit" aria-label="Create new playlist">Create Playlist</button>
            <a href="{{ P }}/" class="btn-cancel">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}
