{% load i18n %}

{% if metric.result_type == 'table' %}
    <div
        class="admins-dashboard-table-metric admins-dashboard-status-{{ metric.status }}"
        data-chassis-live-widget="{{ metric.slug }}"
        data-chassis-live-type="metric"
        data-etag="{{ metric.etag }}"
    >
        <h3 data-live-label>{{ metric.label }}</h3>
        <div class="admins-dashboard-table-wrapper">
            <table>
                {% if metric.columns %}
                    <thead>
                        <tr>
                            {% for column in metric.columns %}
                                <th scope="col">{{ column }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                {% endif %}
                <tbody data-live-table-body>
                    {% for row in metric.value %}
                        <tr>
                            {% for cell in row %}
                                <td>{{ cell }}</td>
                            {% endfor %}
                        </tr>
                    {% empty %}
                        <tr>
                            <td{% if metric.columns %} colspan="{{ metric.columns|length }}"{% endif %}>
                                {% translate "Нет данных" %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% elif metric.result_type == 'stacked_items' %}
    <div
        class="admins-dashboard-stacked-metric admins-dashboard-status-{{ metric.status }}"
        data-chassis-live-widget="{{ metric.slug }}"
        data-chassis-live-type="metric"
        data-etag="{{ metric.etag }}"
    >
        <div class="admins-dashboard-stacked-list" data-live-stacked-list>
            {% for item in metric.value %}
                <article
                    class="admins-dashboard-stacked-item admins-dashboard-stacked-item-tone-{{ item.tone }}"
                    data-stacked-key="{{ item.key }}"
                    data-stacked-tone="{{ item.tone }}"
                >
                    <div class="admins-dashboard-stacked-primary">
                        <span class="admins-dashboard-stacked-title" data-live-stacked-title>{{ item.title }}</span>
                        <span class="admins-dashboard-stacked-percentage" data-live-stacked-primary>{{ item.primary_value }}</span>
                    </div>
                    <div class="admins-dashboard-stacked-secondary" data-live-stacked-secondary>{{ item.secondary_value }}</div>
                </article>
            {% empty %}
                <p class="admins-dashboard-stacked-empty" data-live-stacked-empty>{% translate "Нет данных" %}</p>
            {% endfor %}
        </div>
    </div>
{% else %}
    <dl
        class="admins-dashboard-metric admins-dashboard-status-{{ metric.status }}"
        data-chassis-live-widget="{{ metric.slug }}"
        data-chassis-live-type="metric"
        data-etag="{{ metric.etag }}"
    >
        <dt data-live-label>{{ metric.label }}</dt>
        <dd data-live-value>{{ metric.value }}</dd>
    </dl>
{% endif %}