@extends('layouts.email')
@section('title', 'Mailboxes — Ladill Email')
@section('content')
<div class="mx-auto max-w-4xl">
    <div class="flex items-center justify-between">
        <h1 class="text-xl font-semibold tracking-tight text-slate-900">Mailboxes</h1>
        <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

    @if(empty($mailboxes))
        <div class="mt-6 rounded-2xl border border-dashed border-slate-300 bg-white p-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">Verify a domain, then create a mailbox like you@yourdomain.com.</p>
            <x-btn.create :href="route('email.mailboxes.create')" class="mt-4">Create mailbox</x-btn.create>
        </div>
    @else
        <div class="mt-6 divide-y divide-slate-100 overflow-hidden rounded-2xl border border-slate-200 bg-white">
            @foreach($mailboxes as $m)
                <a href="{{ route('email.mailboxes.show', $m['id']) }}" class="flex items-center justify-between gap-3 px-5 py-4 transition hover:bg-slate-50">
                    <div class="min-w-0">
                        <p class="truncate text-sm font-semibold text-slate-900">{{ $m['address'] }}</p>
                        <p class="mt-0.5 text-xs text-slate-400">{{ $m['display_name'] ?? '' }} · {{ number_format(($m['quota_mb'] ?? 0)/1024, 0) }} GB</p>
                    </div>
                    @php $st = $m['status'] ?? 'pending'; $badge = $st === 'active' ? 'bg-emerald-50 text-emerald-700' : ($st === 'failed' ? 'bg-rose-50 text-rose-700' : 'bg-slate-100 text-slate-600'); @endphp
                    <span class="shrink-0 rounded-full px-2.5 py-1 text-[11px] font-medium capitalize {{ $badge }}">{{ $st }}</span>
                </a>
            @endforeach
        </div>
    @endif
</div>
@endsection