{#
 # Fragment: Monalisia Infographic Card
 # NE PAS étendre base.html.twig — utilisé via include et renderView()
 # Requiert: infographic (MonalisiaInfographic)
 #}

<div id="infographic-{{ infographic.id }}"
     class="group mn-card-wrap relative break-inside-avoid mb-5 rounded-2xl overflow-hidden shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl cursor-pointer"
     data-infographic-id="{{ infographic.id }}"
     data-infographic-url="{{ infographic.url }}"
     data-infographic-name="{{ infographic.displayName | e('html_attr') }}"
     data-infographic-format="{{ infographic.formatLabel }}"
     data-infographic-date="{{ infographic.formattedDate }}"
     data-infographic-download-url="{{ path('app_monalisia_download', {id: infographic.id}) }}"
     data-infographic-delete-url="{{ path('app_monalisia_delete', {id: infographic.id}) }}"
     data-infographic-csrf="{{ csrf_token('delete-infographic-' ~ infographic.id) }}"
     data-infographic-rename-csrf="{{ csrf_token('rename-infographic-' ~ infographic.id) }}"
     data-infographic-prompt="{{ infographic.prompt | e('html_attr') }}"
     data-infographic-tokens="{{ infographic.tokensUsed ? infographic.tokensUsed|format_tokens : '' }}"
     data-infographic-energy="{{ infographic.tokensUsed and infographic.energyConsumptionWh ? infographic.energyConsumptionWh|format_energy : '' }}"
     data-action="click->monalisia--generator#openLightbox">

    <img src="{{ infographic.url }}"
         alt="{{ infographic.displayName }}"
         class="w-full block"
         loading="lazy">

</div>