<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Admin</p>
                <h2 class="text-2xl font-bold text-slate-950 dark:text-white">Daily Motivation</h2>
            </div>
            <a href="{{ route('admin.motivations.create') }}" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">Add Motivation</a>
        </div>
    </x-slot>

    <div class="grid gap-6">
        @forelse ($motivations as $motivation)
            <article class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                    <div>
                        <div class="flex flex-wrap items-center gap-2">
                            <h3 class="text-xl font-bold text-slate-950 dark:text-white">{{ $motivation->title }}</h3>
                            <span class="rounded-full px-3 py-1 text-xs font-bold {{ $motivation->isActive() ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200' : 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200' }}">{{ ucfirst($motivation->status) }}</span>
                        </div>
                        <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $motivation->message }}</p>
                        <p class="mt-3 text-xs font-semibold uppercase tracking-wide text-slate-400">Display date: {{ $motivation->display_date?->format('M d, Y') ?? 'Latest active fallback' }}</p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('admin.motivations.show', $motivation) }}" class="rounded-lg border border-blue-100 px-3 py-2 text-sm font-bold text-blue-700 dark:border-blue-900 dark:text-blue-300">View</a>
                        <a href="{{ route('admin.motivations.edit', $motivation) }}" class="rounded-lg border border-blue-100 px-3 py-2 text-sm font-bold text-blue-700 dark:border-blue-900 dark:text-blue-300">Edit</a>
                    </div>
                </div>
            </article>
        @empty
            <div class="rounded-lg border border-blue-100 bg-white p-10 text-center text-slate-500 dark:border-blue-900/50 dark:bg-slate-900 dark:text-slate-400">No motivations created yet.</div>
        @endforelse
    </div>

    <div class="mt-6">{{ $motivations->links() }}</div>
</x-app-layout>
