@extends('admin.layouts.admin')

@section('title', 'Health Library')

@section('content')

    <div class="flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-lg font-semibold text-brand-ink lg:text-2xl lg:font-extrabold">Health Library</h1>
            <p class="mt-1 text-brand-ink/65">Articles shown on the public Health Library page.</p>
        </div>
        <a href="{{ route('admin.articles.create') }}" class="btn-primary w-full sm:w-auto">+ New Article</a>
    </div>

    <div class="mt-8 overflow-x-auto rounded-2xl border border-brand-green-200 bg-white shadow-card">
        <table class="min-w-full divide-y divide-brand-green-200">
            <thead class="border-b border-brand-green-200 bg-brand-green-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Title</th>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Published</th>
                    <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wide text-brand-ink/65 lg:font-bold">Status</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-brand-green-200">
                @forelse ($articles as $article)
                    <tr>
                        <td class="px-5 py-3 text-sm font-semibold text-brand-ink">{{ $article->getTranslation('title', 'kn') }}</td>
                        <td class="px-5 py-3 text-sm text-brand-ink/65">{{ $article->published_at?->format('d M Y') ?? '—' }}</td>
                        <td class="px-5 py-3">
                            <span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $article->is_published ? 'bg-brand-green-100 text-brand-green-800' : 'bg-gray-100 text-gray-500' }}">
                                {{ $article->is_published ? 'Published' : 'Draft' }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-right text-sm">
                            <a href="{{ route('admin.articles.edit', $article) }}" class="font-semibold text-brand-green-800 hover:underline">Edit</a>
                            <form method="POST" action="{{ route('admin.articles.destroy', $article) }}" class="ml-3 inline" onsubmit="return confirm('Delete this article?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="font-semibold text-accent-liver hover:underline">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="px-5 py-6 text-center text-sm text-brand-ink/65">No articles yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">{{ $articles->links() }}</div>

@endsection