{% extends 'ohmyadmin/metrics/base.html' %}

{% block content %}
    <div class="flex justify-between">
        <div data-test="partition-table">
            {% for label, partition in partitions %}
                <div class="flex items-center gap-2 text-xs text-gray-700">
                    <div class="dot dot-sm" style="background: {{ partition.color }}"></div>
                    <div>{{ label }}</div>
                </div>
            {% endfor %}
        </div>
        <div>
            <script type="application/json" id="{{ metric.slug }}">{{ partitions.groups|tojson }}</script>
            <x-partition-metric-chart series="{{ metric.slug }}"></x-partition-metric-chart>
        </div>
    </div>
{% endblock %}
