{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="content-header">
    <h1 class="content-title">Dashboard</h1>
    <div class="content-actions">
        <button class="btn btn-sm" id="refresh-stats">Refresh</button>
    </div>
</div>

<div class="toolbar">
    <button class="toolbar-btn" id="update-all">Update All</button>
    <button class="toolbar-btn" id="rss-sync">RSS Sync</button>
    <button class="toolbar-btn" id="clean-downloads">Clean Downloads</button>
</div>

<div class="content-area">
    <div class="stats-grid">
        <div class="stat-card">
            <h3>Total Podcasts</h3>
            <p class="stat-value">{{ total_podcasts }}</p>
        </div>

        <div class="stat-card">
            <h3>Episodes</h3>
            <p class="stat-value">0</p>
        </div>

        <div class="stat-card">
            <h3>Downloads</h3>
            <p class="stat-value">0</p>
        </div>

        <div class="stat-card">
            <h3>Storage</h3>
            <p class="stat-value">0 GB</p>
        </div>
    </div>

    <div style="padding: 1rem;">
        <h3 style="color: #cbd5e0; margin-bottom: 1rem;">Recent Activity</h3>
        <div class="empty-state" style="padding: 2rem;">
            <p>No recent activity to display.</p>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('refresh-stats').addEventListener('click', function() {
        this.textContent = 'Refreshing...';
        this.disabled = true;

        setTimeout(() => {
            this.textContent = 'Refresh';
            this.disabled = false;
        }, 1500);
    });

    document.getElementById('update-all').addEventListener('click', function() {
        this.style.backgroundColor = '#5d9cec';
        this.textContent = 'Updating...';

        setTimeout(() => {
            this.style.backgroundColor = '';
            this.textContent = 'Update All';
        }, 2000);
    });

    document.getElementById('rss-sync').addEventListener('click', function() {
        this.style.backgroundColor = '#5d9cec';
        this.textContent = 'Syncing...';

        setTimeout(() => {
            this.style.backgroundColor = '';
            this.textContent = 'RSS Sync';
        }, 1500);
    });

    document.getElementById('clean-downloads').addEventListener('click', function() {
        if (confirm('Clean old downloads?')) {
            this.style.backgroundColor = '#e74c3c';
            this.textContent = 'Cleaning...';

            setTimeout(() => {
                this.style.backgroundColor = '';
                this.textContent = 'Clean Downloads';
            }, 1000);
        }
    });
</script>
{% endblock %}