@if (messages().length) {
    <div class="overflow-scroll h-11/12">
        <app-messages-list [messages]="messages()"></app-messages-list>
    </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>
}

<app-message-form [groupId]="groupId()"></app-message-form>