{% extends "base.html" %}

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

{% block content %}
<!-- Page Header -->
<div class="page-header">
    <h1 class="page-title">Podcasts</h1>
    <div class="page-actions">
        <a href="{{ url_for('podcasts.search') }}" class="btn btn-primary">Add New</a>
    </div>
</div>

<!-- Toolbar -->
<div class="toolbar">
    <button class="toolbar-btn primary" onclick="updateAllPodcasts()">Update All</button>
    <button class="toolbar-btn" onclick="refreshPage()">Refresh</button>
    <div style="margin-left: auto;">
        <span class="toolbar-btn">{{ podcasts|length }} Podcasts</span>
    </div>
</div>

<!-- Content Area -->
<div class="content-area">
    {% if podcasts %}
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width: 60px;"></th>
                    <th>Title</th>
                    <th>Author</th>
                    <th style="width: 100px;">Episodes</th>
                    <th style="width: 120px;">Last Updated</th>
                    <th style="width: 80px;">Status</th>
                    <th style="width: 120px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for podcast in podcasts %}
                <tr>
                    <td class="cell-center">
                        {% if podcast.image_url %}
                            <img src="{{ podcast.image_url }}" alt="{{ podcast.title }}"
                                 style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">
                        {% else %}
                            <div style="width: 40px; height: 40px; background-color: #30363d; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #7d8590;">
                                No Image
                            </div>
                        {% endif %}
                    </td>
                    <td>
                        <div class="cell-title">
                            <a href="{{ url_for('podcasts.view', podcast_id=podcast.id) }}">{{ podcast.title }}</a>
                        </div>
                    </td>
                    <td>
                        <div class="cell-secondary">{{ podcast.author or 'Unknown' }}</div>
                    </td>
                    <td class="cell-center">
                        <span class="status-badge status-active">{{ podcast.episodes.count() }}</span>
                    </td>
                    <td class="cell-center">
                        <div class="cell-secondary">
                            {% if podcast.last_updated %}
                                {{ podcast.last_updated.strftime('%Y-%m-%d') }}
                            {% else %}
                                Never
                            {% endif %}
                        </div>
                    </td>
                    <td class="cell-center">
                        {% if podcast.episodes.count() > 0 %}
                            <span class="status-badge status-active">Active</span>
                        {% else %}
                            <span class="status-badge status-pending">Pending</span>
                        {% endif %}
                    </td>
                    <td class="cell-actions">
                        <form action="{{ url_for('podcasts.update', podcast_id=podcast.id) }}" method="post" style="display: inline;">
                            <button type="submit" class="btn btn-sm">Update</button>
                        </form>
                        <form action="{{ url_for('podcasts.delete', podcast_id=podcast.id) }}" method="post"
                              style="display: inline; margin-left: 4px;"
                              onsubmit="return confirm('Are you sure you want to delete this podcast?');">
                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="empty-state">
            <h3>No Podcasts Found</h3>
            <p>You haven't added any podcasts yet.</p>
            <a href="{{ url_for('podcasts.search') }}" class="btn btn-primary">Add Your First Podcast</a>
        </div>
    {% endif %}
</div>

<script>
function updateAllPodcasts() {
    // Call the API to update all podcasts
    fetch('/api/podcasts/update-all', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        // Show success message
        alert(data.message);
    })
    .catch(error => {
        // Show error message
        alert('Error updating podcasts: ' + error.message);
    });
}

function refreshPage() {
    window.location.reload();
}
</script>
{% endblock %}