<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>RTube - Edit Playlist</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 600px;
                margin: 0 auto;
                padding: 20px;
                background-color: #1a1a1a;
                color: #fff;
            }
            .header {
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 30px;
            }
            .back-link {
                color: #888;
                text-decoration: none;
                font-size: 14px;
            }
            .back-link:hover {
                color: #fff;
            }
            h1 {
                margin: 0;
            }
            .form-group {
                margin-bottom: 20px;
            }
            label {
                display: block;
                margin-bottom: 8px;
                font-size: 14px;
                color: #aaa;
            }
            input[type="text"], textarea {
                width: 100%;
                padding: 12px;
                border: 1px solid #444;
                border-radius: 5px;
                background-color: #2a2a2a;
                color: #fff;
                font-size: 14px;
                box-sizing: border-box;
            }
            input[type="text"]:focus, textarea:focus {
                outline: none;
                border-color: #4CAF50;
            }
            textarea {
                min-height: 100px;
                resize: vertical;
            }
            .btn-submit {
                padding: 12px 24px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                transition: background-color 0.2s;
            }
            .btn-submit:hover {
                background-color: #45a049;
            }
            .flash-messages {
                margin-bottom: 20px;
            }
            .flash-message {
                padding: 12px;
                border-radius: 4px;
                margin-bottom: 10px;
                font-size: 14px;
            }
            .flash-error {
                background-color: #5c1a1a;
                color: #ff6b6b;
                border: 1px solid #8B0000;
            }
            footer {
                margin-top: 50px;
                padding-top: 20px;
                border-top: 1px solid #333;
                text-align: center;
                color: #666;
                font-size: 12px;
            }
            .char-counter {
                text-align: right;
                font-size: 12px;
                color: #888;
                margin-top: 5px;
            }
            .char-counter.warning {
                color: #ff9800;
            }
            .char-counter.limit {
                color: #ff4444;
            }
        </style>
        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">

</head>
    <body>
        <div class="header">
            <a href="{{ url_for('playlists.view', playlist_id=playlist.id) }}" class="back-link">&larr; Back to Playlist</a>
            <h1>Edit Playlist</h1>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="flash-messages">
            {% for category, message in messages %}
            <div class="flash-message flash-{{ category }}">{{ message }}</div>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}

        <form method="post">
            <div class="form-group">
                <label for="name">Playlist Name *</label>
                <input type="text" id="name" name="name" required maxlength="255" value="{{ playlist.name }}">
            </div>
            <div class="form-group">
                <label for="description">Description (optional)</label>
                <textarea id="description" name="description" maxlength="5000">{{ playlist.description or '' }}</textarea>
                <div class="char-counter"><span id="char-count">0</span> / 5000</div>
            </div>
            <button type="submit" class="btn-submit">Save Changes</button>
        </form>

        <script>
            const description = document.getElementById('description');
            const charCount = document.getElementById('char-count');
            const charCounter = document.querySelector('.char-counter');

            function updateCharCount() {
                const count = description.value.length;
                charCount.textContent = count;

                charCounter.classList.remove('warning', 'limit');
                if (count >= 5000) {
                    charCounter.classList.add('limit');
                } else if (count >= 4500) {
                    charCounter.classList.add('warning');
                }
            }

            description.addEventListener('input', updateCharCount);
            updateCharCount();
        </script>

        <footer>RTube v{{ rtube_version }}</footer>
    </body>
</html>
