@extends('layouts.app')
@section('title', 'Unsubscribes')

@section('content')
<div class="space-y-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <form method="GET" class="flex gap-2">
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search email…" class="input w-64">
            <button class="btn-secondary">Search</button>
        </form>
        <p class="text-sm text-slate-500">Unsubscribed addresses are also on the global suppression list.</p>
    </div>

    @if ($unsubscribes->isEmpty())
        <x-empty-state title="No unsubscribes recorded" description="When a recipient clicks an unsubscribe link, the full details are logged here."/>
    @else
        <div class="table-wrap">
            <table class="table">
                <thead><tr><th>Email</th><th>Campaign</th><th>Method</th><th>IP address</th><th>When</th></tr></thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                @foreach ($unsubscribes as $unsubscribe)
                    <tr>
                        <td class="font-medium">{{ $unsubscribe->email_normalized }}</td>
                        <td>
                            @if ($unsubscribe->campaign)
                                <a href="{{ route('campaigns.show', $unsubscribe->campaign) }}" class="text-brand-600 hover:underline dark:text-brand-400">{{ $unsubscribe->campaign->name }}</a>
                            @else — @endif
                        </td>
                        <td><span class="badge-gray">{{ str_replace('_', ' ', $unsubscribe->method) }}</span></td>
                        <td class="text-slate-500">{{ $unsubscribe->ip_address }}</td>
                        <td class="text-slate-500">{{ $unsubscribe->unsubscribed_at->format('d M Y H:i') }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        {{ $unsubscribes->links() }}
    @endif
</div>
@endsection