{% extends "base.html" %}

{% block title %}Channels{% endblock %}

{% block content %}
<div class="page-header">
    <h2>Channel Management</h2>
</div>

<div class="card">
    <h3>Add New Channel</h3>
    <form method="POST" action="{{ url_for('add_channel') }}" class="form">
        <div class="form-group">
            <label for="channel_id">Channel ID <span class="required">*</span></label>
            <input type="text" id="channel_id" name="channel_id" required
                   placeholder="UCfDNi1aEljAQ17mUrfUjkvg" class="form-control">
            <small class="form-help">Find this in the channel URL or page source</small>
        </div>

        <div class="form-group">
            <label for="channel_name">Channel Name <span class="required">*</span></label>
            <input type="text" id="channel_name" name="channel_name" required
                   placeholder="Alton Brown" class="form-control">
            <small class="form-help">Display name for the channel folder</small>
        </div>

        <button type="submit" class="btn btn-primary">Add Channel</button>
    </form>
</div>

<div class="card">
    <h3>Configured Channels</h3>
    {% if channels %}
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Channel Name</th>
                        <th>Channel ID</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for channel in channels %}
                    <tr>
                        <td><strong>{{ channel.name }}</strong></td>
                        <td><code>{{ channel.id }}</code></td>
                        <td>
                            <a href="https://www.youtube.com/channel/{{ channel.id }}"
                               target="_blank" class="btn btn-sm btn-secondary">View on YouTube</a>
                            <a href="{{ url_for('delete_channel', index=loop.index0) }}"
                               class="btn btn-sm btn-danger"
                               onclick="return confirm('Delete {{ channel.name }}? Downloaded videos will not be deleted.')">Delete</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="empty-state">
            <p>No channels configured yet. Add your first channel above to get started!</p>
        </div>
    {% endif %}
</div>

<div class="card info-card">
    <h3>How to Find Channel IDs</h3>
    <ol>
        <li>Go to the YouTube channel page</li>
        <li>Right-click and select "View Page Source" (or press Ctrl+U / Cmd+U)</li>
        <li>Search for "channelId" (Ctrl+F / Cmd+F)</li>
        <li>Copy the value that looks like: <code>UCfDNi1aEljAQ17mUrfUjkvg</code></li>
    </ol>
    <p><strong>Alternative:</strong> Some channel URLs include the ID directly:<br>
    <code>youtube.com/channel/<strong>CHANNEL_ID_HERE</strong>/videos</code></p>
</div>
{% endblock %}