{% extends "base.html" %}
{% from "_macros_ui.html" import loading %}

{% block title %}Календарь контента{% endblock %}

{% block content %}
{% set _pid = selected_pipeline_id or "" %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">Календарь контента</h4>
    <a href="/pipelines" class="btn btn-sm btn-outline-secondary">Пайплайны</a>
</div>

{# Skeleton paints instantly; heavy aggregations load lazily via HTMX (#756). #}
<div class="row g-2 mb-3" hx-get="/calendar/fragments/stats" hx-trigger="load" hx-swap="innerHTML">
    {{ loading(class="col-12 small") }}
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form method="get" class="row g-2 align-items-end">
            <div class="col-auto">
                <label class="form-label mb-1 small">Пайплайн</label>
                <select name="pipeline_id" class="form-select form-select-sm">
                    <option value="">Все</option>
                    {% for p in pipelines %}
                    <option value="{{ p.id }}" {% if selected_pipeline_id == p.id %}selected{% endif %}>{{ p.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label mb-1 small">Период</label>
                <select name="days" class="form-select form-select-sm">
                    <option value="7" {% if days == 7 %}selected{% endif %}>7 дней</option>
                    <option value="14" {% if days == 14 %}selected{% endif %}>14 дней</option>
                    <option value="30" {% if days == 30 %}selected{% endif %}>30 дней</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-sm btn-primary">Применить</button>
            </div>
        </form>
    </div>
</div>

<div hx-get="/calendar/fragments/grid?days={{ days }}&pipeline_id={{ _pid }}" hx-trigger="load" hx-swap="innerHTML">
    {{ loading(text="Загрузка календаря…", class="small mb-4") }}
</div>

<div class="card">
    <div class="card-header py-2">
        <h6 class="mb-0">Предстоящие черновики</h6>
    </div>
    <div class="card-body p-0" hx-get="/calendar/fragments/upcoming?pipeline_id={{ _pid }}" hx-trigger="load" hx-swap="innerHTML">
        {{ loading(class="p-3 small") }}
    </div>
</div>
{% endblock %}