{% extends "base.html" %}

{% block title %}Add Video - YottoB{% endblock %}

{% block content %}
<div class="add-video-page">
    <div class="page-header">
        <h2>Add Individual Video</h2>
        <p>Add a specific YouTube video to your library</p>
    </div>

    <div class="form-container">
        <form method="POST" action="/add-video" class="channel-form">
            <div class="form-group">
                <label for="video_url">YouTube Video URL</label>
                <input
                    type="url"
                    id="video_url"
                    name="video_url"
                    placeholder="https://www.youtube.com/watch?v=VIDEO_ID"
                    required
                    class="form-input"
                >
                <small class="form-help">
                    Enter the full YouTube video URL.
                </small>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Add Video</button>
                <a href="/" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>

    <div class="help-section">
        <h3>How to add a video</h3>
        <ol>
            <li>Go to the YouTube video you want to add</li>
            <li>Copy the URL from your browser's address bar</li>
            <li>Paste it into the form above</li>
            <li>Click "Add Video"</li>
        </ol>

        <h4>Supported URL formats</h4>
        <ul>
            <li><code>https://www.youtube.com/watch?v=VIDEO_ID</code></li>
            <li><code>https://youtu.be/VIDEO_ID</code></li>
        </ul>

        <h4>Note</h4>
        <p>YouTube Shorts are not supported and will be rejected.</p>
    </div>
</div>
{% endblock %}