@if (friends().length > 0) {
    <div class="rounded-3xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
        <ion-list>
            @for (friend of friends(); track friend.friendId; let i = $index) {
                @if (i == friends().length - 1) {
                    <ion-item lines="none">
                        <ion-avatar slot="start" class="w-5 h-5">
                            <img alt="Silhouette of a person's head"
                                 src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
                        </ion-avatar>
                        <ion-label class="text-xs font-mono font-bold">{{ friend.username }}</ion-label>
                        <ion-label class="text-xs font-mono text-gray-400">{{ friend.score }} <em>pts</em></ion-label>
                        <ion-button fill="clear" (touchstart)="deleteFriend(friend.friendId)">
                            <ion-icon slot="icon-only" name="close" class="text-red-600"></ion-icon>
                        </ion-button>
                    </ion-item>
                } @else {
                    <ion-item lines="full">
                        <ion-avatar slot="start" class="w-5 h-5">
                            <img alt="Silhouette of a person's head"
                                 src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
                        </ion-avatar>
                        <ion-label class="text-xs font-mono font-bold">{{ friend.username }}</ion-label>
                        <ion-label class="text-xs font-mono text-gray-400">{{ friend.score }} <em>pts</em></ion-label>
                        <ion-button fill="clear" (touchstart)="deleteFriend(friend.friendId)">
                            <ion-icon slot="icon-only" name="close" class="text-red-600"></ion-icon>
                        </ion-button>
                    </ion-item>
                }
            }
        </ion-list>
    </div>
} @else {
    <div class="flex justify-center items-center p-4">
        <p class="text-center text-sm italic text-gray-500 font-serif">
            C'est plus marrant à plusieurs, ajoute des amis !
        </p>
    </div>
}