{% extends "base.html" %}

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

{% block content %}
<section class="dashboard">
    <h2>Dashboard</h2>

    <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>Recent Episodes</h3>
            <p class="stat-value">Coming Soon</p>
        </div>

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

        <div class="stat-card">
            <h3>Storage Used</h3>
            <p class="stat-value">Coming Soon</p>
        </div>
    </div>

    <div class="actions">
        <h3>Quick Actions</h3>
        <div class="button-group">
            <a href="{{ url_for('podcasts.search') }}" class="btn">Search for Podcasts</a>
            <button class="btn" id="update-all">Update All Podcasts</button>
            <button class="btn" id="clean-downloads">Clean Old Downloads</button>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
    // Simple JavaScript for the buttons (to be implemented)
    document.getElementById('update-all').addEventListener('click', function() {
        alert('Update all podcasts functionality coming soon!');
    });

    document.getElementById('clean-downloads').addEventListener('click', function() {
        alert('Clean old downloads functionality coming soon!');
    });
</script>
{% endblock %}