@if (proofs().length > 0) {
    @if (!modal) {
        <div class="bg-white rounded-lg p-2 shadow-sm border border-gray-200 overflow-scroll max-h-full">
            <div class="grid grid-cols-4 gap-3">
                @for (p of proofs(); track p) {
                    <img [src]="'data:image/jpeg;base64,' + p.proof"
                         class="w-20 h-20 object-cover"
                         alt=""
                         (click)="openProof(p.proof)"
                    />
                }
            </div>
        </div>
    } @else {
        <div class="fixed inset-0 flex items-center justify-center z-50" (click)="closeProof()">
            <button class="absolute top-15 right-1 text-gray-300 text-4xl font-bold p-5 bg-transparent"
                    (click)="closeProof()">
                <ion-icon name="close-circle-outline"></ion-icon>
            </button>

            <img [src]="'data:image/jpeg;base64,' + selectedProof()"
                 class="w-[90%] h-[90%] object-cover rounded-md mt-10"
                 alt=""
            />

        </div>
    }
} @else {
    <ion-item lines="none" class="border border-stone-200 rounded-xl m-3" style="--background: #fafaf8;">
        <div class="flex flex-col items-center w-full px-5 py-8 gap-3">
            <div class="w-10 h-10 rounded-full bg-stone-100 border border-stone-200 flex items-center justify-center">
                <ion-icon name="image" style="color:#a8a090; font-size:20px;"></ion-icon>
            </div>
            <div class="text-center">
                <p class="m-0 text-sm font-medium text-stone-400">C'est bien vide par ici...</p>
                <p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Participe à des défis pour remplir ta galerie
                    !</p>
            </div>
        </div>
    </ion-item>
}