@extends('layouts.trading')

@section('content')
<div class="trade-card">
    <h2 class="mb-4 text-xl font-bold text-white">Notifications</h2>
    <div class="space-y-3">
        @forelse ($notifications as $notification)
            <div class="rounded-xl border border-trade-border bg-trade-panel p-4 {{ $notification->read_at ? 'opacity-70' : '' }}">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <div class="font-semibold text-white">{{ $notification->title }}</div>
                        <div class="mt-1 text-sm text-slate-400">{{ $notification->message }}</div>
                        <div class="mt-2 text-xs text-slate-500">{{ $notification->created_at->diffForHumans() }}</div>
                    </div>
                    @unless ($notification->read_at)
                        <form method="POST" action="{{ route('notifications.read', $notification) }}">
                            @csrf
                            <button class="trade-btn-ghost text-xs">Mark read</button>
                        </form>
                    @endunless
                </div>
            </div>
        @empty
            <p class="text-slate-500">No notifications yet.</p>
        @endforelse
    </div>
    <div class="mt-4">{{ $notifications->links() }}</div>
</div>
@endsection