{% extends "base.html" %}

{% block title %}Add New Podcast{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="page-header">
    <h1 class="page-title">Add New Podcast</h1>
</div>

<!-- Search Form -->
<div class="form-container">
    <form action="{{ url_for('podcasts.search') }}" method="post">
        <div class="form-group">
            <label for="query">Search for podcasts:</label>
            <input type="text" id="query" name="query" value="{{ request.form.get('query', '') }}"
                   placeholder="Enter podcast name, author, or keywords..." required>
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
</div>

<!-- Search Results -->
{% if results %}
    <div class="content-area">
        <div style="padding: 16px; border-bottom: 1px solid #30363d; background-color: #161b22;">
            <h3 style="color: #f0f6fc; margin: 0; font-size: 14px;">Search Results ({{ results|length }})</h3>
        </div>

        <div class="search-results">
            {% for result in results %}
                <div class="search-result-item">
                    <div class="search-result-image">
                        {% if result.image_url %}
                            <img src="{{ result.image_url }}" alt="{{ result.title }}">
                        {% else %}
                            No Image
                        {% endif %}
                    </div>
                    <div class="search-result-info">
                        <div class="search-result-title">{{ result.title }}</div>
                        <div class="search-result-author">{{ result.author or 'Unknown Author' }}</div>
                        {% if result.description %}
                            <div class="search-result-description">{{ result.description }}</div>
                        {% endif %}
                        {% if result.genre %}
                            <div style="font-size: 10px; color: #7d8590; margin-top: 4px;">Genre: {{ result.genre }}</div>
                        {% endif %}
                    </div>
                    <div class="search-result-actions">
                        <form action="{{ url_for('podcasts.add', podcast_id=result.external_id) }}" method="post">
                            <button type="submit" class="btn btn-primary">Add Podcast</button>
                        </form>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% elif request.method == 'POST' %}
    <div class="empty-state">
        <h3>No Results Found</h3>
        <p>No podcasts found for your search query. Try different keywords.</p>
    </div>
{% endif %}
{% endblock %}