{% load i18n %}
{% load static %}
<div class="p-4">
    <p class="uppercase font-bold">
        {% translate "Shown languages" %}
        <div class="grid grid-cols-[auto_auto_1fr] gap-x-4 items-center space-y-2">
            <input type="checkbox" id="select-all-languages" />
            <label for="select-all-languages">
                {% translate "Select all languages" %}
            </label>
        </div>
        <div class="grid grid-cols-[auto_auto_auto_1fr] gap-x-4 items-center space-y-2">
            {% for language in languages %}
                {% include "statistics/_statistics_legend_item.html" with name=language.translated_name language=language color=language.language_color %}
            {% endfor %}
        </div>
    </p>
    <div id="chart-language-toggles">
    </div>
</div>
<div class="p-4">
    <p class="uppercase font-bold">
        {% translate "Accesses" %}
    </p>
    <div class="grid grid-cols-[auto_auto_1fr] gap-x-4 items-center space-y-2">
        {% for name, color in access_legends.items %}
            {% include "statistics/_statistics_legend_item.html" with name=name color=color language=None %}
        {% endfor %}
    </div>
</div>