@extends('layouts.user')

@section('title', 'Newsletters')

@section('content')
<div class="max-w-3xl mx-auto px-4 py-6">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-lg font-semibold text-slate-900">Newsletters</h1>
        <a href="{{ route('nurseconnect.newsletters.create') }}" class="btn btn-brand">+ Create</a>
    </div>

    <div class="space-y-3">
        @forelse($newsletters as $newsletter)
            <a href="{{ route('nurseconnect.newsletters.show', $newsletter) }}" class="block bg-white rounded-md border border-gray-100 px-5 py-4 text-sm hover:border-slate-200">
                <div class="flex items-start justify-between gap-2">
                    <div class="min-w-0">
                        <p class="text-xs text-slate-500">Newsletter</p>
                        <h2 class="text-base font-semibold text-slate-900">{{ $newsletter->title }}</h2>
                        <p class="text-xs text-slate-600">Published by {{ $newsletter->owner?->name ?? 'Unknown' }}</p>
                    </div>
                    <span class="text-xs text-slate-500 whitespace-nowrap">{{ $newsletter->created_at?->diffForHumans() }}</span>
                </div>
                @if($newsletter->description)
                    <p class="mt-2 text-sm text-slate-700">{{ $newsletter->description }}</p>
                @endif
                <div class="mt-3 flex flex-wrap gap-3 text-xs text-slate-600">
                    <span>Status: {{ ucfirst($newsletter->status) }}</span>
                    <span>{{ $newsletter->subscriptions_count ?? 0 }} subscribers</span>
                </div>
            </a>
        @empty
            <div class="bg-white rounded-md border border-gray-100 px-5 py-4 text-sm text-slate-600">
                No newsletters yet.
            </div>
        @endforelse
    </div>

    <div class="mt-4">
        {{ $newsletters->links() }}
    </div>
</div>
@endsection