{% extends "base.html" %}

{% block title %}Videos - YottoB{% endblock %}

{% block content %}
<div class="dashboard">
    <div class="dashboard-header">
        <h2>All Videos</h2>
        <p class="video-count">{{ videos|length }} videos</p>
    </div>

    {% if videos %}
        <div class="video-grid">
            {% for video in videos %}
                <div class="video-card">
                    <a href="/watch/{{ video.id }}" class="video-thumbnail">
                        {% if video.thumbnail_url %}
                            <img src="{{ video.thumbnail_url }}" alt="{{ video.title }}">
                        {% else %}
                            <div class="thumbnail-placeholder">No Thumbnail</div>
                        {% endif %}
                        <div class="video-duration">
                            {% if video.download_status == 'completed' %}
                                <span class="badge badge-success">Downloaded</span>
                            {% elif video.download_status == 'downloading' %}
                                <span class="badge badge-info">Downloading...</span>
                            {% elif video.download_status == 'failed' %}
                                <span class="badge badge-error">Failed</span>
                            {% endif %}
                        </div>
                    </a>
                    <div class="video-info">
                        <h3 class="video-title">
                            <a href="/watch/{{ video.id }}">{{ video.title }}</a>
                        </h3>
                        <p class="video-channel">{{ video.channel.title }}</p>
                        <div class="video-meta">
                            <span class="video-date">{{ video.published_at.strftime('%b %d, %Y') }}</span>
                            {% if video.download_status != 'completed' and video.download_status != 'downloading' %}
                                <button class="btn-download" onclick="downloadVideo({{ video.id }})">Download</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <h3>No videos yet</h3>
            <p>Add a channel to start downloading videos</p>
            <a href="/add-channel" class="btn btn-primary">Add Channel</a>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
    function downloadVideo(videoId) {
        fetch(`/api/download/${videoId}`, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('Download started!');
                location.reload();
            } else {
                alert('Failed to start download: ' + data.message);
            }
        })
        .catch(error => {
            alert('Error: ' + error);
        });
    }
</script>
{% endblock %}