{% load i18n %}

{% if histogram %}
    <div class="histogram card border-secondary-subtle mb-3">
        <div class="card-body py-2">
            <div class="d-flex justify-content-between text-secondary small mb-2">
                <span>{% trans "Distribution" %}</span>
                <span>{% trans "By" %} {{ histogram.granularity }}</span>
            </div>
            <div class="histogram-bars">
                {% for bucket in histogram.buckets %}
                    <div class="histogram-bucket" title="{{ bucket.label }}: {{ bucket.count }}" data-bs-toggle="tooltip">
                        <div class="histogram-bar" style="height: {{ bucket.height_pct }}%;"></div>
                    </div>
                {% endfor %}
            </div>
            <div class="d-flex justify-content-between text-secondary small mt-2">
                <span>{{ histogram.start_label }}</span>
                <span>{{ histogram.end_label }}</span>
            </div>
        </div>
    </div>
{% endif %}