{#
 # MOLECULE: PROMPTLY CARD (vue grille)
 # Paramètre : item {prompt, favorited, isOwner}
 #}

{% set prompt     = item.prompt %}
{% set category   = prompt.categoryData %}
{% set cardColor  = category ? category.colorHex : '#6366F1' %}
{% set cardIcon   = category ? category.icon : 'magic-stick' %}
{% set authorFN   = prompt.author.firstName ?? '' %}
{% set authorLN   = prompt.author.lastName  ?? '' %}
{% set initials   = (authorFN[0] ?? '')|upper ~ (authorLN[0] ?? '')|upper %}
{% set fieldCount = prompt.fieldCount %}

<a href="/promptly/{{ prompt.id }}"
   class="relative bg-white rounded-2xl border border-gray-200 p-5 flex flex-col gap-4
           cursor-pointer shadow-sm hover:shadow-md hover:border-gray-300 transition-all duration-200"
   data-prompt-id="{{ prompt.id }}"
   data-is-owner="{{ item.isOwner ? 'true' : 'false' }}">

    {# Bouton favori — haut droite #}
    <button type="button"
            class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-xl cursor-pointer
                   transition-all duration-150
                   {{ item.favorited ? 'bg-red-50 text-red-400' : 'bg-gray-100 text-gray-400 hover:bg-red-50 hover:text-red-400' }}"
            data-controller="promptly--favorite"
            data-promptly--favorite-url-value="{{ path('app_promptly_favorite', { id: prompt.id }) }}"
            data-promptly--favorite-favorited-value="{{ item.favorited ? 'true' : 'false' }}"
            data-action="click->promptly--favorite#toggle"
            data-tooltip="{{ item.favorited ? 'Retirer des favoris' : 'Ajouter aux favoris' }}"
            data-tooltip-position="top"
            aria-label="{{ item.favorited ? 'Retirer des favoris' : 'Ajouter aux favoris' }}">
        {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'sm', color: 'current' } only %}
    </button>

    {# Ligne 1 : icône catégorie + titre + auteur — pr-10 réserve l'espace du bouton cœur #}
    <div class="flex items-start gap-3.5 pr-10">
        <div class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center"
             style="background: {{ cardColor }}1A;">
            <span class="inline-flex items-center justify-center" style="color: {{ cardColor }};">
                {% include '_atoms/icon/icon.html.twig' with { name: cardIcon, size: 'xl', color: 'current' } only %}
            </span>
        </div>
        <div class="flex-1 min-w-0">
            <h3 class="font-semibold text-[15px] text-gray-900 leading-snug line-clamp-2 tracking-tight">
                {{ prompt.title }}
            </h3>
            <div class="flex items-center gap-1.5 mt-1">
                {% if prompt.author.isAdmin() %}
                    {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'fluid', class: 'w-3 h-3 opacity-40' } only %}
                    <span class="text-[11px] text-gray-400">Bubul</span>
                {% else %}
                    <span class="text-[12px] text-gray-400 truncate">{{ (authorFN ~ ' ' ~ authorLN)|trim }}</span>
                {% endif %}
            </div>
        </div>
    </div>

    {# Description #}
    <p class="text-[13px] text-gray-500 leading-relaxed line-clamp-3 flex-1">
        {{ prompt.description ?: prompt.cleanPreview(160) }}
    </p>

    {# Footer stats #}
    <div class="flex items-center gap-3 pt-4 border-t border-gray-100 mt-auto">
        <span class="flex items-center gap-1.5 text-[13px] text-gray-400 tabular-nums cursor-default" data-tooltip="Utilisations">
            {% include '_atoms/icon/icon.html.twig' with { name: 'chart', size: 'sm', color: 'current' } only %}
            {{ prompt.usesCount }}
        </span>

        <span class="flex items-center gap-1.5 text-[13px] tabular-nums cursor-default text-gray-400" data-tooltip="Favoris">
            {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'sm', color: 'current' } only %}
            {{ item.favoritesCount ?? 0 }}
        </span>

        {% if prompt.aiModelLabel %}
            <span class="text-[11px] font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-400 truncate max-w-[100px]">
                {{ prompt.aiModelLabel }}
            </span>
        {% endif %}

        {# Date : màj si disponible, sinon création #}
        <span class="ml-auto flex items-center gap-1 text-[11px] text-gray-300 whitespace-nowrap">
            {% if prompt.updatedAt %}
                {% include '_atoms/icon/icon.html.twig' with { name: 'refresh', size: 'xs', color: 'current' } only %}
                Màj {{ prompt.updatedAt|date('d/m/y') }}
            {% else %}
                {% include '_atoms/icon/icon.html.twig' with { name: 'calendar', size: 'xs', color: 'current' } only %}
                Créé {{ prompt.createdAt|date('d/m/y') }}
            {% endif %}
        </span>
    </div>
</a>