<div class="space-y-5">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('mail_log.title') }}</h1>
        <p class="mt-1 max-w-[70ch] text-sm text-muted">{{ __('mail_log.subtitle') }}</p>
    </div>

    <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
        <div class="border-b border-line p-4">
            <div class="max-w-sm">
                <x-ui.input name="search" wire:model.live.debounce.300ms="search"
                            :label="__('mail_log.search')" :placeholder="__('mail_log.search_hint')" />
            </div>
        </div>

        @if ($mails->isEmpty())
            <p class="p-8 text-center text-sm text-muted">{{ __('mail_log.empty') }}</p>
        @else
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-line bg-surface-2 text-left text-xs font-semibold text-muted">
                        <th class="px-4 py-3 font-semibold">{{ __('mail_log.col_when') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('mail_log.col_to') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('mail_log.col_subject') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('mail_log.col_kind') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($mails as $mail)
                        <tr class="border-b border-line last:border-0">
                            {{-- R19: stored in UTC, read on the wall clock. --}}
                            <td class="whitespace-nowrap px-4 py-3 font-mono text-xs text-muted">
                                {{ $mail->sent_at->local()->isoFormat('D. MMM YYYY, HH:mm:ss') }}
                            </td>
                            <td class="px-4 py-3">
                                @if ($mail->customer)
                                    <a href="{{ route('admin.customer', $mail->customer->uuid) }}" wire:navigate
                                       class="font-medium text-ink hover:underline">{{ $mail->customer->name }}</a>
                                    <p class="font-mono text-xs text-muted">{{ $mail->to }}</p>
                                @else
                                    <span class="font-mono text-xs text-muted">{{ $mail->to }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-body">
                                {{ $mail->subject }}
                                @if ($mail->from_operator)
                                    <x-ui.badge status="provisioning" class="ml-2">{{ __('mail_log.by_hand') }}</x-ui.badge>
                                @endif
                            </td>
                            <td class="px-4 py-3 font-mono text-xs text-muted">{{ $mail->kind() }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="border-t border-line p-4">{{ $mails->links() }}</div>
        @endif
    </div>
</div>
