{# templates/_shared/document/_badge.html.twig #}

<div class="badge-container d-inline-block" data-type="{{ targetType }}" data-id="{{ targetId }}">
    <span class="badge {{ color|default('bg-info') }} shadow-sm open-media-modal js-document-badge" 
          id="badge-{{ targetType }}-{{ targetId }}"
          
          style="cursor: pointer; transition: transform 0.2s;"
          onmouseover="this.style.transform='scale(1.05)'"
          onmouseout="this.style.transform='scale(1)'"
          
          {# Identifiants techniques #}
          data-target-type="{{ targetType }}" 
          data-target-id="{{ targetId }}"
          
          {# Stockage du style pour la mise à jour AJAX (évite le reset par défaut) #}
          data-label="{{ label|default('Médias') }}"
          data-color="{{ color|default('bg-info') }}"
          data-icon="{{ icon|default('fa-paperclip') }}"
          
          {# Informations contextuelles pour la modale #}
          data-projet-nom="{{ projetNom|default('') }}"
          data-lot-nom="{{ lotNom|default('') }}"
          data-etape-nom="{{ etapeNom|default('') }}"
          data-media-type="{{ targetType ends with '_IMG' ? 'Images' : 'Documents' }}"
          
          {# URL pour charger le gestionnaire #}
          data-url="{{ path('shared_doc_manager', {
              'targetType': targetType, 
              'targetId': targetId,
              'pName': projetNom|default(''),
              'lName': lotNom|default(''),
              'eName': etapeNom|default('')
          }) }}"
    >
        <i class="fas {{ icon|default('fa-paperclip') }} me-1"></i> 
        
        <span class="js-badge-label">{{ label|default('Médias') }}</span>
        
        <span class="badge bg-white text-dark ms-1 opacity-75 js-document-count">
            {{ count|default(0) }}
        </span>
    </span>
</div>