{% extends "base.html" %}

{% block title %}Search for Podcasts{% endblock %}

{% block content %}
<section class="search">
    <h2>Search for Podcasts</h2>

    <form method="post" class="search-form">
        <div class="form-group">
            <input type="text" name="query" id="query" placeholder="Enter podcast name or keywords" required>
            <button type="submit" class="btn">Search</button>
        </div>
    </form>

    {% if results %}
        <div class="search-results">
            <h3>Search Results</h3>
            <div class="podcast-grid">
                {% for podcast in results %}
                    <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 %}
                        <h4>{{ podcast.title }}</h4>
                        <p class="author">{{ podcast.author }}</p>
                        <p class="genre">{{ podcast.genre }}</p>
                        <form action="{{ url_for('podcasts.add', podcast_id=podcast.external_id) }}" method="post">
                            <button type="submit" class="btn">Add to Library</button>
                        </form>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% elif request.method == 'POST' %}
        <div class="no-results">
            <p>No podcasts found matching your search. Try different keywords.</p>
        </div>
    {% endif %}
</section>
{% endblock %}