{% extends "wagtailadmin/generic/index.html" %}
{% load wagtailadmin_tags i18n %}

{% block listing %}
    <div class="nice-padding">
        <div id="locales-list">
            <table class="listing">
                <thead>
                    <tr>
                        <th class="hostname">
                            {% if ordering == "name" %}
                                <a href="{% url 'wagtaillocales:index' %}" class="icon icon-arrow-down-after teal">
                                    {% trans "Language" %}
                                </a>
                            {% else %}
                                <a href="{% url 'wagtaillocales:index' %}?ordering=name" class="icon icon-arrow-down-after">
                                    {% trans "Language" %}
                                </a>
                            {% endif %}
                        </th>
                        <th>{% trans "Usage" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for locale in locales %}
                        <tr>
                            <td class="hostname title">
                                <div class="title-wrapper">
                                    <a href="{% url 'wagtaillocales:edit' locale.id %}">{{ locale }}</a>
                                    {% if not locale.language_code_is_valid %}
                                        {% trans "This locale's language code is not supported" as error %}
                                        {% icon name="warning" class_name="locale-error" title=error %}
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                {# TODO Make this translatable #}
                                {{ locale.num_pages }} pages{% if locale.num_others %} + {{ locale.num_others }} others{% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>

        </div>
    </div>
{% endblock %}
