{#
 # Partial — Promptly bento mockup
 # Variables attendues : col (string, couleur hex de l'outil)
 #}
<div class="h-full flex flex-col">
    <div class="flex items-center gap-1.5 px-3 py-[7px] bg-white border-b border-[#E4EBF5]">
        <span class="w-2 h-2 rounded-full inline-block" style="background:#FF5F57;"></span>
        <span class="w-2 h-2 rounded-full inline-block" style="background:#FFBD2E;"></span>
        <span class="w-2 h-2 rounded-full inline-block" style="background:#28CA41;"></span>
        <span class="flex-1 text-center font-mono text-[10px] text-[#8A96A8]">promptly — bibliothèque</span>
    </div>
    <div class="flex-1 overflow-hidden p-3 flex flex-col gap-2">
        {# Barre de recherche #}
        <div class="flex items-center gap-1.5 px-2.5 py-[6px] bg-white border border-[#E4EBF5] rounded-[8px]">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            <span style="font-size:10px; color:#9CA3AF;">Rechercher un prompt...</span>
        </div>
        {# Pills de catégories #}
        <div class="flex items-center gap-1 flex-wrap">
            <span class="inline-flex items-center gap-[3px] px-[7px] py-[3px] rounded-full text-[9px] font-semibold" style="background:{{ col }}18; color:{{ col }}; border:1px solid {{ col }}30;">
                <span class="w-[5px] h-[5px] rounded-full" style="background:{{ col }};"></span>Tous
            </span>
            <span class="inline-flex items-center gap-[3px] px-[7px] py-[3px] rounded-full text-[9px] font-medium bg-white border border-[#E4EBF5]" style="color:#5A6B7F;">
                <span class="w-[5px] h-[5px] rounded-full bg-[#6366F1]"></span>Pédagogie
            </span>
            <span class="inline-flex items-center gap-[3px] px-[7px] py-[3px] rounded-full text-[9px] font-medium bg-white border border-[#E4EBF5]" style="color:#5A6B7F;">
                <span class="w-[5px] h-[5px] rounded-full bg-[#10B981]"></span>Évaluation
            </span>
            <span class="inline-flex items-center gap-[3px] px-[7px] py-[3px] rounded-full text-[9px] font-medium bg-white border border-[#E4EBF5]" style="color:#5A6B7F;">
                <span class="w-[5px] h-[5px] rounded-full bg-[#F59E0B]"></span>Rédaction
            </span>
        </div>
        {# Grille de cartes prompts #}
        <div class="grid grid-cols-2 gap-1.5 flex-1">
            {# Carte 1 #}
            <div class="bg-white border border-[#E4EBF5] rounded-[8px] p-2 flex flex-col gap-1">
                <span class="text-[8px] font-semibold px-[5px] py-[2px] rounded-[4px] self-start" style="background:#6366F118; color:#6366F1;">Pédagogie</span>
                <div class="text-[9px] font-semibold text-[#1A2B3F] leading-[1.3]">Créer un plan de cours</div>
                <div class="flex items-center justify-between mt-auto">
                    <div class="flex items-center gap-[3px]">
                        <div class="w-[14px] h-[14px] rounded-full flex items-center justify-center text-[7px] font-bold text-white" style="background:#6366F1;">M</div>
                        <span class="text-[8px] text-[#8A96A8]">Marie</span>
                    </div>
                    <div class="flex items-center gap-[3px] text-[8px] text-[#8A96A8]">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="#F59E0B"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        <span>24</span>
                    </div>
                </div>
            </div>
            {# Carte 2 #}
            <div class="bg-white border border-[#E4EBF5] rounded-[8px] p-2 flex flex-col gap-1">
                <span class="text-[8px] font-semibold px-[5px] py-[2px] rounded-[4px] self-start" style="background:#10B98118; color:#10B981;">Évaluation</span>
                <div class="text-[9px] font-semibold text-[#1A2B3F] leading-[1.3]">Générer un QCM varié</div>
                <div class="flex items-center justify-between mt-auto">
                    <div class="flex items-center gap-[3px]">
                        <div class="w-[14px] h-[14px] rounded-full flex items-center justify-center text-[7px] font-bold text-white" style="background:#10B981;">T</div>
                        <span class="text-[8px] text-[#8A96A8]">Thomas</span>
                    </div>
                    <div class="flex items-center gap-[3px] text-[8px] text-[#8A96A8]">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="#F59E0B"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        <span>17</span>
                    </div>
                </div>
            </div>
            {# Carte 3 — mise en avant (favorite) #}
            <div class="bg-white rounded-[8px] p-2 flex flex-col gap-1" style="border:1px solid {{ col }}40;">
                <span class="text-[8px] font-semibold px-[5px] py-[2px] rounded-[4px] self-start" style="background:{{ col }}18; color:{{ col }};">Rédaction</span>
                <div class="text-[9px] font-semibold text-[#1A2B3F] leading-[1.3]">Résumer un document PDF</div>
                <div class="flex items-center justify-between mt-auto">
                    <div class="flex items-center gap-[3px]">
                        <div class="w-[14px] h-[14px] rounded-full flex items-center justify-center text-[7px] font-bold text-white" style="background:{{ col }};">L</div>
                        <span class="text-[8px] text-[#8A96A8]">Lucie</span>
                    </div>
                    <div class="flex items-center gap-[3px] text-[8px]" style="color:{{ col }};">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="{{ col }}"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        <span>31</span>
                    </div>
                </div>
            </div>
            {# Carte 4 #}
            <div class="bg-white border border-[#E4EBF5] rounded-[8px] p-2 flex flex-col gap-1">
                <span class="text-[8px] font-semibold px-[5px] py-[2px] rounded-[4px] self-start" style="background:#6366F118; color:#6366F1;">Pédagogie</span>
                <div class="text-[9px] font-semibold text-[#1A2B3F] leading-[1.3]">Adapter le niveau CECRL</div>
                <div class="flex items-center justify-between mt-auto">
                    <div class="flex items-center gap-[3px]">
                        <div class="w-[14px] h-[14px] rounded-full flex items-center justify-center text-[7px] font-bold text-white bg-[#8B5CF6]">A</div>
                        <span class="text-[8px] text-[#8A96A8]">Arnaud</span>
                    </div>
                    <div class="flex items-center gap-[3px] text-[8px] text-[#8A96A8]">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="#D1D5DB"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        <span>9</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>