{% load i18n el_pagination_tags localcosmos_tags %}
{% paginate 10 category.polygons as polygons %}
<div>
    <div>
        {% for polygon in polygons %}
            <div id="ctype-{{ polygon|ctype_id }}-{{ polygon.id }}">
                <div>
                    {{ polygon }}
                </div>
                <div class="btn-group dropup">
                    <button type="button" class="btn btn-xs btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {% trans 'manage' %}
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item xhr" href="{% url 'geography:edit_polygon' app.uid category.id polygon.id %}" ajax-target="LargeModalContent">{% trans 'edit' %}</a>
                        <a class="dropdown-item xhr" href="{% url 'geography:delete_polygon' app.uid category.id polygon.id %}" ajax-target="ModalContent">{% trans 'delete' %}</a>
                    </div>
                </div>

            </div>
        {% empty %}
            <div>{% trans "No polygons available." %}</div>
        {% endfor %}
    </div>
    <div class="mt-3">
        <button type="button" class="btn btn-sm btn-outline-primary xhr" data-url="{% url 'geography:add_polygon' app.uid category.id %}" ajax-target="LargeModalContent">{% trans "Add Polygon" %}</button>
    </div>
</div>

<p>
    {% show_pages %}
</p>