@if (messages().length) {
    @for (message of messages(); track message.id) {
        @if (message.userId === currentUser) {
            <div class="flex flex-row-reverse items-end">
                <div class="flex flex-col items-end">
                    <div class="px-3.5 py-2 text-sm rounded-3xl rounded-br-sm bg-violet-700 text-white">
                        {{ message.libelle }}
                    </div>
                    <span class="text-[10px] mt-0.5 mr-1">
          {{ message.sendDate | date:'HH:mm' }}
        </span>
                </div>
            </div>

        } @else {
            <div class="flex items-end gap-2">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs mb-2 bg-teal-100 text-teal-700">
                    {{ message.username.substring(0, 2) }}
                </div>
                <div class="flex flex-col">
                <span class="text-[11px] mb-1 ml-1">
                  {{ message.username }}
                </span>
                    <div class="px-3.5 py-2 text-sm rounded-3xl rounded-bl-sm border">
                        {{ message.libelle }}
                    </div>
                    <span class="text-[10px] mt-0.5 mx-1">
                  {{ message.sendDate | date:'HH:mm' }}
                </span>
                </div>
            </div>
        }
    }
} @else {
    <ion-item lines="none" class="mt-[60%]" style="--background: #F7F6F2;">
        <div class="flex flex-col items-center w-full gap-3">
            <div class="relative w-14 h-14">
                <div class="w-14 h-14 rounded-full bg-white border border-stone-200 flex items-center justify-center">
                    <ion-icon name="chatbubble-ellipses-outline" class="text-2xl text-stone-400"></ion-icon>
                </div>
                <div class="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-white border border-stone-200 flex items-center justify-center">
                    <ion-icon name="moon-outline" class="text-[10px] text-stone-400"></ion-icon>
                </div>
            </div>
            <div class="text-center flex flex-col gap-1">
                <p class="m-0 text-sm font-medium text-stone-400">C'est bien calme par ici</p>
                <p class="m-0 text-xs text-stone-300 leading-relaxed">Les messages du groupe apparaîtront ici</p>
            </div>
        </div>
    </ion-item>
}