@extends('layouts.email')
@section('title', 'Domains — Ladill Email')
@section('content')
<div class="mx-auto max-w-3xl">
    <h1 class="text-xl font-semibold tracking-tight text-slate-900">Email domains</h1>
    <p class="mt-0.5 text-sm text-slate-500">Add a domain and verify it to create mailboxes on it.</p>
    @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

    <form method="POST" action="{{ route('email.domains.store') }}" class="mt-5 flex gap-2 rounded-2xl border border-slate-200 bg-white p-2">
        @csrf
        <input name="domain" required placeholder="yourdomain.com" class="flex-1 rounded-xl border-0 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-0">
        <button class="btn-primary">Add domain</button>
    </form>

    @if(!empty($domains))
        <div class="mt-6 divide-y divide-slate-100 overflow-hidden rounded-2xl border border-slate-200 bg-white">
            @foreach($domains as $d)
                <a href="{{ route('email.domains.show', $d['id']) }}" class="flex items-center justify-between px-5 py-4 transition hover:bg-slate-50">
                    <span class="text-sm font-semibold text-slate-900">{{ $d['domain'] }}</span>
                    @if($d['active'] ?? false)
                        <span class="rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-medium text-emerald-700">Verified</span>
                    @else
                        <span class="rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-medium text-amber-700">Pending verification</span>
                    @endif
                </a>
            @endforeach
        </div>
    @endif
</div>
@endsection