@if (friends().length > 0) {
    <div class="rounded-xl px-5 m-3 bg-white  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"
                                   (touchstart)="setOpen(true, friend.friendId)">{{ 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"
                                   (touchstart)="setOpen(true, friend.friendId)">{{ 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>
}

<ion-modal [isOpen]="isModalOpen">
    <ng-template>
        <ion-header>
            <ion-toolbar>
                <ion-title>Profil</ion-title>
                <ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
                    <ion-back-button default-href="" (touchstart)="setOpen(false, null)"></ion-back-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding" style="--background: #f7f6f2;">
            <div class="rounded-lg px-5 m-3 bg-white border border-gray-200 grid grid-cols-3 items-center">
                <div>
                    <ion-avatar slot="start" class="w-20 h-20 p-2">
                        <img alt="Silhouette of a person's head"
                             src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
                    </ion-avatar>
                </div>
                <div class="col-span-2 py-3">
                    <ion-label class="text-[15px] font-sans font-bold block">
                        {{ selectedFriend()?.firstName }} {{ selectedFriend()?.name.charAt(0) }}.
                    </ion-label>
                    <ion-label class="text-xs font-mono block text-gray-400 mt-0.5">
                        @{{ selectedFriend()?.username }}
                    </ion-label>
                    <ion-label
                            class="text-[10px] font-sans font-semibold block mt-2 bg-gray-100 text-gray-500 rounded-full px-2 py-0.5 w-fit">
                        @if (selectedFriend().designationName) {
                            ⚡ {{ selectedFriend().designationName }}
                        } @else {
                            ⚡ En sommeil
                        }
                    </ion-label>
                </div>
            </div>

            <div class="grid grid-cols-3 px-1">
                <div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
                    <p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalChallenge }}</p>
                    <p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis réalisés</p>
                </div>
                <div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
                    <p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalWin }}</p>
                    <p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Victoires</p>
                </div>
                <div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
                    <p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalPodium }}</p>
                    <p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Podiums</p>
                </div>
            </div>

            <div class="grid grid-cols-2 px-1">
                <div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
                    <p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalBonusChallenge }}</p>
                    <p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis bonus</p>
                </div>
                <div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
                    <p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.series }}×</p>
                    <p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Séries max</p>
                </div>
            </div>

            <div class="px-1">
                <div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
                    <p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.score }}</p>
                    <p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Score global</p>
                </div>
            </div>
        </ion-content>
    </ng-template>
</ion-modal>