{#
    Komponent: tag_manager.twig
    Użycie:
        {% include 'operational_framework/components/tag_manager.twig' with {
            entity_type: 'checklist',
            entity_id:   checklist.getId(),
            entity_tags: checklist.getTags()
        } %}

    Parametry:
        entity_type  — 'checklist' | 'task' | 'training' | 'procedure' | 'competency'
        entity_id    — int, ID encji
        entity_tags  — array tagów przypisanych do encji [ {id, name, color}, ... ]
#}
<div class="of-tag-manager"
     data-entity-type="{{ entity_type }}"
     data-entity-id="{{ entity_id }}">

    {# Przypisane tagi #}
    <div class="of-tags-list d-inline-flex flex-wrap gap-1 align-items-center">
        {% for tag in entity_tags %}
            <span class="of-tag-badge badge d-inline-flex align-items-center gap-1"
                  data-tag-id="{{ tag.id ?? tag['id'] }}"
                  style="background-color: {{ tag.color ?? tag['color'] }}; color: #fff; font-size: 0.7rem; padding: 3px 8px; border-radius: 12px;">
                {{ tag.name ?? tag['name'] }}
                <button type="button"
                        class="of-tag-remove btn-close btn-close-white"
                        style="font-size: 0.55rem; margin-left: 2px;"
                        aria-label="{{ translations.tag_remove }}"
                        data-tag-id="{{ tag.id ?? tag['id'] }}"></button>
            </span>
        {% endfor %}

        {# Przycisk dodania tagu #}
        <button type="button"
                class="of-tag-add-btn btn btn-outline-secondary d-inline-flex align-items-center"
                style="font-size: 0.7rem; padding: 2px 8px; border-radius: 12px; border-style: dashed;"
                title="{{ translations.tag_add }}">
            <i class="bi bi-tag me-1" style="font-size: 0.7rem;"></i>
            <span class="of-tag-add-label">{{ translations.tag_label }}</span>
        </button>
    </div>

    {# Dropdown do wyboru / tworzenia tagów #}
    <div class="of-tag-dropdown card shadow-sm"
         style="display:none; position:absolute; z-index:1050; min-width:220px; padding:10px;">
        <input type="text"
               class="form-control form-control-sm of-tag-search mb-2"
               placeholder="{{ translations.tag_search_placeholder }}"
               autocomplete="off">
        <div class="of-tag-options" style="max-height:180px; overflow-y:auto;"></div>
        <div class="of-tag-create-hint text-muted mt-1" style="font-size:0.72rem; display:none;">
            {{ translations.tag_create_hint }}
        </div>
    </div>
</div>