{% extends "base.html" %}
{% from "_macros_ui.html" import loading %}
{% block title %}Тренды — TG Agent{% endblock %}
{% block content %}
<h1 class="h3 mb-3">Тренды</h1>

<div class="btn-group btn-group-sm mb-3" role="group">
  <a href="/analytics" class="btn btn-outline-secondary">Сообщения</a>
  <a href="/analytics/channels" class="btn btn-outline-secondary">Каналы</a>
  <a href="/analytics/trends" class="btn btn-outline-secondary active">Тренды</a>
  <a href="/analytics/content" class="btn btn-outline-secondary">Контент</a>
</div>

<div class="mb-3">
    <div class="btn-group btn-group-sm" role="group" aria-label="Период">
        <a href="/analytics/trends?days=7" class="btn btn-{% if days == 7 %}primary{% else %}outline-secondary{% endif %}">7 дней</a>
        <a href="/analytics/trends?days=14" class="btn btn-{% if days == 14 %}primary{% else %}outline-secondary{% endif %}">14 дней</a>
        <a href="/analytics/trends?days=30" class="btn btn-{% if days == 30 %}primary{% else %}outline-secondary{% endif %}">30 дней</a>
    </div>
</div>

{# Skeleton paints instantly; the NLP-heavy trend aggregations load lazily via HTMX (#756). #}
<div class="row g-4">
    <div class="col-12 col-lg-5">
        <div class="card h-100">
            <div class="card-header fw-semibold">Топ тем</div>
            <div class="card-body p-0" hx-get="/analytics/trends/fragments/topics?days={{ days }}" hx-trigger="load" hx-swap="innerHTML">
                {{ loading(class="p-3") }}
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-7">
        <div class="card mb-4">
            <div class="card-header fw-semibold">Топ каналов по просмотрам</div>
            <div class="card-body p-0" hx-get="/analytics/trends/fragments/channels?days={{ days }}" hx-trigger="load" hx-swap="innerHTML">
                {{ loading(class="p-3") }}
            </div>
        </div>

        <div class="card">
            <div class="card-header fw-semibold">Топ реакций</div>
            <div class="card-body" hx-get="/analytics/trends/fragments/emojis?days={{ days }}" hx-trigger="load" hx-swap="innerHTML">
                {{ loading() }}
            </div>
        </div>
    </div>
</div>
{% endblock %}