{% extends "base.html" %}

{% block title %}Your Podcasts{% endblock %}

{% block content %}
<section class="podcasts">
    <div class="section-header">
        <h2>Your Podcasts</h2>
        <a href="{{ url_for('podcasts.search') }}" class="btn">Search for Podcasts</a>
    </div>

    {% if podcasts %}
        <div class="podcast-grid">
            {% for podcast in podcasts %}
                <div class="podcast-card">
                    {% if podcast.image_url %}
                        <img src="{{ podcast.image_url }}" alt="{{ podcast.title }}">
                    {% else %}
                        <div class="no-image">No Image</div>
                    {% endif %}
                    <h3>{{ podcast.title }}</h3>
                    <p class="author">{{ podcast.author }}</p>
                    <div class="podcast-actions">
                        <a href="{{ url_for('podcasts.view', podcast_id=podcast.id) }}" class="btn">View Episodes</a>
                        <form action="{{ url_for('podcasts.delete', podcast_id=podcast.id) }}" method="post" onsubmit="return confirm('Are you sure you want to delete this podcast?');">
                            <button type="submit" class="btn btn-danger">Delete</button>
                        </form>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <p>You haven't added any podcasts yet.</p>
            <a href="{{ url_for('podcasts.search') }}" class="btn">Search for Podcasts</a>
        </div>
    {% endif %}
</section>
{% endblock %}