@extends('layouts.app')

@section('title', 'Dashboard')

@push('styles')
<link rel="preload" as="image" href="{{ asset('assets/images/cinematic/hero/stadium_arena_hero.webp') }}">
@endpush

@section('content')
@php
    $dashboard = $dashboard ?? [
        'stats' => [],
        'games' => [],
        'events' => [],
        'liveMatches' => [],
        'topPlayers' => [],
        'community' => config('navigation.community'),
    ];
@endphp

<div class="dashboard-grid" data-dashboard>
    <div class="dashboard-main">
        <x-dashboard.hero :stats="$dashboard['stats']" />
        <x-dashboard.popular-games :games="$dashboard['games']" />
        <x-dashboard.upcoming-events :events="$dashboard['events']" />
    </div>

    <aside class="dashboard-rail" aria-label="Live updates">
        <x-dashboard.live-matches :matches="$dashboard['liveMatches']" />
        <x-dashboard.top-players :players="$dashboard['topPlayers']" />
        <x-dashboard.community-card :community="$dashboard['community'] ?? null" />
    </aside>
</div>
@endsection

@push('scripts')
@vite('resources/js/dashboard.js')
@endpush
