{% extends "_base.html" %}

{% load i18n %}
{% load static %}

{% block content %}
<div class="table-header flex justify-between">
    <h1 class="heading">{% trans 'Location Categories' %}</h1>
    {% if perms.cms.change_poicategory %}
        <a href="{% url 'new_poicategory' %}" class="btn">
            {% trans 'Create location category' %}
        </a>
    {% endif %}
</div>

<div class="table-listing">
    <table class="w-full mt-4 rounded border border-solid border-gray-200 shadow bg-white">
        <thead>
            <tr class="border-b border-solid border-gray-200">
                <th class="text-sm text-left uppercase py-3 pl-4 pr-2">{% trans 'Name' %}</th>
                <th class="text-sm text-left uppercase py-3 pl-4 pr-2">
                    <div class="lang-grid flags whitespace-nowrap">
                        {% for language in languages %}
                            <span class="fp fp-rounded fp-{{ language.primary_country_code }}"
                                  title="{{ language.translated_name }}">
                            </span>
                        {% endfor %}
                    </div>
                </th>
                <th class="text-sm text-right uppercase py-3 pr-2" title="{% trans 'Number of locations with this category' %}">{% trans 'Number of locations' %}</th>
                <th class="text-sm text-left uppercase py-3 p2-4 pr-4 min">{% trans 'Actions' %}</th>
            </tr>
        </thead>
        <tbody>
            {% for poi_category in poicategories %}
                {% include "poicategories/poicategory_list_row.html" %}
            {% empty %}
                <tr>
                    <td colspan="3" class="px-4 py-3">
                        {% trans 'No POI categories available yet.' %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% url "poicategories" as url %}
{% include "pagination.html" with chunk=page_obj %}

{% include "../generic_confirmation_dialog.html" %}
{% endblock %}