{% load i18n %}
{% if labels %}
    <ul class="list-group list-group-flush border rounded">
        {% for label in labels %}
            <li class="list-group-item d-flex justify-content-between align-items-center py-2">
                <div>
                    <span class="badge bg-{{ label.color }} text-white py-1 px-2">{{ label.name }}</span>
                </div>
                <button type="button" class="btn btn-sm text-danger border-0 p-0"
                        hx-post="{% url 'aa_kanban:delete_settings_label' label.id %}"
                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                        hx-target="#label-list-container"
                        hx-confirm="{% trans 'Delete this label permanently? It will be removed from all cards.' %}"
                        title="{% trans 'Delete label' %}">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </li>
        {% endfor %}
    </ul>
{% else %}
    <div class="alert alert-light text-center small mb-0 border">
        <em>{% trans "No global labels defined yet." %}</em>
    </div>
{% endif %}