{% extends "base.html" %}

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

{% block content %}
<div class="add-channel-page">
    <div class="page-header">
        <h2>Add New Channel</h2>
        <p>Subscribe to a YouTube channel to download and track videos</p>
    </div>

    <div class="form-container">
        <form method="POST" action="/add-channel" class="channel-form">
            <div class="form-group">
                <label for="rss_url">YouTube Channel RSS URL</label>
                <input
                    type="url"
                    id="rss_url"
                    name="rss_url"
                    placeholder="https://www.youtube.com/feeds/videos.xml?channel_id=..."
                    required
                    class="form-input"
                >
                <small class="form-help">
                    Enter the RSS feed URL for the YouTube channel.
                    Format: https://www.youtube.com/feeds/videos.xml?channel_id=CHANNEL_ID
                </small>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Subscribe & Fetch Videos</button>
                <a href="/channels" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>

    <div class="help-section">
        <h3>How to find a channel's RSS URL</h3>
        <ol>
            <li>Go to the YouTube channel page</li>
            <li>Look at the URL in your browser - it will contain the channel ID</li>
            <li>The channel URL format is usually:
                <ul>
                    <li><code>youtube.com/channel/CHANNEL_ID</code> or</li>
                    <li><code>youtube.com/@username</code> (you'll need to find the channel ID from the page source)</li>
                </ul>
            </li>
            <li>Use the format: <code>https://www.youtube.com/feeds/videos.xml?channel_id=CHANNEL_ID</code></li>
        </ol>

        <h4>Example</h4>
        <p>
            For channel: <code>https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw</code><br>
            RSS URL: <code>https://www.youtube.com/feeds/videos.xml?channel_id=UC_x5XG1OV2P6uZZ5FSM9Ttw</code>
        </p>
    </div>
</div>
{% endblock %}