{% load i18n %}

<div class="d-flex flex-wrap align-items-center gap-2">
    {% for label in card.labels.all %}
        <span class="badge bg-{{ label.color }} text-white border d-flex align-items-center gap-1 py-1 px-2" style="font-size: 0.8rem;">
            <span>{{ label.name }}</span>
            {% if can_write %}
                <button type="button"
                        class="btn-close btn-close-white ms-1"
                        style="font-size: 0.5rem;"
                        title="{% trans 'Remove label' %}"
                        hx-post="{% url 'aa_kanban:toggle_label' card.id %}"
                        hx-vals='{"label_id": "{{ label.id }}"}'
                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                        hx-target="#card-labels-container">
                </button>
            {% endif %}
        </span>
    {% empty %}
        <span class="text-muted small"><em>{% trans "No labels" %}</em></span>
    {% endfor %}

    {% if can_write %}
        <div class="dropdown d-inline-block">
            <button class="btn btn-secondary btn-sm dropdown-toggle py-0 px-2"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                    style="font-size: 0.75rem;">
                <i class="fas fa-plus me-1"></i>{% trans "Label" %}
            </button>
            <ul class="dropdown-menu shadow-sm" style="min-width: 200px;">
                {% if available_labels %}
                    {% for label in available_labels %}
                        <li>
                            <button class="dropdown-item small d-flex justify-content-between align-items-center"
                                    type="button"
                                    hx-post="{% url 'aa_kanban:toggle_label' card.id %}"
                                    hx-vals='{"label_id": "{{ label.id }}"}'
                                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                    hx-target="#card-labels-container">
                                <span>{{ label.name }}</span>
                                <span class="badge bg-{{ label.color }} rounded-pill" style="width: 15px; height: 15px;">&nbsp;</span>
                            </button>
                        </li>
                    {% endfor %}
                {% else %}
                    <li>
                        <span class="dropdown-item-text small text-muted text-wrap">
                            {% trans "No labels created yet. Use 'Manage Labels' on the board page to create them." %}
                        </span>
                    </li>
                {% endif %}
            </ul>
        </div>
    {% endif %}
</div>