{% extends "base.html" %}

{% block content %}
<div class="page-toolbar d-flex justify-content-between align-items-center mt-2 gap-3">
    <div><div class="eyebrow mb-2">Biblioteka</div><h1 class="page-title">Programy: {{ station }}</h1></div>
    <a href="/feeds/{{ station }}.opml" class="btn btn-warning" target="_blank">OPML dla tej stacji</a>
</div>

{% if msg %}
<div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>Info:</strong> {{ msg }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

<div class="row row-cols-1 row-cols-md-2 g-3">
    {% for prog in programs %}
    <div class="col">
        <div class="card program-card h-100 text-white">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    {% if prog.image %}
                    <img src="{{ prog.image }}" class="podcast-img me-3" alt="Okładka">
                    {% endif %}
                    <h5 class="card-title program-title m-0">{{ prog.name }}</h5>
                </div>
                <p class="card-text small text-muted text-truncate mb-3">{{ prog.description or 'Brak opisu programu.' }}</p>
                <div class="mt-2 small">
                    <div><strong>Ostatni sync:</strong> {{ prog.last_catchup_str }}</div>
                    {% if station == 'rns' %}
                    <div><strong>Status backfill:</strong> 
                        {% if prog.backfill_complete or (prog.total_pages > 0 and prog.backfill_page > prog.total_pages) %}
                            <span class="text-success">✅ Zakończony</span>
                        {% elif prog.backfill_page <= 2 %}
                            {% if prog.total_eps > 0 %}
                                <span class="text-info">Catch-up wykonany; od strony 2</span>
                            {% else %}
                                <span class="text-muted">Nie rozpoczęty</span>
                            {% endif %}
                        {% else %}
                            <span class="text-warning">Strona {{ prog.backfill_page - 1 }} z {{ prog.total_pages if prog.total_pages > 0 else '?' }}</span>
                        {% endif %}
                    </div>
                    {% endif %}
                    {% if station != 'jazz' %}
                    <div><strong>Odcinki:</strong> {{ prog.total_eps }} (brak audio: {% if prog.missing_urls_count > 0 %}<span class="text-danger fw-bold">{{ prog.missing_urls_count }}</span>{% else %}0{% endif %})</div>
                    {% endif %}
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between bg-dark">
                {% if station != 'jazz' %}
                <a href="/episodes/{{ station }}/{{ prog.slug }}" class="btn btn-outline-light btn-sm">Odcinki</a>
                <form method="POST" action="/force-sync-program" style="margin:0;">
                    <input type="hidden" name="csrf" value="{{ csrf_token }}">
                    <input type="hidden" name="station" value="{{ station }}">
                    <input type="hidden" name="slug" value="{{ prog.slug }}">
                    <button class="btn btn-outline-info btn-sm" onclick="this.disabled=true; this.form.submit();">Wymuś Sync</button>
                </form>
                {% else %}
                <a href="https://podkasty.radiojazz.fm/@{{ prog.slug }}/feed.xml" target="_blank" class="btn btn-outline-light btn-sm">Oryginalny RSS</a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}