@extends('layouts.app') {{-- or layout you are using --}}

@section('content')
<div class="container mx-auto px-4 py-6">
    <h2 class="text-xl font-bold mb-4">Queued Jobs</h2>

    <table class="w-full border border-gray-300 text-left text-sm">
        <thead>
            <tr class="bg-gray-100">
                <th class="px-3 py-2 border">ID</th>
                <th class="px-3 py-2 border">Queue</th>
                <th class="px-3 py-2 border">Attempts</th>
                <th class="px-3 py-2 border">Payload</th>
                <th class="px-3 py-2 border">Created At</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($jobs as $job)
                <tr>
                    <td class="px-3 py-2 border">{{ $job->id }}</td>
                    <td class="px-3 py-2 border">{{ $job->queue }}</td>
                    <td class="px-3 py-2 border">{{ $job->attempts }}</td>
                    <td class="px-3 py-2 border truncate max-w-xs">{{ Str::limit($job->payload, 100) }}</td>
                    <td class="px-3 py-2 border">{{ date('Y-m-d H:i:s', $job->created_at) }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="text-center py-3">No jobs found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

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