@extends('layouts.email')
@section('title', 'Overview — Ladill Email')
@section('content')
<div class="mx-auto max-w-5xl">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold tracking-tight text-slate-900">Overview</h1>
            <p class="mt-0.5 text-sm text-slate-500">Your mailboxes at a glance.</p>
        </div>
        <x-btn.create :href="route('email.mailboxes.create')">New mailbox</x-btn.create>
    </div>

    @if($error)<div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ $error }}</div>@endif

    <div class="mt-6 grid gap-4 sm:grid-cols-3">
        @foreach([['Mailboxes', $mailboxCount, route('email.mailboxes.index')], ['Domains', $domainCount, route('email.domains.index')], ['Verified domains', $verifiedDomainCount, route('email.domains.index')]] as [$label, $value, $link])
            <a href="{{ $link }}" class="rounded-2xl border border-slate-200 bg-white p-5 transition hover:border-indigo-200">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-400">{{ $label }}</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $value }}</p>
            </a>
        @endforeach
    </div>

    <div class="mt-6 rounded-2xl border border-slate-200 bg-white">
        <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3.5">
            <h2 class="text-sm font-semibold text-slate-900">Recent mailboxes</h2>
            <a href="{{ route('email.mailboxes.index') }}" class="text-xs font-medium text-indigo-600 hover:underline">View all</a>
        </div>
        @if(empty($recent))
            <div class="px-5 py-12 text-center">
                <p class="text-sm font-semibold text-slate-700">No mailboxes yet</p>
                <p class="mx-auto mt-1 max-w-sm text-xs text-slate-400">Add a domain, verify it, then create your first mailbox.</p>
                <a href="{{ route('email.domains.index') }}" class="mt-4 inline-block rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Set up a domain</a>
            </div>
        @else
            <div class="divide-y divide-slate-50">
                @foreach($recent as $m)
                    <a href="{{ route('email.mailboxes.show', $m['id']) }}" class="flex items-center justify-between px-5 py-3.5 transition hover:bg-slate-50">
                        <span class="text-sm font-medium text-slate-900">{{ $m['address'] }}</span>
                        <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium capitalize text-slate-600">{{ $m['status'] }}</span>
                    </a>
                @endforeach
            </div>
        @endif
    </div>
</div>
@endsection