{% 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="channel_id">YouTube Channel ID</label>
                <input
                    type="text"
                    id="channel_id"
                    name="channel_id"
                    placeholder="UC_x5XG1OV2P6uZZ5FSM9Ttw"
                    required
                    class="form-input"
                >
                <small class="form-help">
                    Enter the YouTube channel ID (starts with UC or UU).
                </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 ID</h3>
        <ol>
            <li>Go to the YouTube channel page</li>
            <li>Look at the URL in your browser</li>
            <li>If the URL is <code>youtube.com/channel/CHANNEL_ID</code>, copy the CHANNEL_ID part</li>
            <li>If the URL is <code>youtube.com/@username</code>, you'll need to:
                <ul>
                    <li>Right-click the page and select "View Page Source"</li>
                    <li>Search for "channelId" or "browse_id"</li>
                    <li>Copy the ID that starts with "UC"</li>
                </ul>
            </li>
        </ol>

        <h4>Example</h4>
        <p>
            For channel URL: <code>https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw</code><br>
            Channel ID: <code>UC_x5XG1OV2P6uZZ5FSM9Ttw</code>
        </p>
    </div>
</div>
{% endblock %}