{% load i18n localcosmos_tags %}
<div>
    <h2>{% trans "Categories" %}</h2>
    {% for category in categories %}
        <div id="ctype-{{ category|ctype_id }}-{{ category.id }}" class="mb-2">
            <span>
                {{ category.name }}
            </span>
            
            <div class="btn-group dropup">
                <button type="button" class="btn btn-outline-primary btn-xs dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {% trans 'Modify' %} <span class="caret"></span>
                </button>
                <div class="dropdown-menu">
                    <a data-url="{% url 'edit_glossary_entry_category' meta_app.id generic_content.id category.id %}" class="dropdown-item xhr" ajax-target="LargeModalContent">{% trans 'Edit' %}</a>
                    <a data-url="{% url 'delete_glossary_entry_category' meta_app.id category.id %}" class="dropdown-item xhr" ajax-target="ModalContent">{% trans 'Delete' %}</a>
                </div>
            </div>
        </div>
    {% empty %}
        <div>{% trans "No categories yet." %}</div>
    {% endfor %}

    <div class="mt-3">
        <button type="button" data-url="{% url 'add_glossary_entry_category' meta_app.id generic_content.id %}" class="btn btn-outline-primary xhr" ajax-target="LargeModalContent">{% trans 'Add category' %}</button>
    </div>
</div>