{% extends "base.html" %}

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

{% block content %}
<div class="downloads-page">
    <div class="page-header">
        <h2>Download Jobs</h2>
        <p>View and manage all video downloads</p>
    </div>

    {% if videos %}
        <div class="downloads-list">
            {% for video in videos %}
            <div class="download-card">
                <div class="download-thumbnail">
                    {% if video.thumbnail_url %}
                        <img src="{{ video.thumbnail_url }}" alt="{{ video.title }}">
                    {% else %}
                        <div class="thumbnail-placeholder">No thumbnail</div>
                    {% endif %}
                </div>

                <div class="download-info">
                    <h3 class="download-title">
                        <a href="/watch/{{ video.id }}">{{ video.title }}</a>
                    </h3>
                    <p class="download-channel">{{ video.channel.title }}</p>
                    <div class="download-meta">
                        <span class="download-date">Published: {{ video.published_at.strftime('%Y-%m-%d') }}</span>
                        {% if video.download_started_at %}
                            <span class="download-date">Started: {{ video.download_started_at.strftime('%Y-%m-%d %H:%M') }}</span>
                        {% endif %}
                        {% if video.download_completed_at %}
                            <span class="download-date">Completed: {{ video.download_completed_at.strftime('%Y-%m-%d %H:%M') }}</span>
                        {% endif %}
                    </div>
                </div>

                <div class="download-status-section">
                    {% if video.download_status.value == 'completed' %}
                        <span class="badge badge-success">Completed</span>
                        {% if video.file_size %}
                            <span class="download-size">{{ (video.file_size / 1024 / 1024) | round(2) }} MB</span>
                        {% endif %}
                    {% elif video.download_status.value == 'downloading' %}
                        <span class="badge badge-info">Downloading...</span>
                    {% elif video.download_status.value == 'failed' %}
                        <span class="badge badge-error">Failed</span>
                        {% if video.download_error %}
                            <p class="download-error">{{ video.download_error }}</p>
                        {% endif %}
                    {% else %}
                        <span class="badge badge-info">Pending</span>
                    {% endif %}
                </div>

                <div class="download-actions">
                    {% if video.download_status.value == 'pending' or video.download_status.value == 'failed' %}
                        <form method="POST" action="/api/download/{{ video.id }}" style="display: inline;">
                            <button type="submit" class="btn btn-primary">Download</button>
                        </form>
                    {% elif video.download_status.value == 'completed' %}
                        <a href="/watch/{{ video.id }}" class="btn btn-primary">Watch</a>
                        <a href="/api/video/stream/{{ video.id }}?download=1" class="btn btn-secondary">Download File</a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <h3>No Videos Yet</h3>
            <p>Subscribe to channels to see videos here.</p>
            <a href="/add-channel" class="btn btn-primary">Add Channel</a>
        </div>
    {% endif %}
</div>
{% endblock %}