{% from "better_stats/embed_modal.html" import embed_modal with context %}
{% set content_id = (content_id_prefix if content_id_prefix is defined else "") + metric.name %}
{% set is_favorite = is_favorite if is_favorite is defined else false %}

<div class="metric-container"
     data-metric="{{ metric.name }}"
     data-content-id="{{ content_id }}"
     data-order="{{ metric.order }}"
     data-default-viz="{{ metric.default_visualization.value }}"
     data-description="{{ metric.description }}"
     style="--col-span:{{ metric.col_span }};--row-span:{{ metric.row_span }}">

    <div class="metric-card">

        {# ── Header: icon + title | actions dropdown ── #}
        <div class="metric-header">
            <span class="metric-title-group"{% if metric.description %} title="{{ metric.description }}" data-bs-toggle="tooltip" data-bs-placement="right"{% endif %}>
                <i class="{{ metric.icon }}"></i>
                <span class="metric-title">{{ metric.title }}</span>
                {% if metric.description %}
                    {% include "better_stats/svg/info.svg" %}
                {% endif %}
            </span>

            <div class="metric-control d-flex align-items-center">
                {% if not embed and not current_user.is_anonymous %}
                    <button class="btn btn-sm favorite-btn"
                            data-metric="{{ metric.name }}"
                            title="{{ _('Add to favorites') if not is_favorite else _('Remove from favorites') }}">
                        <i class="{{ 'fa fa-star fav-active' if is_favorite else 'fa-regular fa-star' }} fa-fw"></i>
                    </button>
                {% endif %}

                <button class="btn btn-sm refresh-metric" data-metric="{{ metric.name }}" title="{{ _('Refresh') }}">
                    <i class="fa fa-refresh fa-fw"></i>
                </button>

                {% if not embed %}
                    <button class="btn btn-sm share-metric" data-metric="{{ metric.name }}" title="{{ _('Copy link') }}">
                        <i class="fa fa-link fa-fw"></i>
                    </button>
                {% endif %}

                <div class="dropdown">
                    <button class="metric-actions-btn" data-bs-toggle="dropdown"
                            aria-expanded="false" title="{{ _('Actions') }}">
                        <i class="fa fa-ellipsis-v"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        {% for fmt in metric.supported_export_formats %}
                            {% if fmt != 'image' %}
                            <li>
                                <a class="dropdown-item export-btn" href="#"
                                data-metric="{{ metric.name }}" data-format="{{ fmt }}">
                                    <i class="fa fa-download me-2 fa-fw"></i>{{ _('Export') }} {{ fmt | upper }}
                                </a>
                            </li>
                            {% endif %}
                        {% endfor %}

                        {% if 'image' in metric.supported_export_formats %}
                            <li>
                                <a class="dropdown-item export-image-btn" href="#"
                                data-metric="{{ metric.name }}">
                                    <i class="fa fa-image me-2 fa-fw"></i>{{ _('Export PNG') }}
                                </a>
                            </li>
                        {% endif %}

                        {% if not embed %}
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item bstats-embed-btn" href="#"
                                data-metric="{{ metric.name }}"
                                data-bs-toggle="modal"
                                data-bs-target="#embedModal-{{ metric.name }}">
                                    <i class="fa fa-code me-2 fa-fw"></i>{{ _('Embed') }}
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>

        {# ── Pill-style viz switcher (only when >1 option) ── #}
        {% if metric.supported_visualizations | length > 1 %}
            <div class="metric-viz-switcher">
                {% for viz in metric.supported_visualizations %}
                <button class="viz-pill{% if viz.value == metric.default_visualization.value %} active{% endif %}"
                        data-type="{{ viz.value }}" data-metric="{{ metric.name }}">
                    <i class="{{ h.bs_get_viz_icon(viz.value) }}"></i>
                    {{ h.bs_get_viz_label(viz.value) }}
                </button>
                {% endfor %}
            </div>
        {% endif %}

        {# ── Visualization content (skeleton shown until JS loads data) ── #}
        <div class="metric-content" id="metric-{{ content_id }}">
            <div class="metric-skeleton">
                <div class="placeholder col-12"></div>
            </div>
        </div>

        {# ── Footer: cache age | expand ── #}
        {% if not embed %}
        <div class="metric-footer">
            <span
                class="badge badge-access badge-access-{{ metric.access_level }} d-flex gap-1 align-items-baseline"
                {% if metric.access_level == 'authenticated' %}
                    title = "{{ _('This metric is only available to authenticated users.') }}"
                {% elif metric.access_level == 'admin' %}
                    title = "{{ _('This metric is only available to sysadmins.') }}"
                {% else %}
                    title = "{{ _('This metric is publicly available.') }}"
                {% endif %}
                data-bs-toggle="tooltip"
                data-bs-placement="top">
                {% if metric.access_level == 'authenticated' %}
                    <i class="fa fa-user"></i>
                {% elif metric.access_level == 'admin' %}
                    <i class="fa fa-user-shield"></i>
                {% else %}
                    <i class="fa fa-user-secret"></i>
                {% endif %}
            </span>

            <span class="metric-cache-age" data-metric="{{ metric.name }}">{{ _("Updating...") }}</span>

            <button class="metric-expand-btn"
                    data-metric="{{ metric.name }}"
                    data-bs-toggle="modal"
                    data-bs-target="#bstats-fullscreen-modal">
                <i class="fa fa-expand me-2"></i>{{ _('Expand') }}
            </button>
        </div>
        {% endif %}

    </div>{# /.metric-card #}
</div>{# /.metric-container #}

{% if not embed %}
    {{ embed_modal(metric) }}
{% endif %}