{#
 # Fragment: Pixia Image Card
 # NE PAS étendre base.html.twig — utilisé via include et renderView()
 # Requiert: image (PixiaImage)
 # Design: image seule, toute l'info est dans la lightbox (pattern Monalisia)
 #}

<div id="pixia-{{ image.id }}"
     class="group 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-image-id="{{ image.id }}"
     data-image-url="{{ image.url }}"
     data-image-title="{{ image.title | default('') | e('html_attr') }}"
     data-image-prompt="{{ image.prompt | e('html_attr') }}"
     data-image-style="{{ image.styleLabel }}"
     data-image-format="{{ image.formatLabel }}"
     data-image-date="{{ image.formattedDate }}"
     data-image-tokens="{{ image.tokensUsed ? image.tokensUsed|format_tokens : '' }}"
     data-image-energy="{{ image.tokensUsed and image.energyConsumptionWh ? image.energyConsumptionWh|format_energy : '' }}"
     data-image-download-url="{{ path('app_pixia_download', { id: image.id }) }}"
     data-image-delete-url="{{ path('app_pixia_delete', { id: image.id }) }}"
     data-image-csrf="{{ csrf_token('delete-pixia-' ~ image.id) }}"
     data-image-rename-csrf="{{ csrf_token('rename-pixia-' ~ image.id) }}"
     data-image-rename-url="{{ path('app_pixia_rename', { id: image.id }) }}"
     data-action="click->pixia--generator#openLightbox">

    <img src="{{ image.url }}"
         alt="{{ image.promptPreview | e('html_attr') }}"
         class="w-full block"
         loading="lazy">

</div>