@extends('layouts.app')
@section('content')
<div class="space-y-5">
    <div class="flex items-end justify-between gap-4">
        <div><p class="eyebrow">{{ now()->format('l, M j') }}</p><h1 class="mt-2 text-3xl font-black tracking-tight">Hello, {{ str($user->name)->before(' ') }}</h1><p class="mt-1 text-sm text-slate-500">Your bot workspace is ready.</p></div>
        <span class="hidden h-11 w-11 items-center justify-center rounded-2xl bg-teal-50 text-teal-700 sm:flex"><x-icon name="sparkles" size="20" /></span>
    </div>
    <section class="dashboard-hero p-5 sm:p-7"><div class="relative z-10 flex items-start justify-between gap-4"><div><p class="text-[10px] font-black uppercase tracking-[0.18em] text-teal-700">Workspace pulse</p><p class="mt-3 text-4xl font-black tracking-[-0.07em] text-ink">{{ $user->active_bots_count }}</p><p class="mt-1 text-sm text-slate-500">bots running</p></div><span class="inline-flex items-center gap-1.5 rounded-full bg-white/75 px-3 py-2 text-[10px] font-black text-teal-700 shadow-sm"><span class="h-1.5 w-1.5 rounded-full bg-teal-500"></span> LIVE</span></div><div class="relative z-10 mt-7 flex h-12 items-end gap-2"><span class="h-3 w-2 rounded-t bg-blue-300"></span><span class="h-6 w-2 rounded-t bg-blue-400"></span><span class="h-5 w-2 rounded-t bg-teal-300"></span><span class="h-9 w-2 rounded-t bg-teal-500"></span><span class="h-7 w-2 rounded-t bg-violet-300"></span><span class="h-12 w-2 rounded-t bg-violet-500"></span><span class="h-8 w-2 rounded-t bg-blue-400"></span></div></section>
    <div class="grid grid-cols-2 gap-3"><div class="app-card p-5"><p class="text-sm text-slate-500">Total bots</p><p class="mt-4 text-3xl font-black text-teal-600">{{ $user->bots_count }}</p><p class="mt-1 text-xs text-slate-400">Connected workspace</p></div><div class="app-card p-5"><p class="text-sm text-slate-500">Published templates</p><p class="mt-4 text-3xl font-black text-violet-600">{{ $templates->count() }}</p><p class="mt-1 text-xs text-slate-400">Ready to use</p></div></div>
    <section><div class="mb-3 flex items-center justify-between"><h2 class="text-xl font-black tracking-tight">Quick actions</h2></div><div class="grid grid-cols-2 gap-3"><a href="{{ route('bots.create') }}" class="app-card flex items-center gap-3 p-4 transition hover:-translate-y-0.5 hover:border-teal-300"><span class="premium-icon-tile h-11 w-11 shrink-0"><x-icon name="plus" size="22" /></span><span class="text-sm font-black">New bot</span></a><a href="{{ route('bots.create') }}" class="app-card flex items-center gap-3 p-4 transition hover:-translate-y-0.5 hover:border-teal-300"><span class="premium-icon-tile violet h-11 w-11 shrink-0"><x-icon name="template" size="21" /></span><span class="text-sm font-black">Templates</span></a><a href="{{ route('bots.index') }}" class="app-card flex items-center gap-3 p-4 transition hover:-translate-y-0.5 hover:border-teal-300"><span class="premium-icon-tile h-11 w-11 shrink-0"><x-icon name="bots" size="21" /></span><span class="text-sm font-black">All bots</span></a><a href="{{ route('profile.show') }}" class="app-card flex items-center gap-3 p-4 transition hover:-translate-y-0.5 hover:border-teal-300"><span class="premium-icon-tile orange h-11 w-11 shrink-0"><x-icon name="settings" size="21" /></span><span class="text-sm font-black">Settings</span></a></div></section>
    <section><div class="mb-3 flex items-center justify-between"><h2 class="text-xl font-black tracking-tight">Recent activity</h2><a href="{{ route('activity.index') }}" class="text-sm font-black text-teal-700">See all</a></div><div class="app-card overflow-hidden"><div class="divide-y divide-slate-100">@forelse($activity as $item)<div class="flex items-center gap-3 px-4 py-4 sm:px-5"><span class="premium-icon-tile {{ str($item->action)->contains('failure') ? 'orange' : '' }} h-11 w-11 shrink-0"><x-icon :name="str($item->action)->contains('bot') ? 'bots' : (str($item->action)->contains('login') ? 'user' : 'activity')" size="19" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-black">{{ $item->description }}</p><p class="mt-1 text-xs text-slate-400">{{ str_replace('_', ' ', $item->action) }} · {{ $item->created_at->diffForHumans() }}</p></div><x-status-pill status="active" /></div>@empty<div class="px-5 py-12 text-center text-sm text-slate-500">Your activity will appear here.</div>@endforelse</div></div></section>
    <section><div class="mb-3 flex items-center justify-between"><h2 class="text-xl font-black tracking-tight">Available templates</h2><a href="{{ route('bots.create') }}" class="text-sm font-black text-teal-700">View all</a></div><div class="flex gap-3 overflow-x-auto pb-2">@forelse($templates as $template)<a href="{{ route('bots.create', ['template' => $template->id]) }}" class="min-w-[190px] rounded-3xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-teal-300"><span class="premium-icon-tile h-10 w-10"><x-icon :name="$template->icon === 'message' ? 'message' : ($template->icon === 'link' ? 'link' : 'sparkles')" size="19" /></span><p class="mt-4 text-sm font-black">{{ $template->name }}</p><p class="mt-1 line-clamp-2 text-xs leading-5 text-slate-500">{{ $template->description }}</p></a>@empty<div class="w-full rounded-3xl bg-white p-6 text-center text-sm text-slate-500">No templates are published yet.</div>@endforelse</div></section>
</div>
@endsection