<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Profile') }}
        </h2>
    </x-slot>

    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
        <div class="flex flex-row gap-4 flex-wrap">
            <!-- Profile Image -->
            <div class="p-2 bg-white dark:bg-neutral-800 shadow rounded-lg flex-none">
                @if($user->avatar)
                <img class="w-28 h-28 rounded-lg m-2" src="https://external-content.duckduckgo.com/iu/?u=https://cdn.discordapp.com/avatars/{{ $user->id }}/{{ $user->avatar }}.webp" alt="{{ $user->global_name ?? $user->username }} Avatar">
                @else
                <img class="w-24 h-24 rounded-lg m-2" src="/images/default-avatar.webp" alt="{{ $user->global_name ?? $user->username }} Avatar">
                @endif
            </div>

            <!-- Joined -->
            <div class="p-4 sm:p-8 bg-white dark:bg-neutral-800 shadow rounded-lg content-center text-center grow">
                <div class="inline-block rounded-md text-sky-500">
                    <i class="fa-solid fa-clock text-3xl"></i>
                </div>
                <h5 class="font-medium  dark:text-neutral-300">
                    Joined {{ $user->created_at->format('Y-m') }}
                </h5>
            </div>

            <!-- View Count -->
            <div class="p-4 sm:p-8 bg-white dark:bg-neutral-800 shadow rounded-lg content-center text-center grow">
                <a href="{{ route('user.watched') }}">
                    <div class="inline-block rounded-md text-sky-500">
                        <i class="fa-solid fa-eye text-3xl"></i>
                    </div>
                    <h5 class="font-medium  dark:text-neutral-300">
                        {{ number_format($user->watched->count()) }} views
                    </h5>
                </a>
            </div>

            <!-- Comment Count -->
            <div class="p-4 sm:p-8 bg-white dark:bg-neutral-800 shadow rounded-lg content-center text-center grow">
                <a href="{{ route('profile.comments') }}">
                    <div class="inline-block rounded-md text-sky-500">
                        <i class="fa-solid fa-comment text-3xl"></i>
                    </div>
                    <h5 class="font-medium  dark:text-neutral-300">
                        {{ number_format($user->commentCount()) }} comments
                    </h5>
                </a>
            </div>

            <!-- Likes -->
            <div class="p-4 sm:p-8 bg-white dark:bg-neutral-800 shadow rounded-lg content-center text-center grow">
                <a href="{{ route('profile.likes') }}">
                    <div class="inline-block rounded-md text-sky-500">
                        <i class="fa-solid fa-heart text-3xl"></i>
                    </div>
                    <h5 class="font-medium  dark:text-neutral-300">
                        {{ number_format($user->likes()) }} likes
                    </h5>
                </a>
            </div>

            <!-- Playlists -->
            <div class="p-4 sm:p-8 bg-white dark:bg-neutral-800 shadow rounded-lg content-center text-center grow">
                <a href="{{ route('profile.playlists') }}">
                    <div class="inline-block rounded-md text-sky-500">
                        <i class="fa-solid fa-rectangle-list text-3xl"></i>
                    </div>
                    <h5 class="font-medium  dark:text-neutral-300">
                        {{ number_format($user->playlists->count()) }} playlists
                    </h5>
                </a>
            </div>
        </div>
    </div>
</x-app-layout>