@extends('layouts.app')

@section('title', 'My Dashboard')

@section('content')
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h1 class="text-2xl font-bold">My Dashboard</h1>
        <a href="{{ route('user.contents.create') }}" class="btn-primary inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold">Upload Content</a>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-xl border border-slate-200 bg-white p-4"><p class="text-xs text-slate-500">Total</p><p class="text-2xl font-bold">{{ $contentCount }}</p></div>
        <div class="rounded-xl border border-amber-200 bg-amber-50 p-4"><p class="text-xs text-amber-700">Pending</p><p class="text-2xl font-bold text-amber-700">{{ $pendingCount }}</p></div>
        <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4"><p class="text-xs text-emerald-700">Approved</p><p class="text-2xl font-bold text-emerald-700">{{ $approvedCount }}</p></div>
        <div class="rounded-xl border border-rose-200 bg-rose-50 p-4"><p class="text-xs text-rose-700">Rejected</p><p class="text-2xl font-bold text-rose-700">{{ $rejectedCount }}</p></div>
    </div>

    <div class="mt-6 rounded-xl border border-slate-200 bg-white p-4">
        <a href="{{ route('user.contents.index') }}" class="text-sm font-medium text-sky-700">Manage My Content</a>
        <span class="mx-2 text-slate-400">|</span>
        <a href="{{ route('user.notifications.index') }}" class="text-sm font-medium text-sky-700">My Notifications</a>
    </div>
@endsection