<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $trader->name }} - Community Profile</title>
    <script>if (localStorage.theme === 'dark') document.documentElement.classList.add('dark');</script>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
<div x-data="{ darkMode: document.documentElement.classList.contains('dark'), toggleTheme() { this.darkMode = ! this.darkMode; document.documentElement.classList.toggle('dark', this.darkMode); localStorage.theme = this.darkMode ? 'dark' : 'light'; } }">
    <x-public-navbar />
    <main class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
        <div class="rounded-lg border border-blue-100 bg-white p-8 dark:border-blue-900/50 dark:bg-slate-900">
            <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-4">
                    <x-user-avatar :user="$trader" class="h-20 w-20" />
                    <div>
                        <h1 class="text-3xl font-black text-slate-950 dark:text-white">{{ $trader->name }}</h1>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $trader->community_posts_count }} posts • {{ $trader->community_followers_count }} followers</p>
                    </div>
                </div>
                @auth
                    @if (auth()->id() !== $trader->id)
                        @if ($isFollowing)
                            <form method="POST" action="{{ route('community.traders.unfollow', $trader) }}">@csrf @method('DELETE')<button class="rounded-lg border border-blue-100 px-5 py-3 text-sm font-black text-blue-700 dark:border-blue-900 dark:text-blue-300">Unfollow</button></form>
                        @else
                            <form method="POST" action="{{ route('community.traders.follow', $trader) }}">@csrf <button class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white">Follow</button></form>
                        @endif
                    @endif
                @endauth
            </div>

            <div class="mt-8 grid gap-4 sm:grid-cols-3">
                <div class="rounded-lg bg-blue-50 p-5 dark:bg-blue-950/40"><p class="text-sm text-slate-500 dark:text-slate-400">Weekly discipline</p><p class="mt-2 text-3xl font-black text-blue-700 dark:text-blue-200">{{ $weeklyScore['score'] }}%</p></div>
                <div class="rounded-lg bg-blue-50 p-5 dark:bg-blue-950/40"><p class="text-sm text-slate-500 dark:text-slate-400">Trades this week</p><p class="mt-2 text-3xl font-black text-blue-700 dark:text-blue-200">{{ $weeklyScore['total_trades'] }}</p></div>
                <div class="rounded-lg bg-blue-50 p-5 dark:bg-blue-950/40"><p class="text-sm text-slate-500 dark:text-slate-400">Following</p><p class="mt-2 text-3xl font-black text-blue-700 dark:text-blue-200">{{ $trader->community_following_count }}</p></div>
            </div>

            <div class="mt-8">
                <h2 class="font-black text-slate-950 dark:text-white">Available Badges</h2>
                <div class="mt-3 flex flex-wrap gap-2">
                    @foreach ($badges as $badge)
                        <span class="rounded-full bg-white px-3 py-1 text-xs font-black text-blue-700 ring-1 ring-blue-100 dark:bg-slate-950 dark:text-blue-200 dark:ring-blue-900">{{ $badge->name }}</span>
                    @endforeach
                </div>
            </div>
        </div>
    </main>
</div>
</body>
</html>
