{#
metrics - flat list of accessible MetricBase instances (kept for compat).
groups  - list of (MetricGroup, [MetricBase]) tuples, in display order.
         The first entry is always the favorites group.
user_favorites - set of favorited metric names (empty set for anonymous users).
#}

<div class="module">
    <div class="p-3">

        {# ── Toolbar ── #}
        <div class="bstats-toolbar">
            <div class="bstats-search">
                <i class="fa fa-search bstats-search-icon"></i>
                <input type="text" id="bstats-metric-search"
                       placeholder="{{ _('Filter metrics\u2026') }}">
            </div>

            <div class="ms-auto d-flex gap-2">
                <button class="btn btn-dashboard" id="bstats-theme-toggle" title="{{ _('Toggle dark mode') }}">
                    <i class="fa fa-moon"></i>
                </button>

                <button class="btn btn-dashboard" id="refresh-all">
                    <i class="fa fa-refresh"></i> {{ _('Refresh All') }}
                </button>
                {% if h.check_access('better_stats_view_settings') %}
                    <a href="{{ h.url_for('better_stats_settings.settings') }}" class="btn btn-dashboard">
                        <i class="fa fa-cog"></i> {{ _('Settings') }}
                    </a>
                {% endif %}
            </div>
        </div>

        {# ── Group filter pills ── #}
        <div class="bstats-group-filter" id="bstats-group-filter">
            <button class="bstats-group-pill active" data-group="all">
                <i class="fa fa-list"></i>
                {{ _("All") }}
            </button>

            {% for group, _ in groups %}
                <button class="bstats-group-pill" data-group="{{ group.name }}">
                    {% if group.icon %}<i class="{{ group.icon }}"></i>{% endif %}
                    {{ group.label }}
                </button>
            {% endfor %}
        </div>

        {# ── Group sections ── #}
        {% for group, group_metrics in groups %}
            <div class="bstats-group-section {% if not loop.last %}mb-2{% endif %}" data-group="{{ group.name }}" id="bstats-section-{{ group.name }}">

                <div class="bstats-group-header">
                    <button class="bstats-group-toggle" type="button"
                            data-group="{{ group.name }}" aria-expanded="true">
                        <i class="fa fa-chevron-down bstats-group-chevron"></i>
                        {% if group.icon %}<i class="{{ group.icon }} ms-1 text-muted"></i>{% endif %}
                        <span class="bstats-group-label">{{ group.label }}</span>
                        <span class="badge badge-dashboard ms-2 bstats-group-count">{{ group_metrics|length }}</span>
                    </button>
                </div>

                <div class="stats-grid {% if group.name == 'favorites' and not group_metrics %}is-collapsed{% endif %}" id="bstats-grid-{{ group.name }}">
                    {% if group.name == 'favorites' %}
                        {# Favorites section: special empty / anon states #}
                        {% if current_user.is_anonymous %}
                            <div class="bstats-fav-empty col-span-full">
                                <i class="fa-regular fa-star"></i>
                                <p class="mb-0">
                                    <a href="{{ h.url_for('user.login', came_from=request.full_path) }}">{{ _('Log in') }}</a>
                                    {{ _('to add metrics to your favorites.') }}
                                </p>
                            </div>
                        {% elif not group_metrics %}
                            <div class="bstats-fav-empty col-span-full">
                                <p class="mb-0">
                                    {{ _('No favorites yet — click the') }}
                                    <i class="fa-regular fa-star"></i>
                                    {{ _('on any metric to add it here.') }}
                                </p>
                            </div>
                        {% else %}
                            {% for metric in group_metrics %}
                                {% snippet 'better_stats/metric_card.html', metric=metric, is_favorite=true, content_id_prefix="fav-" %}
                            {% endfor %}
                        {% endif %}
                    {% else %}
                        {% for metric in group_metrics %}
                            {% snippet 'better_stats/metric_card.html', metric=metric, is_favorite=(metric.name in user_favorites) %}
                        {% endfor %}
                    {% endif %}
                </div>

            </div>
        {% endfor %}

        {# ── Global empty state ── #}
        <div class="bstats-no-results" id="bstats-no-results" style="display:none">
            <i class="fa fa-search"></i>
            <p class="mb-0">{{ _('No metrics match your search.') }}</p>
        </div>

    </div>
</div>

{# ── Single fullscreen modal (reused for all metrics) ── #}
<div class="modal fade" id="bstats-fullscreen-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered bstats-fullscreen-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bstats-fullscreen-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="{{ _('Close') }}"></button>
            </div>
            <div class="modal-body p-3">
                <div id="bstats-fullscreen-content"></div>
            </div>
        </div>
    </div>
</div>