{% with chart=section.items.0 %}
    <section
        class="admins-dashboard-chart-card admins-dashboard-status-{{ chart.status }}"
        data-dashboard-chart-card
        data-chassis-live-section="{{ section.name }}"
        data-chassis-live-widget="{{ chart.slug }}"
        data-chassis-live-type="chart"
        data-etag="{{ chart.etag }}"
        {% if section.fetched_at %}data-fetched-at="{{ section.fetched_at }}"{% endif %}
    >
        <header class="admins-dashboard-chart-header">
            <h2 data-live-label>{{ chart.label }}</h2>
            <span data-live-period>{{ chart.period_label }}</span>
        </header>
        <div class="admins-dashboard-chart-value" data-live-value>
            {{ chart.value }}{% if chart.unit %}<small data-live-unit>{{ chart.unit }}</small>{% endif %}
        </div>
        {% if chart.series|length > 1 and chart.has_data %}
            <div class="admins-dashboard-chart-legend" data-live-legend>
                {% for series in chart.series %}
                    <span class="admins-dashboard-chart-legend-{{ series.color }}">{{ series.label }}</span>
                {% endfor %}
            </div>
        {% endif %}
        {% if chart.payload and chart.has_data %}
            {{ chart.payload|json_script:chart.payload_id }}
            <div
                class="admins-dashboard-chart"
                data-dashboard-chart
                data-dashboard-chart-type="{{ chart.chart_type }}"
                data-dashboard-chart-payload-id="{{ chart.payload_id }}"
                data-dashboard-chart-slug="{{ chart.slug }}"
                role="img"
                aria-label="{{ chart.label }}"
            ></div>
        {% else %}
            <div class="admins-dashboard-chart-empty" data-live-chart-empty>Нет данных</div>
        {% endif %}
    </section>
{% endwith %}